docs: new example: advanced-parallax

give an example to show how to customize animation style

#88

example/src/advanced-parallax/index.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { Dimensions, View } from 'react-native';
+import Animated, {
+    interpolate,
+    interpolateColor,
+    useAnimatedStyle,
+} from 'react-native-reanimated';
+import Carousel from '../../../src/index';
+import type { TAnimationStyle } from '../../../src/layouts/BaseLayout';
+import { SBItem } from '../components/SBItem';
+
+const window = Dimensions.get('window');
+const PAGE_WIDTH = window.width;
+
+function Index() {
+    const animationStyle: TAnimationStyle = React.useCallback(
+        (value: number) => {
+            'worklet';
+
+            const zIndex = interpolate(value, [-1, 0, 1], [10, 20, 30]);
+            const translateX = interpolate(
+                value,
+                [-2, 0, 1],
+                [-PAGE_WIDTH, 0, PAGE_WIDTH]
+            );
+
+            return {
+                transform: [{ translateX }],
+                zIndex,
+            };
+        },
+        []
+    );
+
+    return (
+        <View style={{ flex: 1 }}>
+            <Carousel
+                loop={true}
+                style={{ width: PAGE_WIDTH, height: 240 }}
+                width={PAGE_WIDTH}
+                autoPlayInterval={1500}
+                data={[...new Array(6).keys()]}
+                renderItem={({ index, animationValue }) => {
+                    return (
+                        <CustomItem
+                            key={index}
+                            index={index}
+                            animationValue={animationValue}
+                        />
+                    );
+                }}
+                customAnimation={animationStyle}
+            />
+        </View>
+    );
+}
+
+interface ItemProps {
+    index: number;
+    animationValue: Animated.SharedValue<number>;
+}
+const CustomItem: React.FC<ItemProps> = ({ index, animationValue }) => {
+    const maskStyle = useAnimatedStyle(() => {
+        const backgroundColor = interpolateColor(
+            animationValue.value,
+            [-1, 0, 1],
+            ['#000000dd', 'transparent', '#000000dd']
+        );
+
+        return {
+            backgroundColor,
+        };
+    }, [animationValue]);
+
+    return (
+        <View style={{ flex: 1 }}>
+            <SBItem key={index} index={index} style={{ borderRadius: 0 }} />
+            <Animated.View
+                pointerEvents="none"
+                style={[
+                    {
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                    },
+                    maskStyle,
+                ]}
+            />
+        </View>
+    );
+};
+
+export default Index;

example/src/components/SBImageItem.tsx

@@ -1,12 +1,23 @@
 import React from 'react';
-import { StyleSheet, View, Image, ActivityIndicator } from 'react-native';
+import {
+    StyleSheet,
+    View,
+    Image,
+    ActivityIndicator,
+    StyleProp,
+    ViewStyle,
+} from 'react-native';
 
-export const SBImageItem: React.FC = () => {
+interface Props {
+    style?: StyleProp<ViewStyle>;
+}
+
+export const SBImageItem: React.FC<Props> = ({ style }) => {
     const uri = React.useRef(
         `https://picsum.photos/400/300?t=${new Date().getTime()}`
     );
     return (
-        <View style={styles.container}>
+        <View style={[styles.container, style]}>
             <ActivityIndicator size="small" />
             <Image
                 style={styles.image}
@@ -25,9 +36,9 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         backgroundColor: '#fff',
         borderRadius: 8,
+        overflow: 'hidden',
     },
     image: {
-        borderRadius: 4,
         position: 'absolute',
         top: 0,
         left: 0,

example/src/components/SBItem.tsx

@@ -4,19 +4,29 @@ import { View } from 'react-native-ui-lib';
 import { SBImageItem } from './SBImageItem';
 import { SBTextItem } from './SBTextItem';
 import Constants from 'expo-constants';
+import type { StyleProp, ViewStyle } from 'react-native';
 
-export const SBItem: React.FC<{ index: number }> = ({ index }) => {
+interface Props {
+    style?: StyleProp<ViewStyle>;
+    index: number;
+    pretty?: boolean;
+}
+export const SBItem: React.FC<Props> = ({ style, index, pretty }) => {
     // @ts-ignore
     const enablePretty = Constants.manifest.extra.enablePretty;
-    const [isPretty, setIsPretty] = React.useState(enablePretty);
+    const [isPretty, setIsPretty] = React.useState(pretty || enablePretty);
     return (
         <LongPressGestureHandler
             onActivated={() => {
                 setIsPretty(!isPretty);
             }}
         >
             <View flex>
-                {isPretty ? <SBImageItem /> : <SBTextItem index={index} />}
+                {isPretty ? (
+                    <SBImageItem style={style} />
+                ) : (
+                    <SBTextItem style={style} index={index} />
+                )}
             </View>
         </LongPressGestureHandler>
     );

example/src/components/SBTextItem.tsx

@@ -1,10 +1,15 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 import { Text } from 'react-native-ui-lib';
 
-export const SBTextItem: React.FC<{ index: number }> = ({ index }) => {
+interface Props {
+    style?: StyleProp<ViewStyle>;
+    index: number;
+}
+
+export const SBTextItem: React.FC<Props> = ({ style, index }) => {
     return (
-        <View style={styles.container}>
+        <View style={[styles.container, style]}>
             <Text style={{ fontSize: 30 }} color="black">
                 {index}
             </Text>

example/src/home/index.tsx

@@ -29,6 +29,9 @@ const LayoutsPage: Array<Record<'name', keyof RootStackParamList>> = [
     {
         name: 'SnapCarouselLoop',
     },
+    {
+        name: 'AdvancedParallax',
+    },
 ];
 
 const Index = () => {

example/src/index.tsx

@@ -3,6 +3,9 @@ import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 // @ts-ignore
 import { Restart } from 'fiction-expo-restart';
+import { I18nManager } from 'react-native';
+import { Text } from 'react-native-ui-lib';
+import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 
 import Home from './home';
 import NormalComponent from './normal';
@@ -11,9 +14,7 @@ import StackComponent from './stack';
 import ComplexComponent from './complex';
 import SnapCarouselComplexComponent from './snap-carousel-complex';
 import SnapCarouselLoopComponent from './snap-carousel-loop';
-import { I18nManager } from 'react-native';
-import { Text } from 'react-native-ui-lib';
-import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
+import AdvancedParallaxComponent from './advanced-parallax';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
@@ -25,6 +26,7 @@ export type RootStackParamList = {
     Complex: undefined;
     SnapCarouselComplex: undefined;
     SnapCarouselLoop: undefined;
+    AdvancedParallax: undefined;
 };
 
 function App() {
@@ -66,6 +68,10 @@ function App() {
                     name="SnapCarouselLoop"
                     component={SnapCarouselLoopComponent}
                 />
+                <Stack.Screen
+                    name="AdvancedParallax"
+                    component={AdvancedParallaxComponent}
+                />
             </Stack.Navigator>
         </NavigationContainer>
     );

src/Carousel.tsx

@@ -147,7 +147,11 @@ function Carousel<T>(
                     animationStyle={customAnimation || layoutConfig}
                 >
                     {({ animationValue }) =>
-                        renderItem({ item, index: realIndex, animationValue })
+                        renderItem({
+                            item,
+                            index: realIndex,
+                            animationValue,
+                        })
                     }
                 </BaseLayout>
             );