React Native Keyboard Avoiding view with Native base

Question

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

Answer 1

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', }

Answer 2

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>;

React Native Keyboard Avoiding view with Native base

Question

2 answers

solution1
2 2020-01-20 18:39:32

solution2
-1 2019-12-02 17:44:06

React Native Keyboard Avoiding view with Native base

Question

2 answers

solution1 2 2020-01-20 18:39:32

solution2 -1 2019-12-02 17:44:06

solution1
2 2020-01-20 18:39:32

solution2
-1 2019-12-02 17:44:06