diff --git a/example/src/complex/index.tsx b/example/src/complex/index.tsx
new file mode 100644
index 00000000..94d8eab0
--- /dev/null
+++ b/example/src/complex/index.tsx
@@ -0,0 +1,145 @@
+import * as React from 'react';
+import { Button, Dimensions, ScrollView, Text, View } from 'react-native';
+import Carousel from '../../../src/index';
+import type { ICarouselInstance } from '../../../src/types';
+
+const window = Dimensions.get('window');
+const PAGE_WIDTH = window.width;
+
+interface DataItem {
+    text: string;
+    backgroundColor: string;
+}
+
+const data: DataItem[] = [
+    { text: '0', backgroundColor: '#ffbb96' },
+    { text: '1', backgroundColor: '#ff9c6e' },
+    { text: '2', backgroundColor: '#ff7a45' },
+    { text: '3', backgroundColor: '#fa541c' },
+    { text: '4', backgroundColor: '#d4380d' },
+    { text: '5', backgroundColor: '#ad2102' },
+    { text: '6', backgroundColor: '#871400' },
+    { text: '7', backgroundColor: '#ffbb96' },
+    { text: '8', backgroundColor: '#ff9c6e' },
+    { text: '9', backgroundColor: '#ff7a45' },
+    { text: '10', backgroundColor: '#fa541c' },
+    { text: '11', backgroundColor: '#d4380d' },
+    { text: '12', backgroundColor: '#ad2102' },
+    { text: '13', backgroundColor: '#871400' },
+    { text: '14', backgroundColor: '#ffbb96' },
+    { text: '15', backgroundColor: '#ff9c6e' },
+    { text: '16', backgroundColor: '#ff7a45' },
+    { text: '17', backgroundColor: '#fa541c' },
+    { text: '18', backgroundColor: '#d4380d' },
+    { text: '19', backgroundColor: '#ad2102' },
+    { text: '20', backgroundColor: '#871400' },
+    { text: '21', backgroundColor: '#ffbb96' },
+    { text: '22', backgroundColor: '#ff9c6e' },
+    { text: '23', backgroundColor: '#ffbb96' },
+    { text: '24', backgroundColor: '#ff9c6e' },
+    { text: '25', backgroundColor: '#ff7a45' },
+    { text: '26', backgroundColor: '#fa541c' },
+    { text: '27', backgroundColor: '#d4380d' },
+    { text: '28', backgroundColor: '#ad2102' },
+    { text: '29', backgroundColor: '#871400' },
+    { text: '30', backgroundColor: '#ffbb96' },
+    { text: '31', backgroundColor: '#ff9c6e' },
+    { text: '32', backgroundColor: '#ff7a45' },
+    { text: '33', backgroundColor: '#fa541c' },
+    { text: '34', backgroundColor: '#d4380d' },
+    { text: '35', backgroundColor: '#ad2102' },
+    { text: '36', backgroundColor: '#871400' },
+    { text: '37', backgroundColor: '#ffbb96' },
+    { text: '38', backgroundColor: '#ff9c6e' },
+    { text: '39', backgroundColor: '#ff7a45' },
+    { text: '40', backgroundColor: '#ff7a45' },
+    { text: '41', backgroundColor: '#ff7a45' },
+    { text: '42', backgroundColor: '#ff7a45' },
+    { text: '43', backgroundColor: '#ff7a45' },
+    { text: '44', backgroundColor: '#ff7a45' },
+    { text: '45', backgroundColor: '#ff7a45' },
+    { text: '46', backgroundColor: '#ff7a45' },
+    { text: '47', backgroundColor: '#ff7a45' },
+    { text: '48', backgroundColor: '#ff7a45' },
+    { text: '49', backgroundColor: '#ff7a45' },
+];
+
+function Index() {
+    const r = React.useRef<ICarouselInstance | null>(null);
+
+    return (
+        <View
+            style={{
+                flex: 1,
+                alignItems: 'center',
+                backgroundColor: '#f1f1f1',
+                paddingTop: 100,
+            }}
+        >
+            <View style={{ width: PAGE_WIDTH, height: 240 }}>
+                <Carousel
+                    defaultIndex={0}
+                    ref={r}
+                    width={PAGE_WIDTH}
+                    data={data}
+                    mode="parallax"
+                    windowSize={3}
+                    renderItem={({ backgroundColor, text }, index) => (
+                        <View
+                            key={index}
+                            style={{
+                                flex: 1,
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                backgroundColor,
+                                padding: 16,
+                            }}
+                        >
+                            <Text style={{ color: 'white', fontSize: 30 }}>
+                                {`${index}-${text}`}
+                            </Text>
+                            <ScrollView style={{ width: '100%' }}>
+                                {new Array(100).fill(0).map((_, i) => {
+                                    return (
+                                        <View
+                                            key={i}
+                                            style={{
+                                                borderWidth: 1,
+                                                borderColor: '#0000001a',
+                                                padding: 16,
+                                            }}
+                                        >
+                                            <Text>{i}</Text>
+                                        </View>
+                                    );
+                                })}
+                            </ScrollView>
+                        </View>
+                    )}
+                />
+            </View>
+            <View
+                style={{
+                    marginTop: 24,
+                    flexDirection: 'row',
+                    justifyContent: 'space-evenly',
+                }}
+            >
+                <Button
+                    title="Prev"
+                    onPress={() => {
+                        r.current?.prev();
+                    }}
+                />
+                <Button
+                    title="Next"
+                    onPress={() => {
+                        r.current?.next();
+                    }}
+                />
+            </View>
+        </View>
+    );
+}
+
+export default Index;
diff --git a/example/src/home/index.tsx b/example/src/home/index.tsx
index b7b8b440..81b87816 100644
--- a/example/src/home/index.tsx
+++ b/example/src/home/index.tsx
@@ -1,8 +1,14 @@
 import * as React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import {
+    View,
+    Text,
+    StyleSheet,
+    ScrollView,
+    TouchableHighlight,
+} from 'react-native';
 import { useNavigation, NavigationProp } from '@react-navigation/native';
 import type { RootStackParamList } from '../index';
-import { Colors, ListItem } from 'react-native-ui-lib';
+import { Colors } from 'react-native-ui-lib';
 
 const LayoutsPage: Array<Record<'name', keyof RootStackParamList>> = [
     {
@@ -11,29 +17,45 @@ const LayoutsPage: Array<Record<'name', keyof RootStackParamList>> = [
     {
         name: 'Parallax',
     },
+    {
+        name: 'Complex',
+    },
+    {
+        name: 'SnapCarouselComplex',
+    },
 ];
 
 const Index = () => {
     const navigation = useNavigation<NavigationProp<RootStackParamList>>();
     return (
-        <View style={StyleSheet.absoluteFill}>
+        <ScrollView style={{ flex: 1 }}>
             {LayoutsPage.map(({ name }, index) => {
                 return (
-                    <ListItem
+                    <TouchableHighlight
                         key={index}
                         onPress={() => navigation.navigate(name)}
-                        style={{
-                            alignItems: 'center',
-                            borderColor: Colors.grey60,
-                            borderBottomWidth: 1,
-                        }}
                     >
-                        <Text>{name}</Text>
-                    </ListItem>
+                        <View style={styles.listItem}>
+                            <Text style={styles.text}>{name}</Text>
+                        </View>
+                    </TouchableHighlight>
                 );
             })}
-        </View>
+        </ScrollView>
     );
 };
 
 export default Index;
+
+const styles = StyleSheet.create({
+    listItem: {
+        alignItems: 'center',
+        borderColor: Colors.grey60,
+        borderBottomWidth: 0.5,
+        padding: 16,
+        backgroundColor: '#fff',
+    },
+    text: {
+        fontSize: 16,
+    },
+});
diff --git a/example/src/index.tsx b/example/src/index.tsx
index 41addb6d..0a3c1fcd 100644
--- a/example/src/index.tsx
+++ b/example/src/index.tsx
@@ -5,6 +5,8 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import Home from './home';
 import NormalComponent from './normal';
 import ParallaxComponent from './parallax';
+import ComplexComponent from './complex';
+import SnapCarouselComplexComponent from './snap-carousel-complex';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
@@ -12,6 +14,8 @@ export type RootStackParamList = {
     Home: undefined;
     Normal: undefined;
     Parallax: undefined;
+    Complex: undefined;
+    SnapCarouselComplex: undefined;
 };
 
 function App() {
@@ -22,14 +26,17 @@ function App() {
                 screenOptions={{
                     contentStyle: {
                         flex: 1,
-                        backgroundColor: 'white',
-                        paddingTop: 100,
                     },
                 }}
             >
                 <Stack.Screen name="Home" component={Home} />
                 <Stack.Screen name="Normal" component={NormalComponent} />
                 <Stack.Screen name="Parallax" component={ParallaxComponent} />
+                <Stack.Screen name="Complex" component={ComplexComponent} />
+                <Stack.Screen
+                    name="SnapCarouselComplex"
+                    component={SnapCarouselComplexComponent}
+                />
             </Stack.Navigator>
         </NavigationContainer>
     );
diff --git a/example/src/snap-carousel-complex/index.tsx b/example/src/snap-carousel-complex/index.tsx
new file mode 100644
index 00000000..cee2e063
--- /dev/null
+++ b/example/src/snap-carousel-complex/index.tsx
@@ -0,0 +1,150 @@
+import * as React from 'react';
+import { Button, Dimensions, ScrollView, Text, View } from 'react-native';
+import Carousel from 'react-native-snap-carousel';
+
+const window = Dimensions.get('window');
+const PAGE_WIDTH = window.width;
+
+interface DataItem {
+    text: string;
+    backgroundColor: string;
+}
+
+const data: DataItem[] = [
+    { text: '0', backgroundColor: '#ffbb96' },
+    { text: '1', backgroundColor: '#ff9c6e' },
+    { text: '2', backgroundColor: '#ff7a45' },
+    { text: '3', backgroundColor: '#fa541c' },
+    { text: '4', backgroundColor: '#d4380d' },
+    { text: '5', backgroundColor: '#ad2102' },
+    { text: '6', backgroundColor: '#871400' },
+    { text: '7', backgroundColor: '#ffbb96' },
+    { text: '8', backgroundColor: '#ff9c6e' },
+    { text: '9', backgroundColor: '#ff7a45' },
+    { text: '10', backgroundColor: '#fa541c' },
+    { text: '11', backgroundColor: '#d4380d' },
+    { text: '12', backgroundColor: '#ad2102' },
+    { text: '13', backgroundColor: '#871400' },
+    { text: '14', backgroundColor: '#ffbb96' },
+    { text: '15', backgroundColor: '#ff9c6e' },
+    { text: '16', backgroundColor: '#ff7a45' },
+    { text: '17', backgroundColor: '#fa541c' },
+    { text: '18', backgroundColor: '#d4380d' },
+    { text: '19', backgroundColor: '#ad2102' },
+    { text: '20', backgroundColor: '#871400' },
+    { text: '21', backgroundColor: '#ffbb96' },
+    { text: '22', backgroundColor: '#ff9c6e' },
+    { text: '23', backgroundColor: '#ffbb96' },
+    { text: '24', backgroundColor: '#ff9c6e' },
+    { text: '25', backgroundColor: '#ff7a45' },
+    { text: '26', backgroundColor: '#fa541c' },
+    { text: '27', backgroundColor: '#d4380d' },
+    { text: '28', backgroundColor: '#ad2102' },
+    { text: '29', backgroundColor: '#871400' },
+    { text: '30', backgroundColor: '#ffbb96' },
+    { text: '31', backgroundColor: '#ff9c6e' },
+    { text: '32', backgroundColor: '#ff7a45' },
+    { text: '33', backgroundColor: '#fa541c' },
+    { text: '34', backgroundColor: '#d4380d' },
+    { text: '35', backgroundColor: '#ad2102' },
+    { text: '36', backgroundColor: '#871400' },
+    { text: '37', backgroundColor: '#ffbb96' },
+    { text: '38', backgroundColor: '#ff9c6e' },
+    { text: '39', backgroundColor: '#ff7a45' },
+    { text: '40', backgroundColor: '#ff7a45' },
+    { text: '41', backgroundColor: '#ff7a45' },
+    { text: '42', backgroundColor: '#ff7a45' },
+    { text: '43', backgroundColor: '#ff7a45' },
+    { text: '44', backgroundColor: '#ff7a45' },
+    { text: '45', backgroundColor: '#ff7a45' },
+    { text: '46', backgroundColor: '#ff7a45' },
+    { text: '47', backgroundColor: '#ff7a45' },
+    { text: '48', backgroundColor: '#ff7a45' },
+    { text: '49', backgroundColor: '#ff7a45' },
+];
+
+function Index() {
+    const r = React.useRef<Carousel<DataItem>>(null);
+
+    return (
+        <View
+            style={{
+                flex: 1,
+                alignItems: 'center',
+                backgroundColor: '#f1f1f1',
+                paddingTop: 100,
+            }}
+        >
+            <View style={{ width: PAGE_WIDTH, height: 240 }}>
+                <Carousel
+                    ref={r}
+                    loop
+                    itemWidth={PAGE_WIDTH}
+                    sliderWidth={PAGE_WIDTH}
+                    data={data}
+                    windowSize={3}
+                    renderItem={({
+                        item,
+                        index,
+                    }: {
+                        item: DataItem;
+                        index: number;
+                    }) => (
+                        <View
+                            key={index}
+                            style={{
+                                flex: 1,
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                backgroundColor: item.backgroundColor,
+                                padding: 16,
+                            }}
+                        >
+                            <Text style={{ color: 'white', fontSize: 30 }}>
+                                {`${index}-${item.text}`}
+                            </Text>
+                            <ScrollView style={{ width: '100%' }}>
+                                {new Array(100).fill(0).map((_, i) => {
+                                    return (
+                                        <View
+                                            key={i}
+                                            style={{
+                                                borderWidth: 1,
+                                                borderColor: '#0000001a',
+                                                padding: 16,
+                                            }}
+                                        >
+                                            <Text>{i}</Text>
+                                        </View>
+                                    );
+                                })}
+                            </ScrollView>
+                        </View>
+                    )}
+                />
+            </View>
+            <View
+                style={{
+                    marginTop: 24,
+                    flexDirection: 'row',
+                    justifyContent: 'space-evenly',
+                }}
+            >
+                <Button
+                    title="Prev"
+                    onPress={() => {
+                        r.current?.snapToPrev();
+                    }}
+                />
+                <Button
+                    title="Next"
+                    onPress={() => {
+                        r.current?.snapToNext();
+                    }}
+                />
+            </View>
+        </View>
+    );
+}
+
+export default Index;
diff --git a/package.json b/package.json
index 13d59313..5fb0c3ba 100644
--- a/package.json
+++ b/package.json
@@ -129,5 +129,9 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
+  },
+  "dependencies": {
+    "@types/react-native-snap-carousel": "^3.8.5",
+    "react-native-snap-carousel": "^3.9.1"
   }
 }
diff --git a/src/CarouselItem.tsx b/src/CarouselItem.tsx
index e070966a..9438f0dc 100644
--- a/src/CarouselItem.tsx
+++ b/src/CarouselItem.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import Animated, { runOnJS, useAnimatedStyle } from 'react-native-reanimated';
 import { useOffsetX } from './hooks/useOffsetX';
 import type { IVisibleRanges } from './hooks/useVisibleRanges';
+import { LazyView } from './LazyView';
 
 export const CarouselItem: React.FC<{
     loop?: boolean;
@@ -25,6 +26,8 @@ export const CarouselItem: React.FC<{
         vertical,
     } = props;
 
+    const [shouldUpdate, setShouldUpdate] = React.useState(false);
+
     const x = useOffsetX(
         {
             handlerOffsetX,
@@ -45,6 +48,27 @@ export const CarouselItem: React.FC<{
         };
     }, [vertical]);
 
+    const updateView = React.useCallback(
+        (negativeRange: number[], positiveRange: number[]) => {
+            setShouldUpdate(
+                (index >= negativeRange[0] && index <= negativeRange[1]) ||
+                    (index >= positiveRange[0] && index <= positiveRange[1])
+            );
+        },
+        [index]
+    );
+
+    Animated.useAnimatedReaction(
+        () => visibleRanges.value,
+        () => {
+            runOnJS(updateView)(
+                visibleRanges.value.negativeRange,
+                visibleRanges.value.positiveRange
+            );
+        },
+        [visibleRanges.value]
+    );
+
     return (
         <Animated.View
             style={[
@@ -55,7 +79,7 @@ export const CarouselItem: React.FC<{
                 },
             ]}
         >
-            {children}
+            <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>
         </Animated.View>
     );
 };
diff --git a/src/LazyView.tsx b/src/LazyView.tsx
new file mode 100644
index 00000000..028793f7
--- /dev/null
+++ b/src/LazyView.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface Props {
+    shouldUpdate: boolean;
+}
+
+export const LazyView: React.FC<Props> = (props) => {
+    const { shouldUpdate, children } = props;
+
+    if (!shouldUpdate) {
+        return <></>;
+    }
+
+    return <>{children}</>;
+};
diff --git a/src/layouts/ParallaxLayout.tsx b/src/layouts/ParallaxLayout.tsx
index bd0dd5da..feb0f009 100644
--- a/src/layouts/ParallaxLayout.tsx
+++ b/src/layouts/ParallaxLayout.tsx
@@ -3,10 +3,12 @@ import { StyleSheet } from 'react-native';
 import Animated, {
     Extrapolate,
     interpolate,
+    runOnJS,
     useAnimatedStyle,
 } from 'react-native-reanimated';
 import { useOffsetX } from '../hooks/useOffsetX';
 import type { IVisibleRanges } from '../hooks/useVisibleRanges';
+import { LazyView } from '../LazyView';
 
 export const ParallaxLayout: React.FC<{
     loop?: boolean;
@@ -34,6 +36,8 @@ export const ParallaxLayout: React.FC<{
         vertical,
     } = props;
 
+    const [shouldUpdate, setShouldUpdate] = React.useState(false);
+
     const size = React.useMemo(
         () => (vertical ? height : width),
         [vertical, width, height]
@@ -110,9 +114,30 @@ export const ParallaxLayout: React.FC<{
         };
     }, [loop, vertical]);
 
+    const updateView = React.useCallback(
+        (negativeRange: number[], positiveRange: number[]) => {
+            setShouldUpdate(
+                (index >= negativeRange[0] && index <= negativeRange[1]) ||
+                    (index >= positiveRange[0] && index <= positiveRange[1])
+            );
+        },
+        [index]
+    );
+
+    Animated.useAnimatedReaction(
+        () => visibleRanges.value,
+        () => {
+            runOnJS(updateView)(
+                visibleRanges.value.negativeRange,
+                visibleRanges.value.positiveRange
+            );
+        },
+        [visibleRanges.value]
+    );
+
     return (
         <Animated.View style={[layoutStyle, styles.container, offsetXStyle]}>
-            {children}
+            <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>
         </Animated.View>
     );
 };
diff --git a/yarn.lock b/yarn.lock
index 2210a1ba..7256f66f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2033,6 +2033,21 @@
   resolved "https://registry.nlark.com/@types/prop-types/download/@types/prop-types-15.7.4.tgz?cache=0&sync_timestamp=1629708737049&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fprop-types%2Fdownload%2F%40types%2Fprop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
   integrity sha1-/PcgXCXf95Xuea8eMNosl5CAjxE=
 
+"@types/react-native-snap-carousel@^3.8.5":
+  version "3.8.5"
+  resolved "https://registry.npmjs.org/@types/react-native-snap-carousel/-/react-native-snap-carousel-3.8.5.tgz#5b3cb208119e3599d5537b5fc83653a155c6275d"
+  integrity sha512-EMBwQo/om2HZM/J6u8Bvz7i0BEO/v6frrpmlvUQ579CMsgYQPlYzQ1ne4KDdRq08+yDSG8/8AwIi1R+185ROsg==
+  dependencies:
+    "@types/react" "*"
+    "@types/react-native" "*"
+
+"@types/react-native@*":
+  version "0.66.9"
+  resolved "https://registry.npmjs.org/@types/react-native/-/react-native-0.66.9.tgz#a051d1f1f3cd03df4b4870e91e416b71377a8b7a"
+  integrity sha512-lve1rgQadbOM82ZRiw6CvvManUeidDhlFtiXA+dErI7a7/NNxLM7kZVYDNKd/QQc5FgLlQ0Uof2QInup7OwsBg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-native@0.62.13":
   version "0.62.13"
   resolved "https://registry.nlark.com/@types/react-native/download/@types/react-native-0.62.13.tgz#c688c5ae03e426f927f7e1fa1a59cd067f35d1c2"
@@ -3471,6 +3486,11 @@ core-js-compat@^3.14.0, core-js-compat@^3.16.0:
     browserslist "^4.16.8"
     semver "7.0.0"
 
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+  integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
+
 core-js@^2.4.1:
   version "2.6.12"
   resolved "https://registry.nlark.com/core-js/download/core-js-2.6.12.tgz?cache=0&sync_timestamp=1630603502653&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcore-js%2Fdownload%2Fcore-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
@@ -4451,6 +4471,19 @@ fbjs-scripts@^1.1.0:
     semver "^5.1.0"
     through2 "^2.0.0"
 
+fbjs@^0.8.4:
+  version "0.8.18"
+  resolved "https://registry.npmjs.org/fbjs/-/fbjs-0.8.18.tgz#9835e0addb9aca2eff53295cd79ca1cfc7c9662a"
+  integrity sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA==
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.30"
+
 fbjs@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npm.taobao.org/fbjs/download/fbjs-1.0.0.tgz?cache=0&sync_timestamp=1602047602038&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffbjs%2Fdownload%2Ffbjs-1.0.0.tgz#52c215e0883a3c86af2a7a776ed51525ae8e0a5a"
@@ -7876,7 +7909,7 @@ prompts@^2.0.1, prompts@^2.4.0:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.npm.taobao.org/prop-types/download/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha1-UsQedbjIfnK52TYOAga5ncv/psU=
@@ -7972,6 +8005,14 @@ rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-addons-shallow-compare@15.6.2:
+  version "15.6.2"
+  resolved "https://registry.npmjs.org/react-addons-shallow-compare/-/react-addons-shallow-compare-15.6.2.tgz#198a00b91fc37623db64a28fd17b596ba362702f"
+  integrity sha1-GYoAuR/DdiPbZKKP0XtZa6NicC8=
+  dependencies:
+    fbjs "^0.8.4"
+    object-assign "^4.1.0"
+
 react-devtools-core@^4.6.0:
   version "4.18.0"
   resolved "https://registry.nlark.com/react-devtools-core/download/react-devtools-core-4.18.0.tgz#06b2375dcea7858c957d1779cc2339d2a0af200a"
@@ -8038,6 +8079,14 @@ react-native-reanimated@^2.2.0:
     mockdate "^3.0.2"
     string-hash-64 "^1.0.3"
 
+react-native-snap-carousel@^3.9.1:
+  version "3.9.1"
+  resolved "https://registry.npmjs.org/react-native-snap-carousel/-/react-native-snap-carousel-3.9.1.tgz#6fd9bd8839546c2c6043a41d2035afbc6fe0443e"
+  integrity sha512-xWEGusacIgK1YaDXLi7Gao2+ISLoGPVEBR8fcMf4tOOJQufutlNwkoLu0l6B8Qgsrre0nTxoVZikRgGRDWlLaQ==
+  dependencies:
+    prop-types "^15.6.1"
+    react-addons-shallow-compare "15.6.2"
+
 react-native@0.63.4:
   version "0.63.4"
   resolved "https://registry.nlark.com/react-native/download/react-native-0.63.4.tgz?cache=0&sync_timestamp=1630973823994&other_urls=https%3A%2F%2Fregistry.nlark.com%2Freact-native%2Fdownload%2Freact-native-0.63.4.tgz#2210fdd404c94a5fa6b423c6de86f8e48810ec36"
@@ -9418,6 +9467,11 @@ ua-parser-js@^0.7.18:
   resolved "https://registry.npm.taobao.org/ua-parser-js/download/ua-parser-js-0.7.28.tgz#8ba04e653f35ce210239c64661685bf9121dec31"
   integrity sha1-i6BOZT81ziECOcZGYWhb+RId7DE=
 
+ua-parser-js@^0.7.30:
+  version "0.7.31"
+  resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6"
+  integrity sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==
+
 uglify-es@^3.1.9:
   version "3.3.9"
   resolved "https://registry.npm.taobao.org/uglify-es/download/uglify-es-3.3.9.tgz?cache=0&sync_timestamp=1614860098333&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fuglify-es%2Fdownload%2Fuglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"