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!
Related
I've been trying to make a simple app, and I want some comment section that I create with flatlist, but after I create some component below my flatlist it won't appear, but the height of it appears, it just the component itself won't appear, after I'm trying to comment my flatlist, the component below it showed up.
Can you give me solution for this problem? so stuck with it
<View
style={{
alignItems: 'center',
flex: 1,
}}>
<FlatList
data={Comment}
keyExtractor={Comment.id}
renderItem={renderItem}
removeClippedSubviews={true}
scrollEnabled={false}
/>
</View>
</View>
<View>
<Timeline data={data} />
</View>
</View>
<!-- end snippet -->
Try this way
<View style={{ flex: 1 }}>
<View
style={{
alignItems: "center",
flex: 1,
}}
>
<FlatList
data={Comment}
keyExtractor={Comment.id}
renderItem={renderItem}
removeClippedSubviews={true}
scrollEnabled={false}
/>
</View>
<View>
<Timeline data={data} />
</View>
</View>
how can I wrap the images and text to use only the right amount of height?
This is what I achieve right now image but it's not what I want because I have a form below that won't show because the text header and the image took up a lot of space.
Home file
<Container>
<ImageBackground style={styles.container} source={require('../../../assets/BG_SignIn.png')}>
<Header />
<Form />
</ImageBackground>
</Container>
Header file
<View style={styles.header}>
<View style={styles.signInHeader}>
<H1>Sign In</H1>
<Text>I don't have an account, yet.</Text>
</View>
<View style={styles.birdHeader}>
<Birds width="100%" height="100%" />
</View>
<Form>
<Item floatingLabel>
<Label>Mobile / Email</Label>
<Input />
</Item>
<Item floatingLabel>
<Label>Password</Label>
<Input secureTextEntry={true} />
</Item>
<Button block rounded style={{ marginTop: 20, backgroundColor: "white" }}>
<Text style={{ color: "#018377", fontSize: 20 }}>Sign In</Text>
</Button>
<Text style={{ margin: 15, }}>Forgot your password?</Text>
</Form>
</View>
const styles = StyleSheet.create({
header: {
display: "flex",
flexDirection: "row",
flex: 1
},
signInHeader: {
flex: 4,
marginTop: 20,
borderWidth: 1,
borderColor: 'red',
},
birdHeader: {
flex: 2,
borderWidth: 1,
borderColor: 'red'
}
})
Just wrap in a view and set flex like you want
<View style={{flex: 0.5}}>
<View style={styles.signInHeader}>
<H1>Sign In</H1>
<Text>I don't have an account, yet.</Text>
</View>
<View style={styles.birdHeader}>
<Birds width="100%" height="100%" />
</View>
</View>
<View style={{flex: 0.5}}>
<Form>
...
</Form>
</View>
This is Code but not working for me.
return (
<View style={styles.spinnerStyle}>
<ActivityIndicator
animating={true}
size='large'
/>
</View>
);
This styling is for showing ActivityIndicator on center of page.
<View style={{
display:"flex",
flex:1,
justifyContent:"center",
alignItems:"center"
}}>
<ActivityIndicator
animating={true}
size='large'
/>
</View>
i use the native base components. when use the icon in item area by input, when change language system icon direction change. there is way to fix icon direction ?
<View style={LoginStyle.MainViewS}>
<View style={LoginStyle.DataView}>
<Item style={LoginStyle.ItemS} >
<Input placeholder="username" style={LoginStyle.InputS} />
</Item >
<Item style={LoginStyle.ItemS} >
<Icon name='checkmark-circle' style={{ color: 'green', }} />
<Input placeholder="password" style={LoginStyle.InputS} />
</Item>
<TouchableOpacity style={LoginStyle.TouchableS} onPress={() => Actions.register()} >
<Text style={LoginStyle.TouchableTS} >register</Text>
</TouchableOpacity>
<TouchableOpacity style={LoginStyle.TouchableS} onPress={() => Actions.forgetpass()} >
<Text style={LoginStyle.TouchableTS}>forgetpass</Text>
</TouchableOpacity>
<TouchableOpacity style={LoginStyle.TouchableBS} onPress={() => Actions.index()}>
<Text style={LoginStyle.ToucableBTS}>login</Text>
</TouchableOpacity>
</View>
</View>
What is the style of LoginStyle.InputS and LoginStyle.ItemS?
Try adding:
{ position: 'absolute', top: 0, right: 0 }
to the LoginStyle.InputS
<Item style={LoginStyle.ItemS} >
<Icon name='checkmark-circle' style={{ color: 'green', }} />
<Input placeholder="password" style={{...LoginStyle.InputS, position:'absolute', top:0, right:0}} />
</Item>
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>;