Using KeyboardAvoidingView I have a basic example where I would like the keyboard to push the inputs upwards so it is not overlapping on Android. The inputs do not move when the keyboard is in focus. Any ideas?
The inputs stay in a fixed position, do I need to place everything in a scroll view?
UPDATE: I use nested navigators, could a style on a parent component prevent this working?
<KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
<TextInput placeholder="input1" />
<TextInput placeholder="input2" />
<TextInput placeholder="input3" />
<TextInput placeholder="input4" />
<TextInput placeholder="input5" />
<TextInput placeholder="input6" />
<TextInput placeholder="input7" />
<TextInput placeholder="input8" />
<TextInput placeholder="input9" />
<TextInput placeholder="input10" />
<TextInput placeholder="input11" />
<TextInput placeholder="input12" />
</KeyboardAvoidingView>
try to change the behavior to height for android as described on keyboardavoidingview
import { KeyboardAvoidingView, Platform } from 'react-native';
<KeyboardAvoidingView behavior={Platform.OS == "ios" ? "padding" : "height"}
style={{ flex: 1 }} >
Related
This <ScrollView> with ` solution hides the keyboard well if you drag down, but your text hides under the cursor:
<KeyboardAvoidingView
enabled
behavior='height'
style={{ flex: 1, flexDirection: 'column' }}
>
<ScrollView
style={{ flex: 1 }}
keyboardShouldPersistTaps='always'
keyboardDismissMode={
Platform.OS === 'ios' ? 'interactive' : 'on-drag'
}
contentContainerStyle={{ flexGrow: 1 }}
>
<Input
multiline
scrollEnabled={false}
/>
</ScrollView>
</KeyboardAvoidingView>
This <View> approach with <Input scrollEnabled={true}> works well with the input not getting covered, but dismissing the keyboard requires tapping outside of the input.
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : null}
style={{ flex: 1 }}
>
<View style={{ flex: 1 }}>
<Input
multiline
scrollEnabled={true}
/>
</View>
</KeyboardAvoidingView>
I've also tried KeyboardAwareScrollView but it's very glitchy - it moves the text input very awkwardly and is delayed.
Is there anyone who's been able to make a multiline text input that:
Hides on drag
Is easily editable/scrollable
?
A perfectly working example of this is the iOS Notes app.
I want to make a search bar in react-native like that :
If I click on icon, I focus on textInput, but if I click on other part of screen, unfocus the textInput.
The focus part is working with the ref, but I don't know if it's possible to unfocus the textinput when I click in other part of the screen.
<TextInput
multiline={false}
onChangeText={(text) => onChangeText(text)}
placeholder="search"
style={styles.textInput}
value={value}
ref={research}
></TextInput>
<TouchableOpacity onPress={()=>research.current.focus()}>
<Ionicons name="md-search" size={24} ></Ionicons>
</TouchableOpacity>
You could just dismiss the keyboard
import {Keyboard} from 'react-native'
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={{flex: 1}}>
[your code in here]
</View>
</TouchableWithoutFeedback>
I'm using native base in screen, and I'm trying to add but it is not working properly as keyboard still hides the text inputs
render() {
return (
<Container>
<Header style={styles.header}>
<Left style={styles.left}>
<TouchableOpacity
style={styles.backArrow}
onPress={() => this.props.navigation.navigate("Welcome")}
>
<FontAwesome
name={I18nManager.isRTL ? "angle-right" : "angle-left"}
size={30}
color="#6f6f6f"
/>
</TouchableOpacity>
</Left>
<Body style={styles.body} />
<Right style={styles.right} />
</Header>
<View style={styles.signuplogosec}>
<Image source={Logo} style={styles.signuplogostyle} />
</View>
<KeyboardAvoidingView behavior="padding" enabled>
<Form style={styles.form}>
<Item rounded style={styles.inputStyle}>
<Input
//placeholderTextColor="#ffffff"
textAlign={I18nManager.isRTL ? "right" : "left"}
placeholder="First Name"
onChangeText={(first_name) => { this.setState({ first_name }) }}
style={styles.inputmain}
/>
</Item>
<Item rounded style={[styles.inputStyle,, { marginTop: 10 }]}>
<Input
//placeholderTextColor="#ffffff"
textAlign={I18nManager.isRTL ? "right" : "left"}
placeholder="Last Name"
style={styles.inputmain}
onChangeText={(last_name) => { this.setState({ last_name }) }}
/>
</Item>
<Item rounded style={[styles.inputStyle,, { marginTop: 10 }]}>
<Input
//placeholderTextColor="#ffffff"
textAlign={I18nManager.isRTL ? "right" : "left"}
placeholder="Email"
style={styles.inputmain}
autoCapitalize='none'
onChangeText={(email) => { this.setState({ email }) }}
/>
</Item>
<Item rounded style={[styles.inputStyle, { marginTop: 10 }]}>
<Input
//placeholderTextColor="#ffffff"
placeholder="Password"
secureTextEntry={true}
textAlign={I18nManager.isRTL ? "right" : "left"}
style={styles.inputmain}
onChangeText={(password) => { this.setState({ password }) }}
/>
</Item>
<Item rounded style={[styles.inputStyle, { marginTop: 10 }]}>
<Input
//placeholderTextColor="#ffffff"
placeholder="Confirm Password"
secureTextEntry={true}
textAlign={I18nManager.isRTL ? "right" : "left"}
style={styles.inputmain}
onChangeText={(confirm_password) => { this.setState({ confirm_password }) }}
/>
</Item>
<TouchableOpacity
info
style={styles.signInbtn}
onPress={this.signIn}
>
<Text autoCapitalize="words" style={styles.buttongetstarted}>
Sign Up
</Text>
</TouchableOpacity>
</Form>
</KeyboardAvoidingView>
<View style={styles.signupbottomView}>
<TouchableOpacity
style={styles.fbButton}
onPress={() => alert("Facebook button Clicked")}
>
<View iconRight style={styles.fbview}>
<Ionicons name="logo-linkedin" size={30} color="white" />
<Text autoCapitalize="words" style={styles.fbButtonText}>
Sign Up with LinkedIn
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
style={styles.signupbottomText}
onPress={()=>{this.props.navigation.navigate('SignIn')}}>
<Text style={styles.bottomText01}>
Do you have an account?{" "}
<Text style={styles.bottomText02}>Sign In</Text>
</Text>
</TouchableOpacity>
</View>
</Container>
);
}
}
export default SignUpScreen;
I have tried to add different views inside form tag but it is still not working, I have tried to create different form tags but failed.
My requirement is simple I want to use the KeyboardAvoidingView inside Native base components, I'm wrong some where but I don't know where
Just import KeyboardAvoidingView from react-native using with
behavior='position'
import React, {Component} from 'react';
import {StyleSheet, TextInput, View, KeyboardAvoidingView} from 'react-native';
export default class App extends Component {
render() {
return (
<View>
<KeyboardAvoidingView behavior='position'>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
</KeyboardAvoidingView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f5f5f5',
}
import { Image,KeyboardAvoidingView } from 'react-native';
import { Container, Content, Text, Card, CardItem, Button, Icon, Form, Item, Input, Spinner } from 'native-base';
//https://github.com/GeekyAnts/NativeBase/issues/1163
<KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
<Content>...</Content>
</KeyboardAvoidingView>;
I cannot seem to get the keyboard to push the content up in my React-Native Expo app. I am testing this from the expo App by publishing it from my development machine.
Try as I might, nothing seems to push the view up when the keyboard comes into focus, is there a specific order of components, or some property I am missing; I have included the versions, the render block and the style blocks I think which are relevant.
I am using the following versions (latest);
"expo": "^29.0.0",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz",
For the login page, the render code looks like the following;
render() {
return (
<SafeAreaView style={styles.flexContainer}>
<KeyboardAvoidingView
style={styles.flexContainer}
behavior="padding"
>
<Image style={styles.image} source={require('../../assets/images/backgroundWelcome.png')} role="presentation" />
<View style={styles.container}>
<View style={[styles.row, styles.border]}>
<TextInput
placeholder='Email'
style={styles.input}
onChangeText={(input) => this.setState({email: input})}
value={this.state.email}
/>
</View>
<View style={[styles.row, styles.border]}>
<TextInput
placeholder='Password'
style={styles.input}
secureTextEntry={true}
onChangeText={(input) => this.setState({password: input})}
value={this.state.password}
/>
</View>
<View style={styles.row}>
<StyledButton callback={this.handleLogin} title='Log In'/>
</View>
</View>
</KeyboardAvoidingView>
</SafeAreaView>
)
}
These are the styles that are relevant;
root: {
flex: 1,
alignItems: 'center',
backgroundColor: '#fff',
},
flexContainer: {
flex: 1,
},
container: {
paddingHorizontal: 40,
paddingBottom: 22,
alignItems: 'center',
flex: -1
},
row: {
flexDirection: 'row',
marginVertical: 10,
},
I ultimately could not find a full solution to the above directly, but I did find a npm module called.
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
I then nested this inside a ScrollView and included the View and Form inside it.
<ScrollView
<KeyboardAwareScrollView>
<View>
<!-- stuff -->
<View
<KeyboardAwareScrollView>
<ScrollView>
The module can be found here;
react-native-keyboard-aware-scroll-view
At the time of writing appears a very popular module with ~30k downloads a week. I have no affiliation to this module, but it works for me.
I had the same issue adding flex: 1 to KeyboardAvoidingView fixed my problem:
<KeyboardAvoidingView style={{ flex: 1 }} behavior={"padding"} >
<ScrollView >
<Card>
<CardItem header bordered>
<Text>Personal Information</Text>
</CardItem>
<CardItem bordered>
<Body>
<Item floatingLabel style={styles.item}>
<Label>Full Name</Label>
<Input />
</Item>
<Item floatingLabel style={styles.item}>
<Label>Headline</Label>
<Input />
</Item>
<Item floatingLabel style={styles.item}>
<Label>Location</Label>
<Input />
</Item>
<Item floatingLabel style={styles.item}>
<Label>Email</Label>
<Input />
</Item>
<Item floatingLabel style={styles.item}>
<Label>Phone Number</Label>
<Input />
</Item>
<Item floatingLabel style={styles.item}>
<Label>Phone Number</Label>
<Input />
</Item>
<Item floatingLabel style={styles.item}>
<Label>Phone Number</Label>
<Input />
</Item>
</Body>
</CardItem>
</Card>
<ListItem>
<Left>
<Text>Make my Profile Public</Text>
</Left>
<Right>
<Switch value={this.state.publicProfileRadioValue}
onValueChange={(value) => this.setState({ publicProfileRadioValue: value })}
/>
</Right>
</ListItem>
</ScrollView>
</KeyboardAvoidingView>
Add minHeight property to the root view style.
<KeyboardAvoidingView
behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
style={styles.container}>
{//content }
</KeyboardAvoidingView>
minHeight: Math.round(Dimensions.get('window').height),
Do not forget to import Dimensions form react native
import { Dimensions } from 'react-native';
for anyone else who ran into this when testing on Android, make sure the element you want to be keyboard avoided also has flex: 1.
this will not work:
<KeyboardAvoidingView
behavior={Platform.OS == "ios" ? "padding" : "height"}
style={{ flex: 1 }}
>
<TextInput style={{ height: 300 }} />
</KeyboardAvoidingView>
this will:
<KeyboardAvoidingView
behavior={Platform.OS == "ios" ? "padding" : "height"}
style={{ flex: 1 }}
>
<TextInput style={{ flex: 1 }} />
</KeyboardAvoidingView>
without flex 1, the target element will not resize its height accordingly to avoid the keyboard
I could achieve the right behavior with this implementation:
Removed KeyboardAvoidingView component.
Added this to the app.json file:
"android": {
"softwareKeyboardLayoutMode": "pan"
}
Hope it works for you guys as well!
No matter what I do, KeyboardAvoidingView shrinks my TextInputs as much as it can instead of adding padding to the content above them and pushing them off the screen.
All I want is the normal behavior where my content is padded off the screen and nothing shrinks as is seen in the simplest tutorials using this component. I've tried all the behaviors, and all kinds of permutations of view hierarchies. No matter what I do, it will shrink the inputs.
<KeyboardAvoidingView style={Styles.containerView} behavior={'padding'}>
<View style={Styles.topContainerView}>
<Image style={Styles.subLogo} source={require('../../../assets/images/app-icon.png')} />
<View style={{justifyContent: 'center', marginVertical: 10}}>
<Text style={Styles.subtext}>{subtext}</Text>
</View>
<TextInput
style={Styles.textInput}
onChangeText={(text) => this.setState({firstName: text})}
value={this.state.firstName}
/>
<TextInput
style={Styles.textInput}
onChangeText={(text) => this.setState({lastName: text})}
value={this.state.lastName}
placeholderText={'Last Name'}
/>
<TextInput
style={Styles.textInput}
onChangeText={(text) => this.setState({email: text})}
value={this.state.email}
placeholderText={'Enter Email'}
/>
<TextInput
style={Styles.textInput}
onChangeText={(text) => this.setState({password: text})}
value={this.state.password}
placeholderText={'Enter Password'}
secureTextEntry={true}
/>
<TextInput
style={Styles.textInput}
onChangeText={(text) => this.setState({confirmPassword: text})}
value={this.state.confirmPassword}
placeholderText={'Confirm Password'}
secureTextEntry={true}
/>
</View>
<View style={Styles.bottomContainerView}>
<Button buttonStyle={Styles.continueButton} text={"Continue"} onPress={continueAction} />
<TouchableOpacity style={Styles.cancelContainer} onPress={this.goBack}>
<Text style={Styles.cancelText}>{'Cancel'}</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
In my code above, the Image element and subtext below it will not budge. No padding will be added to them nor will they shrink. Instead, the TextInputs will all shrink.
I just want them to be pushed off the screen instead of the inputs shrinking.
I have also tried adding a ScrollView within the KeyboardAvoidingView that contains all the elements, and even given a hard-coded height to the inputs.
When working with RN 0.63.1 and Android 9, I encountered the same issue. Upon reading GitHub issues, using KeyboardAvoidingView was discouraged and instead setting this in my AndroidManifest.xml fixed it.
Default:
<activity
...
android:windowSoftInputMode="adjustResize"
>
Change it to:
<activity
...
android:windowSoftInputMode="adjustPan"
>
I found setting this makes the padding work but it is still too close to the keyboard. I used KeyboardAvoidingView to add some padding between keyboard and text input.