React-native-tab-view: Snacks not working and TabView not showing up in my app

[filozofer]

Hey!

The snacks from the README does not work anymore :

• https://snack.expo.io/@satya164/react-native-tab-view-quick-start
• https://snack.expo.io/@satya164/react-native-tab-view-custom-tabbar
• https://snack.expo.io/@satya164/react-native-tab-view-lazy-load

Can someone fix this ?
I'm currently stuck on the quick start of this repo, I don't get any error in my app or any logs but the TabView does not show up on the screen (even if it's present on the Components'tree in my debugger). I just copy past the quick start :/
It's like TabView taking 0 height

    "expo": "^39.0.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "39.0.3",
    "react-native-tab-view": "^2.15.2",
    "react-native-web": "~0.13.7",
    "react-native-gesture-handler": "~1.7.0",
    "react-native-reanimated": "~1.13.0",

Thanx!

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• expo (found: 38.0.0, latest: 39.0.3)
• react-native-gesture-handler (found: 1.6.0, latest: 1.8.0)
• react-native-reanimated (found: 1.9.0, latest: 1.13.1)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[filozofer]

I upgrade to last versions of expo / react-native and still got the same issue. (initial post edited)

[filozofer]

Still searching why I can't use this library.
I figure out than once I try to put the TabView component inside an another "View" component it's stop working (displaying).
From the quick start example, just changing to this create the bug :

  return (
    <View>
        <TabView
          navigationState={{ index, routes }}
          renderScene={renderScene}
          onIndexChange={setIndex}
          initialLayout={initialLayout}
      />
    </View>
  )

[filozofer]

Got it ! The View "container" must have a height defined for the TabView to display correctly :

  return (
    <View style={{ height: '100%' }}>
        <TabView
          navigationState={{ index, routes }}
          renderScene={renderScene}
          onIndexChange={setIndex}
          initialLayout={initialLayout}
      />
    </View>
  ) 

Do you think I must close the issue ? I mix my problem with the snacks not working on README. Let me know !

[ErkanGorgulu]

You might also give flex: 1 for View component. That might help too

[gabormagyar]

Having the same issue, style={{ height: '100%' }} is a valid workaround, flex: 1 however is not. Would like a more appropriate solution to this please.