Mobile: Fixes #159: Make sure text fields aren't hidden by keyboard on iOS

ReactNativeClient/lib/components/app-nav.js

@@ -2,7 +2,7 @@ const React = require('react'); const Component = React.Component;
 const { connect } = require('react-redux');
 const { NotesScreen } = require('lib/components/screens/notes.js');
 const { SearchScreen } = require('lib/components/screens/search.js');
-const { View } = require('react-native');
+const { KeyboardAvoidingView, Keyboard, Platform, View } = require('react-native');
 const { _ } = require('lib/locale.js');
 const { themeStyle } = require('lib/components/global-style.js');
 
@@ -11,6 +11,31 @@ class AppNavComponent extends Component {
 	constructor() {
 		super();
 		this.previousRouteName_ = null;
+		this.state = {
+			autoCompletionBarExtraHeight: 0, // Extra padding for the auto completion bar at the top of the keyboard
+		}
+	}
+
+	componentWillMount() {
+		if (Platform.OS === 'ios') {
+			this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow.bind(this));
+			this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide.bind(this));
+		}
+	}
+
+	componentWillUnmount() {
+		if (this.keyboardDidShowListener) this.keyboardDidShowListener.remove();
+		if (this.keyboardDidHideListener) this.keyboardDidHideListener.remove();
+		this.keyboardDidShowListener = null;
+		this.keyboardDidHideListener = null;
+	}
+
+	keyboardDidShow () {
+		this.setState({ autoCompletionBarExtraHeight: 30 })
+	}
+
+	keyboardDidHide () {
+		this.setState({ autoCompletionBarExtraHeight:0  })
 	}
 
 	render() {
@@ -44,11 +69,12 @@ class AppNavComponent extends Component {
 		const style = { flex: 1, backgroundColor: theme.backgroundColor }
 
 		return (
-			<View style={style}>
+			<KeyboardAvoidingView behavior={ Platform.OS === 'ios' ? "padding" : null } style={style}>
 				<NotesScreen visible={notesScreenVisible} navigation={{ state: route }} />
 				{ searchScreenLoaded && <SearchScreen visible={searchScreenVisible} navigation={{ state: route }} /> }
 				{ (!notesScreenVisible && !searchScreenVisible) && <Screen navigation={{ state: route }} /> }
-			</View>
+				<View style={{ height: this.state.autoCompletionBarExtraHeight }} />
+			</KeyboardAvoidingView>
 		);
 	}
 

ReactNativeClient/lib/components/screens/config.js

@@ -1,5 +1,5 @@
 const React = require('react'); const Component = React.Component;
-const { TouchableOpacity, Linking, View, Switch, Slider, StyleSheet, Text, Button, ScrollView, TextInput } = require('react-native');
+const { Platform, TouchableOpacity, Linking, View, Switch, Slider, StyleSheet, Text, Button, ScrollView, TextInput } = require('react-native');
 const { connect } = require('react-redux');
 const { ScreenHeader } = require('lib/components/screen-header.js');
 const { _, setLocale } = require('lib/locale.js');
@@ -72,6 +72,11 @@ class ConfigScreenComponent extends BaseScreenComponent {
 			},
 		}
 
+		if (Platform.OS === 'ios') {
+			styles.settingControl.borderBottomWidth = 1;
+			styles.settingControl.borderBottomColor = theme.dividerColor;
+		}
+
 		styles.switchSettingText = Object.assign({}, styles.settingText);
 		styles.switchSettingText.width = '80%';
 
@@ -106,8 +111,6 @@ class ConfigScreenComponent extends BaseScreenComponent {
 				settings: settings,
 				settingsChanged: true,
 			});
-
-			console.info(settings['sync.5.path']);
 		}
 
 		const md = Setting.settingMetadata(key);
@@ -163,7 +166,7 @@ class ConfigScreenComponent extends BaseScreenComponent {
 			return (
 				<View key={key} style={this.styles().settingContainer}>
 					<Text key="label" style={this.styles().settingText}>{md.label()}</Text>
-					<TextInput key="control" style={this.styles().settingControl} value={value} onChangeText={(value) => updateSettingValue(key, value)} secureTextEntry={!!md.secure} />
+					<TextInput autoCapitalize="none" key="control" style={this.styles().settingControl} value={value} onChangeText={(value) => updateSettingValue(key, value)} secureTextEntry={!!md.secure} />
 				</View>
 			);
 		} else {

ReactNativeClient/lib/components/screens/note.js

@@ -1,5 +1,5 @@
 const React = require('react'); const Component = React.Component;
-const { Platform, Keyboard, BackHandler, View, Button, TextInput, WebView, Text, StyleSheet, Linking, Image, KeyboardAvoidingView } = require('react-native');
+const { Platform, Keyboard, BackHandler, View, Button, TextInput, WebView, Text, StyleSheet, Linking, Image } = require('react-native');
 const { connect } = require('react-redux');
 const { uuid } = require('lib/uuid.js');
 const { Log } = require('lib/log.js');
@@ -149,12 +149,6 @@ class NoteScreenComponent extends BaseScreenComponent {
 		await shared.initState(this);
 
 		this.refreshNoteMetadata();
-
-		if (Platform.OS === 'ios') {
-			this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
-			this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
-		}
-
 	}
 
 	refreshNoteMetadata(force = null) {
@@ -163,19 +157,6 @@ class NoteScreenComponent extends BaseScreenComponent {
 
 	componentWillUnmount() {
 		BackButtonService.removeHandler(this.backHandler);
-
-		if (Platform.OS === 'ios'){
-			this.keyboardDidShowListener.remove();
-			this.keyboardDidHideListener.remove();
-		}
-	}
-
-	_keyboardDidShow () {
-		this.setState({ heightBumpView:30 })
-	}
-
-	_keyboardDidHide () {
-		this.setState({ heightBumpView:0 })
 	}
 
 	title_changeText(text) {
@@ -542,7 +523,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 		);
 
 		return (
-			<KeyboardAvoidingView  behavior= {(Platform.OS === 'ios')? "padding" : null} style={this.rootStyle(this.props.theme).root}>
+			<View style={this.rootStyle(this.props.theme).root}>
 				<ScreenHeader
 					folderPickerOptions={{
 						enabled: true,
@@ -578,8 +559,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 				/>
 
 				<DialogBox ref={dialogbox => { this.dialogbox = dialogbox }}/>
-				<View style={{ height: this.state.heightBumpView }} />
+			</View>
-			</KeyboardAvoidingView>
 		);
 	}