React Native done button above keyboard

Question

I want to add a "Done" button above the keyboard, that will hide the keyboard when clicked.

Here's an image demonstrating the desired button:

Is there any existing method or library for that? (I already found this library but it doesn't work).

Answer 1

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

Answer 2

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.

Answer 3

I am sharing my style of handling this case :

Code :

import React from 'react'
import { StyleSheet, Platform, View, Text, KeyboardAvoidingView, Keyboard } from 'react-native';
import { TextInput } from 'react-native-gesture-handler';
export default class StripAboveKeyboard extends React.Component {

    constructor(props) {
        super(props)
        this.state = { keyboardHeight: 0 }
    }

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

    keyboardDidShow = (event) => this.setState({ keyboardShow: true, keyboardHeight: event.endCoordinates.height > 100 ? (Platform.OS == 'ios' ? event.endCoordinates.height : 0) : 0 })
    keyboardDidHide = (event) => this.setState({ keyboardShow: false, keyboardHeight: 0 })

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

    render() {

        marginFromBottom = (this.state.keyboardHeight == 0) ? 0 : this.state.keyboardHeight

        return (
            <KeyboardAvoidingView style={{ flex: 1 }}>
                <View style={style.parent}>
                    <View style={style.upper}>
                        <TextInput style={style.textInput}>User Name</TextInput>
                    </View>
                    <View style={{ ...style.bottomParent, marginBottom: marginFromBottom }}>
                        <Text style={style.bottom}>Press me</Text>
                    </View>
                </View>
            </KeyboardAvoidingView>)
    }
}

const style = StyleSheet.create({
    parent: {
        flex: 1,
        padding: 10,
        backgroundColor: 'pink',
    },

    upper: {
        paddingTop: 44,
        backgroundColor: 'green',
        padding: 10,
        flex: 1,
        marginBottom: 10,
    },

    textInput: {
        height: 40, borderColor: 'gray', borderWidth: 1
    },

    bottomParent: {
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: 'red',
        width: '100%',
        height: 40,
    },

    bottom: {
        textAlignVertical: "center", textAlign: "center",
    }
}) 

Screenshots :

ANDROID & IOS