React Native done button above keyboard

react-native

For numeric and number-pad :

and seems that you don't need any library returnKeyType='done' works with "number-pad" and "numeric" on v0.47.1

for normal keyboard you may look at this :

https://github.com/ardaogulcan/react-native-keyboard-accessory

and

https://github.com/douglasjunior/react-native-keyboard-manager

Github thread you need to take a look at :

https://github.com/facebook/react-native/issues/1190

and

https://github.com/facebook/react-native/issues/641

Hope it helps

You can use React-native's KeyboardAvoidingView Component as

<KeyboardAvoidingView keyboardVerticalOffset={50}>
//View you want to be moved up when keyboard shows.
</KeyboardAvoidingView>

keyboardVerticalOffset={50}

is the margin between the keyboard and the view, which will be the height of view or button you want. I hope that helps.

Edit: the best and most customizable way I think to do this, is listening to Keyboard events and changing the absolute position of the component you want above the keyboard, according to it.

import {..,Keyboard} from "react-native";

componentDidMount () {

        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow',(event)=>this.keyboardDidShow(event) );
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide',(event)=>this.keyboardDidHide(event) );
      }

      keyboardDidShow = (event) => {
        //   console.log("keyboard show",event)

            this.setState({keyboardShow:true,keyboardHeight:event.endCoordinates.height}) //<<You got the keyboard height 

      }

      keyboardDidHide = (event) => {
        // console.log("keyboard hide",event)
        this.setState({keyboardShow:false,keyboardHeight:0})
    }

      componentWillUnmount () {
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
      }

now, to show it above the keyboard you can give style to your button component like this

style={{position:"absolute",bottom:this.state.keyboardHeight+20,right:0}}

and if you want to hide it (Done button) just condition the JSX with the keyboardShow state.

React Native done button above keyboard

Related

Recent Posts