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

[hartytech]

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.