Referencing the SnapTo function of the App Class BottomSheet within another component.

[nicksheaharty]

I have gotten stuck on particular implementation of this system due to my inability to call the snap function attached to the "this" in the App Class from another component titled "Devices"

[numandev1]

@hartytech I did not get you. can you provide reproducible code + elaborate more on your problem?

[nicksheaharty]

Sure. I have my BottomSheet component placed within my main App.js file as should below:

<BottomSheet
          keyboardAware={false}
          bottomSheerColor="#FFFFFF"
          ref="BottomSheet"
          initialPosition={0} //200, 300
          snapPoints={['0%','40%']}
          isBackDrop={true}
          isBackDropDismissByPress={true}
          isRoundBorderWithTipHeader={true}
          // backDropColor="red"
          // isModal
          tipHeaderRadius={20}
          // headerStyle={{backgroundColor:"red"}}
          // bodyStyle={{backgroundColor:"red",flex:1}}
          header={
            <View>
              <Text >Header</Text>
            </View>
          }
          body={
            <View>
              <Text >Body</Text>
            </View>
          }
/>

With the function to change where it snaps provided above within App.js:

onOpenBottomSheetHandler = (index) => {
    this.refs.BottomSheet.snapTo(index);
  };

This function works fine when called within App.js, but the issue lies when I attempt to change the snap of the BottomSheet in the App.js file from an outside component. This component is in the form of a Tab (using React Navigation) that is referenced within App.js. The BottomSheet is placed in the App.js file so that it draws over the tab navigation bar and the problem I am facing is changing the position of the App.js BottomSheet through the pressing of a button in a separate component.