- The steps I have used
- `npm install react-native-reanimated-carousel`
- then installed
- `npm install react-native-gesture-handler` and `npx expo install react-native-reanimated`
- then I edited my App.js to add `GestureHandlerRootView`
- ```
- const Stack = createNativeStackNavigator();
- const App = () => {
- return (
- <GestureHandlerRootView style={{ flex: 1 }}>
- <NativeBaseProvider>
- <NavigationContainer>
- ...
- </NavigationContainer>
- </NativeBaseProvider>
- </GestureHandlerRootView>
- );
- };
- export default App;
- ```
- then I edited my babel.config.js
- ```
- module.exports = function (api) {
- api.cache(true);
- return {
- plugins: [
- "nativewind/babel",
- "@babel/plugin-proposal-export-namespace-from",
- ["react-native-reanimated/plugin", {
- "relativeSourceLocation": true,
- }],
- ],
- presets: ["babel-preset-expo"],
- };
- };
- ```
- then I made a carousel component like this
- ```
- const BuyerCarousel = () => {
- const width = Dimensions.get("window").width;
- return (
- <>
- <View style={{ flex: 1 }}>
- <Carousel
- loop
- width={width}
- height={width / 2}
- autoPlay={true}
- data={[...new Array(6).keys()]}
- scrollAnimationDuration={1000}
- onSnapToItem={(index) =>
- console.log("current index:", index)
- }
- renderItem={({ index }) => (
- <View
- style={{
- flex: 1,
- borderWidth: 1,
- justifyContent: "center",
- }}
- >
- <Text style={{ textAlign: "center", fontSize: 30 }}>
- {index}
- </Text>
- </View>
- )}
- />
- </View>
- </>
- );
- };
- export default BuyerCarousel;
- ```
- In my console I got this error when I ran ` npx expo start --dev-client` and then opened it in android device
- ```
- ERROR TypeError: Cannot read property 'createNode' of null, js engine: hermes
- ERROR Invariant Violation: "main" has not been registered. This can happen if:
- * 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.
- * A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes
- ```
[text] steps
Viewer
*** This page was generated with the meta tag "noindex, nofollow". This happened because you selected this option before saving or the system detected it as spam. This means that this page will never get into the search engines and the search bot will not crawl it. There is nothing to worry about, you can still share it with anyone.
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: