Scenes are not visible when TabView is inside of react-native-modalize

[holyris]

Current behavior

When TabView is inside of a modal (react-native-modalize), the scenes are not visible.
It's working properly on web, but not on Android

Expected behavior

Scenes should be visible

Reproduction

https://snack.expo.dev/@holyris/tabview-in-modalize

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Environment

package	version
react-native-tab-view	3.1.1
react-native-pager-view	5.0.12
react-native
expo	42.0.0
node
npm or yarn

[github-actions]

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

• react-native
• expo

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:

• react-native-pager-view (found: 5.0.12, latest: 5.4.4)

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

[github-actions]

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:

• react-native-pager-view (found: 5.0.12, latest: 5.4.4)
• expo (found: 42.0.0, latest: 42.0.3)

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

[pierroo]

Hi @holyris ; I am facing the same issue, did you manage to find a solution since? :)

[github-actions]

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:

• react-native-pager-view (found: 5.0.12, latest: 5.4.9)
• expo (found: 42.0.0, latest: 44.0.0)

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

[holyris]

@pierroo It seems that I mistakenly made a working reproduction.
Maybe you're using Modalize in a different way ? Could you share a reproduction link of your issue ?

[pierroo]

@holyris I have the most basic use of modalize, which works perfectly anywhere else in the app except when I'm using tab view:

 <Portal>
        <Modalize
          ref={customizeModalRef}
          modalHeight={modalHeight}
        >
          <CustomizationModal 
            modalHeight={modalHeight}
          />
        </Modalize>
      </Portal>

Then the component inside the Modalize is literally the tabview from the documentation:

<TabView
             navigationState={{ index, routes }}
             renderScene={renderScene}
             renderTabBar={renderTabBar}
             onIndexChange={setIndex}
             initialLayout={initialLayout}
           />

with renderScene using simple components as well.
I managed to "hack through a solution", by setting a defined height to the modalize, AND to a parent component wrapping the tabbview. (Using screen height minus xx pixels for example)

But I so wish I could let the content adjust dynamically as expected like every other components except the tabview...

[holyris]

@pierroo I didn't find a solution to get the modal to adjust his height with the TabView. But tbh it seems a weird behaviour to me. What happens if you have tabview's scenes with different height ?

On my project I found a solution to display the tabview aside other components, inside a modal, which is full height.
First I used a customRenderer to remove the ScrollView from the default Modalize renderer

// AppModal

      <Modalize
        adjustToContentHeight
        customRenderer={() => <View style={{display: flex, flexShrink: 1}}>{children}</View>}
      ></Modalize>

And this is my modal content :

<>
      <View style={{flexShrink: 1}}>
        <View style={{height: "100%"}}>
          <TabView....></TabView>
        </View>
      </View>

// Here you can place other components, the TabView will fill the remaining space
</>

It's not perfect because the modal will be full height, but for me it's ok. Maybe you can have satisfying result by setting the height percentage

[pierroo]

Thank you for this additional input.
You are right, having different scene height inside the tabview would be weird.

However, I would have wanted for the whole tabview (and scenes) to adjust to their PARENT element (the modalize), then indeed a scroll inside if ever it goes beyond the height.

In your case, it works because you made it full height. Just like on my end I set a precise height as well.
It's not ideal, but at least it works for now.

Thank you for your help! :)

[paulsjohnson91]

Hey, late to the party but I've opened another issue which I think is causing the same issue you're having here

running your expo example with an edited SceneView as seen in my fork I can get the modal scenes to render, not sure if this helps you and as mentioned in my own bug report, this change prevents tab views outside of modals or scrollviews to not render without a specified height so if you need to do both you would have to include both the official 3.1.1 react-native-tab-view and also a modified version

[hirvesh]

Can confirm this is currently the case.