'Keyboard disapears instanty after clicking on textinput react native
whenever i click on textinput , key board appears and disappears, i also tried on other android device as well
import React, { useState } from 'react'; import {SafeAreaView,Image,StyleSheet,FlatList,View,Text,Button,TextInput,StatusBar,ScrollView,TouchableOpacity,Dimensions,}
from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import ForgotScreen from './ForgotScreen';
const {width, height} = Dimensions.get('window');
const Login = ({navigation}) => {
const [email , setEmail]= useState('')
return (
<SafeAreaView style={{flex: 1 , backgroundColor:'white'}}>
<StatusBar backgroundColor={'white'} barStyle="dark-content" />
<View style={{flex:0.5 ,alignItems:'center', justifyContent:'center'}}>
<Text style={{fontWeight:'bold' , color:'black',fontSize:20 ,margin:50}}>Login</Text>
**<TextInput placeholder='Email' placeholderTextColor={'grey'} style={styles.input_text} value={email} onChangeText={setEmail}/>
<TextInput placeholder='Password' placeholderTextColor={'grey'} style={styles.input_text}/>**
<TouchableOpacity style={{justifyContent:'center' , width:'90%' }} onPress={() => navigation.navigate('ForgotScreen')}>
<Text style={{color:'#A2D5AB' , alignSelf:'flex-end',marginVertical:15 , justifyContent:'center'}}>Forgot Password?</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.btn}>
<Text style={{color:'white'}} onPress={() => navigation.navigate('HomeScreen')}>Login</Text>
</TouchableOpacity>
</View>
<View style={{flex:0.5 ,alignItems:'center', justifyContent:'center'}}>
<TouchableOpacity>
<Text style={{color:'#A2D5AB' , alignSelf:'baseline' , justifyContent:'center' , marginTop:200}} onPress={() => navigation.navigate('SignUp')}>Sign up an account</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
};
const styles=StyleSheet.create({
input_text:{
width:'90%',
height:50,
color:'black',
borderRadius:10,
borderBottomWidth:1,
borderColor:'grey',
},
btn: {
width:'90%',
shadowColor:"black",
shadowOpacity:0.8,
elevation:3,
shadowRadius:15,
height: 50,
marginHorizontal:10,
borderRadius: 5,
backgroundColor: 'gold',
justifyContent: 'center',
alignItems: 'center',
},
})
export default Login;
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
