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

Is there a way to hide the button row behind the keyboard? Or in the end of the scroll. #77

Open
guilhermemoretto12 opened this issue Jan 19, 2021 · 2 comments

Comments

@guilhermemoretto12
Copy link

I would like that the previous and next buttons to stay behind the keyboard, instead of above it. Thats because the next button can confuse the user while he's filling a form whit many TextFields, and it also takes some space.

Is there a way to make the button row to behave like content of the steps, only showing in the end of the scroll?

@neilbateman
Copy link

neilbateman commented May 28, 2021

I was able to accomplish this behavior by adding an event listener to the core Keyboard component to toggle the ProgressStep prop removeBtnRow. https://github.com/colbymillerdev/react-native-progress-steps#progress-step-component

Something like:

       function SomeComponent() {
          const [buttonsVisible, setButtonsVisible] = useState(false)
          useEffect(() => {
              const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
                setButtonsVisible(true);
              })
              const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
                setButtonsVisible(false)
              })
          
              return () => {
                showSubscription.remove();
                hideSubscription.remove();
              }
      }, [])
            
              return (
                    <ProgressStep removeBtnRow={buttonsVisible}></ProgressStep>
              )
      } 

Hope this helps!

@Ketan2010
Copy link

Thanks @neilbateman, This worked for me

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

3 participants