[fixed ]Does not render anything in RN 59.5 for both iOS and Android :( about react-native-reanimated-bottom-sheet

[m1kys]

I can repro this issue by @Eyesonly88 comment.

I can fix this by next code:

<React.Fragment> <View style={{flex: 1}}> ...screen content here </View> <BottomSheet ...content for BottomSheet /> </React.Fragment>

It's seem that BottomSheet do not support View wrap (@satya164).

[Eyesonly88]

Update: managed to get it to render in RN 59.

The issue was I had a <View> wrapping the <BottomSheet>. This used to work in previous versions but now does not work.

So the workaround:
The <BottomSheet> should not be wrapped and don't set 'position: absolute' on its container.

Conclusion:

Not sure if having a wrapper is supported.
IMO it should work like before. So potentially this is a regression (bug).

But yeah up to you @osdnk 👍

[nosalvage]

i have the same bug, wrapped only in main screen view (flex 1). iOS works fine. Android doesn't render anything. No position absolute used. Please help!

react: ^16.6.3 => 16.8.4
react-native: ^0.58.6 => 0.58.6

[satya164]

Does anyone have a repro somewhere I can check?

[Eyesonly88]

@satya164 if expo supported 59.5 I would have given a repro link ;)

Make a new repo and do:

<View style={{flex: 1}}>
<BottomSheet
          snapPoints={[
            100,
            200,
          ]}
          initialSnap={1}
          renderContent={() =>
            <View><Text>Hello Header!</Text></View>
          }
          renderHeader={() => <View><Text>Hello Content!</Text></View>}
        />
</View>

This would break and if you add position: absolute it will break both iOS & Android.

[satya164]

I inited a new project with react-native init and tried the code you provided. Seems to be working fine.

[brian-ws]

Why don't we post this solution to the README file? It could save many hours for others. Especially the example in README has inside

[dac09]

Hi, just wanted to drop a line here for anyone experiencing invisible elements when using DraggableFlatlist inside the bottom sheet. The solution is simple (after a while of trying!) - to wrap the DraggableFlatlist with a view, and give it 100% height.

// Component part of renderContent for bottom sheet
    <View style={{height: '100%'}}>
      <DraggableFlatList
        keyExtractor={item => `${item.id}-draggable`}
        data={places}
        renderItem={({ item, drag }) => (
          <MyCustomComponent
            key={item.id}
            drag={drag}
            place={item}
          />
        )}
      />
    </View>