Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
hartytech opened this issue May 21, 2021 · 2 comments

Comments

@hartytech
Copy link

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
Copy link
Owner

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

@hartytech
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants