10

I am unable to resolve this, and gone through the below document https://www.npmjs.com/package/react-native-tab-view

enter image description here

Also I did not come across any document regarding this issue. I have used the same sample code mentioned in the above link.

import * as React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
 
const FirstRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);
 
const SecondRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);
 
const initialLayout = { width: Dimensions.get('window').width };
 
export default function TabViewExample() {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'first', title: 'First' },
    { key: 'second', title: 'Second' },
  ]);
 
  const renderScene = SceneMap({
    first: FirstRoute,
    second: SecondRoute,
  });
 
  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
    />
  );
}
 
const styles = StyleSheet.create({
  scene: {
    flex: 1,
  },
});

How do I resolve this?

npm version is 6.14.4
React-native version is 0.62.2
react-native-tab-view: "^2.15.0"
react-native-gesture-handler: "^1.6.1"
react-native-reanimated: "^1.10.1"
@react-native-community/masked-view: "^0.1.10"
Prajna
  • 578
  • 4
  • 8
  • 23

5 Answers5

2

Upgrade the react-native-gesture-handler to 1.7.0

Prajna
  • 578
  • 4
  • 8
  • 23
2

run npm i react-native-gesture-handler@1.7.0. Clear cache and build again.

Linking is not required from version 0.59 as it auto links the dependencies.

Jopsy
  • 145
  • 1
  • 8
1

I encountered this error while working with @react-navigation/drawer and this worked for me.

  1. npm i react-native-reanimated
  2. Add plugins: ['react-native-reanimated/plugin'], below presets in '<your_app_root_folder>/babel.config.js'.
  3. Add import 'react-native-gesture-handler'; to the top of '<your_app_root_folder>/App.js'.
  4. Reset the cache using npx react-native start --reset-cache.
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 06 '22 at 11:34
1

In case this helps anyone out there working with Expo (Expo 46, react-native-reanimated 2.9.1): I had the same error on a development build after installing react-native-reanimated and couldn't figure out why, even though I did the steps shown:

  1. expo install react-native-reanimated
  2. Added plugins: ['react-native-reanimated/plugin'] to my babel.config.js
  3. expo start --dev-client --clear

What ended up working for me was uninstalling my app and creating a new build with the new package.json and babel.config.js. To be fair, it might have worked by just reinstalling the original build, but I'm not trying to go back to having this error...

Joey Bats
  • 33
  • 6
0

Use react-native link react-native-reanimated And then following this link https://github.com/software-mansion/react-native-reanimated/blob/master/Example/android/app/src/main/java/com/swmansion/reanimated/example/MainApplication.java

NBDKhoa
  • 131
  • 3
  • 12