CODEWITHSUNDEEP
react-native
JMaylin
JMaylin

Reputation: 1396

How to create a floating button in react-native?

I would like to create a button that floats above the keyboard, kind of like the next button in the Airbnb app (see screenshot below).

I almost found a solution using https://github.com/ardaogulcan/react-native-keyboard-accessory, but there is an invisible wrapper that cannot be clicked through, which is a big issue.

Isn't there an easy way to achieve it?

enter image description here

Upvotes: 1

Views: 2013

Answers (1)

VocoJax
VocoJax

Reputation: 1549

<TouchableOpacity
  style={{ 
    position: 'absolute',
    bottom: 0
  }}
>
  <Text>Yo Press Me!</Text>
</TouchableOpacity>

Let me know if that works for you!

You may also want to add in "react-native-keyboard-aware-scroll-view" (package from npm) or "KeyboardAvoidingView" (from "react-native") depending on what works best for you.

Upvotes: 1

Related Questions