Sheet defaults to open when TabNavigation comes into view

[mikeymop]

I have the action sheet located on one tab of a tab navigation.

The initial snap point is set to 0. When I bring this page into view, the Bottomsheet appears as the page slides into view, then once the animation has finished it disappears. This makes the page flip animation jerky. However, once the page flip animation is finished the BottomSheet behaves as expected, opening and closing on a button press.

export class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.route = props.route;
    this.navigation = props.navigation;
    this.ActionSheet = React.createRef()

    this.showDialog = () => this.setState({openSheet: true});
    this.hideDialog = () => this.setState({openSheet: false});

    this.state = {
      data: this.route.params,
      dialog: "",
      openSheet: false
    };
  }

  render() {
    const navigation = this.navigation;
    const data = this.state.data;

    return (
      <Tabs.Navigator
        <Tabs.Screen name="Details">
          {props => this.DetailTab({navigation, data, props})}
        </Tabs.Screen>
        <Tabs.Screen name="Photos">
          {props => this.PhotosTab({data, props})}
        </Tabs.Screen>
      </Tabs.Navigator>
    )
  }

DetailTab = ({navigation, ...props}) => {
    return (
      <View>
        <Surface>
          <SectionList
            sections={listdata}
            renderItem={({ item }) => this.DetailItem({item})}
            renderSectionHeader={({ section: { title } }) => (this.HeaderItem({title}))}
            keyExtractor={(item, index) => index.toString()}
            ItemSeparatorComponent={Divider}
          />
        </Surface>
        <BottomSheet
          ref={ref => this.ActionSheet = ref}
          initialSnap={1}
          snapPoints={[450, 0]}
          borderRadius={10}
          renderContent={this.ActionSheetItem}
        />
      </View>
    );
  }

[MaximoSucari]

did you resolve it?

[mikeymop]

Hello,

Yes I have, believe the behavior is a product of how the bottom sheet is rendered. I apologize for forgetting to update the issue. Because I was rendering it to pop over a SectionList, if the SectionList had a length of 0 (or a length that is small enough to fit inside the screens bounds) it would have no height and the BottomSheet would show on screen.

By nesting the SectionList inside a <View> or <Surface> with a style={{height: "100%"}} I was able to resolve this.

eg:

<View>
  <Surface style={{height: "100%"}} >
    <SectionList
      ...
    />
  </Surface>
  <BottomSheet
    ...
  />
</View>

I don't know if this is intended behavior for the BottomSheet but it has been working consistently if I am careful with my css.

[MaximoSucari]

thanks for the answer! That was not the solution but i solved it by replacing snapTo("80%") to snapTo(1). "1" is the index of the snapPoints list which i declared as const snapPoints = ['70%', '80%', 0]