Blank screen when using react-native-tab-view

[shop-fluencer]

If I use react-native-tab-view inside modalize then I dont see my sceneMap data. It shows only blank screen except the header.

Code:

const FirstRoute = () => (
  <View style={{ flex: 1, backgroundColor: '#ff4081' }} >
    <Text>Hello</Text>
    <Text>Hello</Text>
    <Text>Hello</Text>
    <Text>Hello</Text>
    <Text>Hello</Text>
    <Text>Hello</Text>
        <Text>Hello</Text>
        <Text>Hello</Text>
  </View>
);

const SecondRoute = () => (
  <View style={{ flex: 1, backgroundColor: '#673ab7' }} />
);

const ModalReviews = forwardRef<Modalize, IModal
![WhatsApp Image 2022-06-07 at 16 50 38](https://user-images.githubusercontent.com/101994056/172412739-e3911a36-82d9-4205-995c-e27c47c928ac.jpeg)
Props>(({}, ref) => { 
  const layout = useWindowDimensions();
  const [index, setIndex] = useState(0);
  const renderScene = SceneMap({
    first: FirstRoute,
    second: SecondRoute,
  });
  const [routes] = useState([
    {
      key: 'first', title: 'HI'
    },
    {
      key: 'second', title: 'NEW'
    }
  ])
  return (
    <Modalize
      ref={ref}
      handleStyle={{ width: 35, backgroundColor: '#75777a' }}
      childrenStyle={{ borderTopLeftRadius: 12, borderTopRightRadius: 12, overflow: 'hidden' }}
    >
      <TabView
        navigationState={{ index, routes }}
        renderScene={renderScene}
        onIndexChange={setIndex}
        initialLayout={{ width: layout.width }}
      />
 
    </Modalize>
  )
});

Dependencies:

• react-native-modalize [2.0.13]
• react-native-gesture-handler [2.2.1]
• expo/react-navigation/react-native-navigation: [45.0.0]

[obiwankenoobi]

any update on that?

[gmartpad]

Having the same problem here

[shahedzaman-web]

I'm also having the same issue.

[bonnmh]

It's still unresolved

[anniewey]

For workaround, wrap the component with <View> with a fixed height:

<Modalize>
   <View style={{ height: deviceHeight}}>
      <TabView
        navigationState={{ index, routes }}
        renderScene={renderScene}
        onIndexChange={setIndex}
        initialLayout={{ width: layout.width }}
      />
  </View>
</Modalize>

[kaan3392]

@anniewey thank u so much!