React Native Tab View : displaying empty screen when Tabview element is wrapped / nested within View

Question

I am using 'react-native-tab-view' library in my code. Link here: npm / github.

Here is a basic example code in snack- that can run on Web.

Now the issue is- if I want to display a Header text above <Tabview/> tag, it shows nothing. Even if I just wrap the <Tabview/> within a <View></View> like this below snippet, it shows an empty screen, even without any error.

<View>
  <TabView .... />   /*Shows empty screen*/
</View>

Here is an example code screenshot with output, from snack with nested <Tabview/>, running in Android device:

Kindly suggest how to achieve that. Not sure what am I missing?

Answer 1

I think you should have to use <View style={{flex:1}}> Tab code </View>

Answer 2

In my case, the TabView was rendered inside a parent ScrollView ... removing the parent scroller resolved the issue.

Answer 3

I have tried many solutions and i had the same issue, in my case i had to downgrade the react-native-tab-view to 3.1.1 and the react-native-pager-view to 6.0.1 it was ^6.2.3 my react-native version is 0.72.4

just update those two in your package.json, npm install and cd ios && pod install, it worked like a charm

"react-native-pager-view": "6.0.1",

"react-native-tab-view": "^3.1.1",

hope it helps someone cause i did so much digging and nothing worked for me besides this solution