Bem-vindos à nossa comunidade!

Junte-se a nós e faça parte hoje mesmo!

Teclado faz área do input “encolher” no React Native

Agemiro

Novo Membro
Cadastro
14/1/22
Postagens
1
Curtidas
0
Pontuação
1
Cidade
Monteiro
Estava tudo certo até que fui testar com o teclado do meu dispositivo e percebi que a tela estava subindo mesmo sem o KeyboardAvoidingView o que me deixou sem entender primeiramente. Depois disso coloquei o próprio KeyboardAvoidingView e não mudou nada. Resumindo: Em ambos os casos o input ficou encolhido conforme o espaço do teclado entre ele.
Já venho quebrando a cabeça mas até agora não consegui resultados…
import React, { useState } from "react";
import { View, Text, StyleSheet, TextInput, TouchableOpacity, KeyboardAvoidingView } from "react-native"
import { Ionicons as Icons } from '@expo/vector-icons';
export default function Register(){
const[userPassword, setUserPassword] = useState(null);
const[isHidePassword, setHidePassword] = useState(true);
let data = {
userPassword: userPassword,
}

const passwordCompleted = () =>{
alert('Password ok = '+userPassword);
}
return(
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"} style={styles.mainContainer}>
<View style={styles.innerContainer} >
<Text style={styles.stepText}>6/6</Text>
<Text style={styles.viewText}>Agora defina a sua senha</Text>
<View style={styles.userPasswordInputArea}>
<TextInput style={styles.userPasswordInput} placeholder= "senha"
onChangeText={value => setUserPassword(value)}
secureTextEntry={isHidePassword}
/>
<TouchableOpacity
style={styles.iconHide}
onPress={ () => {setHidePassword((prev) => !prev)} }
>
<Icons name={isHidePassword ? 'eye-off' : 'eye'} color='#323359' size={25}/>
</TouchableOpacity>
</View>

<TouchableOpacity style={styles.toSendButton} activeOpacity={0.7} onPress={()=>passwordCompleted()}>
<Text style={styles.toSendButtonText}>Enviar</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
)
}

const styles = StyleSheet.create({
mainContainer: {
flex: 1,
backgroundColor: '#323359'
},
innerContainer: {
marginTop: 90,
borderRadius: 35,
flex: 1,
backgroundColor: '#F1F4F5',
borderBottomEndRadius: 0,
borderBottomStartRadius: 0,
},
stepText:{
marginTop: 35,
textAlign: 'right',
color: '#323359',
marginRight: 40
},
viewText:{
marginTop: 12,
color: '#323359',
fontSize: 17,
alignSelf: 'center',
},
userPasswordInputArea:{ //Tdos estao na proporcao desse aqui
flexDirection: 'row', //tudo dentro de input area vai ficar na mesma linha
marginTop: 30,
width: '85%',
height: '9%',
backgroundColor: '#FFF',
alignItems: 'center',
marginLeft: '7%',
borderRadius: 50,
shadowColor: '#000',
shadowOffset: { width: 1, height: 1 },
shadowOpacity: 0,
shadowRadius: 2,
elevation: 3
},
userPasswordInput:{
width: '80%',//Pega 80% da área em largura
height: '100%',
alignItems: 'center',
fontSize: 18,
paddingLeft: 20
},
iconHide:{
width: '20%',//Pega o resto da área em largura
height: 50,
justifyContent: 'center',
alignItems: 'center',
},
toSendButton:{
backgroundColor: '#323359',
marginTop: 35,
width: 180,
height: 40,
alignSelf: 'center',
alignItems: 'center',
borderRadius: 50,
padding: 7,

shadowColor: '#000',
shadowOffset: { width: 1, height: 1 },
shadowOpacity: 0,
shadowRadius: 2,
elevation: 3,
},
toSendButtonText:{
color: '#FFF',
fontSize: 17,
fontWeight: 'bold',
}
});
 
Top