[text] steps

Viewer

  1. The steps I have used
  2. `npm install react-native-reanimated-carousel`
  3. then installed
  4. `npm install react-native-gesture-handler` and `npx expo install react-native-reanimated`
  5. then I edited my App.js to add `GestureHandlerRootView`
  6. ```
  7. const Stack = createNativeStackNavigator();
  8. const App = () => {
  9.     return (
  10.         <GestureHandlerRootView style={{ flex: 1 }}>
  11.             <NativeBaseProvider>
  12.                 <NavigationContainer>
  13.                 ...
  14.                 </NavigationContainer>
  15.             </NativeBaseProvider>
  16.         </GestureHandlerRootView>
  17.     );
  18. };
  19.  
  20. export default App;
  21. ```
  22. then I edited my babel.config.js
  23. ```
  24. module.exports = function (api) {
  25.     api.cache(true);
  26.     return {
  27.         plugins: [
  28.             "nativewind/babel",
  29.             "@babel/plugin-proposal-export-namespace-from",
  30.             ["react-native-reanimated/plugin", {
  31.                 "relativeSourceLocation": true,
  32.             }],
  33.         ],
  34.         presets: ["babel-preset-expo"],
  35.     };
  36. };
  37. ```
  38. then I made a carousel component like this
  39. ```
  40. const BuyerCarousel = () => {
  41.     const width = Dimensions.get("window").width;
  42.     return (
  43.         <>
  44.             <View style={{ flex: 1 }}>
  45.                 <Carousel
  46.                     loop
  47.                     width={width}
  48.                     height={width / 2}
  49.                     autoPlay={true}
  50.                     data={[...new Array(6).keys()]}
  51.                     scrollAnimationDuration={1000}
  52.                     onSnapToItem={(index) =>
  53.                         console.log("current index:", index)
  54.                     }
  55.                     renderItem={({ index }) => (
  56.                         <View
  57.                             style={{
  58.                                 flex: 1,
  59.                                 borderWidth: 1,
  60.                                 justifyContent: "center",
  61.                             }}
  62.                         >
  63.                             <Text style={{ textAlign: "center", fontSize: 30 }}>
  64.                                 {index}
  65.                             </Text>
  66.                         </View>
  67.                     )}
  68.                 />
  69.             </View>
  70.         </>
  71.     );
  72. };
  73.  
  74. export default BuyerCarousel;
  75. ```
  76. In my console I got this error when I ran ` npx expo start --dev-client` and then opened it in android device
  77. ```
  78.  ERROR  TypeError: Cannot read property 'createNode' of null, js engine: hermes
  79.  ERROR  Invariant Violation: "main" has not been registered. This can happen if:
  80. * Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
  81. * A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes
  82. ```

Editor

You can edit this paste and save as new:


File Description
  • steps
  • Paste Code
  • 09 Jun-2023
  • 2.74 Kb
You can Share it: