CODEWITHSUNDEEP
reactjsreact-nativetabsposition
Vagtse
Vagtse

Reputation: 121

How can i display react-native's tabbar at the top of the screen

TabBarposition='top' makes application collapse due to react-native-router-flux ( or navigation ) update. It used to work , but now i get this error:enter image description here

My code :enter image description here

Upvotes: 2

Views: 698

Answers (3)

Elham Nikbakht
Elham Nikbakht

Reputation: 101

When you run npm install this happen. if you use tab in your screen do this steps:

1: delete node modules
2: comment your tab code
3: yarn add ...(every package in your package.json)

Upvotes: 0

Akila Devinda
Akila Devinda

Reputation: 5482

You are using older method of ViewPagerAndroid. Old one is deprecated with new one with react-native-community. You can see the channel log here.
That means if you are using ViewPagerAndroid now you can use new one instead of old one.

You can view the new ViewPager repo here

Install the new library first 

yarn add @react-native-community/viewpager

or

npm install @react-native-community/viewpager --save

If you are using RN >= 0.60 then no need to link, autolink will do that
If you are using RN < 0.60 run react-native link @react-native-community/viewpager

Or manual linking read the documentation

Then remove old ViewPagerAndroid imports

import { ViewPagerAndroid } from 'react-native'; //Remove this import

Import ViewPager separate like this

import ViewPager from '@react-native-community/viewpager'; //New way of importing

If you still getting the error please try to remove the app and re-install it.

Upvotes: 0

Lenoarod
Lenoarod

Reputation: 3610

since react-native 0.61.2 the Viewpagerandroid has removed form react-native, but the tab library you use it has not update to adapt it. Firstly, you find the library file which used Viewpagerandroid, then import it from react-native-viewpager.

For example, I use react-native-scrollable-view, the ScrollableTabView use it. I delete the import in the react-native, and import it from @react-native-community/viewpager

const {
     Dimensions,
     View,
     Animated,
     ScrollView,
     Platform,
     StyleSheet,
     //ViewPagerAndroid //**delete it**
     InteractionManager,
   } = ReactNative;
   const ViewPagerAndroid = require("@react-native-community/viewpager")

the other way is to check whether the library's new version adapts it.

Upvotes: 1

Related Questions