The app I’m building, Constellational, lets you post your notes online — and a key element is a full screen, distraction-free zone for you to type your notes. This is the code we’re interested in:
render() {
return (
<view style="{styles.page}" onlayout="{(ev)"> {
// 80 is for the navbar on top
var fullHeight = ev.nativeEvent.layout.height — 80;
this.setState({height: fullHeight, fullHeight: fullHeight});
}}>
<navbar leftbutton="{this.cancelButton}" rightbutton="{this.postButton}/"><scrollview keyboarddismissmode="interactive"><textinput multiline="{true}" onchangetext="{(text)"> {
this.state.post.data = text;
}}
defaultValue={this.state.post.data}
autoFocus={true}
style={[styles.input, {height:this.state.height}]}
/>
</textinput></scrollview></navbar></view>
);
}}
There are two things that are interesting here, that you can use the onLayout property of a React Native View to set the height of the TextInput (we want it to occupy all the visible space whether the keyboard is up or dismissed).
The other interesting thing is being able to dismiss the keyboard when scrolling through a longer post that you’re writing. The way that seems to work best (for now) is to wrap the TextInput in a ScrollView, which lets you dismiss the keyboard if you hold the top of it and drag down.
It would really be great if multiline TextInputs had an onScroll property (or even better, a dismissKeyboardOnScroll property). But for now I will probably just add a bar on the top of the keyboard to let you know that you can drag it down.