React Native done button above keyboard - react-native

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

Answer 4

That is not a library or anything special. That is just a view that moves up with the keyboard.
Read this article - https://medium.freecodecamp.org/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580#.gd37tn1wx
It shows you different ways to make elements respect the keyboard.

Answer 5

Done button will not work for multiples line TextInput. To close keyboard you have to use
KeyboardAvoidingView
that will helpful to close it by touching outside of softkeyboard