Develop Reference

how pass a function navigation.goBack() to component

how i can pass a function navigation.goBack() to component child
Next code:
Parent
<SafeAreaView style={{ flex: 1 }}>
<ModalLoading visible={loading} />
<KeyboardAwareScrollView
innerRef={ref => scrollRef}
contentContainerStyle={{ flexGrow: 1 }}
style={styles.container}>
<HeaderCadastro
navigation={() => navigation.goBack()}
/>
Child
<Pressable onPress={navigation} style={style.backButton}>
<Icon name='chevron-back' size={moderateScale(30)} />
</Pressable>

Change your parent and child as this:
parent:
<HeaderCadastro navigation={navigation.goBack} />
child :
<Pressable onPress={() => navigation()} style={style.backButton}>
<Icon name='chevron-back' size={moderateScale(30)} />
</Pressable>
explanation :
There were only syntax errors, not major issues.
You just to have to remember how to call it and how to pass it.

Reset form button Rect Native

I'm trying to create a form with a reset button in order to clear all fields, I'm building a Class Component I don't like the idea of using setState in each field, do you know any better way to clear this form?
simplified code example:
class Registration extends React.Component {
constructor(){
super();
this.state= {}
}
render() {
return (
<View >
<View >
<TouchableOpacity
style={{ styles.button }}
onPress={ } >
<Text style={{ style.text }} >RESET</Text>
</TouchableOpacity>
</View>
<ScrollView>
<View >
<TextInput
ref={this.textInput}
style={{ styles.input }}
placeholder='Name'
onChangeText={(text) => { }}
/>
</View>
<View >
<TextInput
style={{ styles.input}}
onChangeText={(text) => { }}
placeholder='Username'
/>
</View>
<View >
<TextInput
style={{ styles.input}}
onChangeText={(text) => { }}
placeholder='password'
/>
</View>
<View >
<TextInput
style={{ styles.input}}
onChangeText={(text) => { }}
placeholder='email'
/>
</View>
.
.
.
</ScrollView>
</View>
);
}
}

Adding an eye icon on the right side of the input field in react native

I am working on a react native project. I have a password field on the Login page and I want to add an eye icon on the right end of the input field. My code currently looks like this:
<View><TextInput placeholder='Enter your Password' autoCorrect={false} secureTextEntry={true} textContentType='password'></TextInput></View>
This is a normal input field with a placeholder text.

Please find the below code:
const [password, setPassword] = useState('');
const [isPasswordSecure, setIsPasswordSecure] = useState(true);
<View style={styles.viewPassword}>
<TextInput
secureTextEntry={isPasswordSecure}
style={styles.textInputStyle}
right={
<TextInput.Icon
name={() => <MaterialCommunityIcons name={isPasswordSecure ? "eye-off" : "eye"} size={28} color={COLORS.black} />} // where <Icon /> is any component from vector-icons or anything else
onPress={() => { isPasswordSecure ? setIsPasswordSecure(false) : setIsPasswordSecure(true) }}
/>
}
fontFamily={FONTS.ROBOTO_REGULAR}
fontSize={Theme.FONT_18PX}
selectionColor={COLORS.orange}
underlineColor={COLORS.orange}
label={StringsConstants.Password}
value={password}
onChangeText={text => setPassword(text)}
underlineColorAndroid="transparent"
theme={{ colors: { text: COLORS.black, primary: COLORS.orange, placeholder: COLORS.black } }}
/>
</View>
I hope it will help you!

you can put it and style it like this
<View>
<TextInput placeholder='Enter your Password' autoCorrect={false} secureTextEntry={true} textContentType='password' />
<EyeIconOrImage style={{
position: 'absolute',
right: 20,
}} />
</View>

How do i wrap all my code in imageBackground

I have the following and i have all the imports added. Please see below code (apologies as a bit of a newbie)
return (
<View style={styles.container}>
<KeyboardAwareScrollView
style={{ flex: 1, width: '100%' }}
keyboardShouldPersistTaps="always">
<Image
style={styles.logo}
source={require('../../../assets/logo.png')}
/>
<TextInput
style={styles.input}
placeholder='E-mail'
placeholderTextColor="#CBB26A"
onChangeText={(text) => setEmail(text)}
value={email}
underlineColorAndroid="transparent"
autoCapitalize="none"
/>
<TextInput
style={styles.input}
placeholderTextColor="#CBB26A"
secureTextEntry
placeholder='Password'
onChangeText={(text) => setPassword(text)}
value={password}
underlineColorAndroid="transparent"
autoCapitalize="none"
/>
<TouchableOpacity
style={styles.button}
onPress={() => onLoginPress()}>
<Text style={styles.buttonTitle}>Log in</Text>
</TouchableOpacity>
<View style={styles.footerView}>
<Text style={styles.footerText}>Don't have an account? <Text onPress={onFooterLinkPress} style={styles.footerLink}>Sign up</Text></Text>
</View>
</KeyboardAwareScrollView>
</View>
)
}
I want to add a background image to cover everything but still make everything work as normal (so it all sits on top of the image). i cant wrap them with imageBackground because of objects. Any ideas how i can achieve this?

You can create your style and then merge your style with the styles.container.
const wrapperStyle = {
...styles.container,
background: // your code here
}
Then use this wrapperStyle into your View as
<View style={wrapperStyle}>

How to create a Button that Change Background Color onPress in react native?

How can i create a button/TouchableOpacity that change the background color of style={styles.view} ?
<View style={styles.view}>
{user &&
<>
<TouchableOpacity onPress={carregaUsuarioAnonimo}>
<Image
style={styles.avatar}
source={{ uri: user.picture }} />
</TouchableOpacity>
<Text style={styles.nome_usuario}>{user.name}</Text>
</>
}
<ScrollView style={styles.scrollview} ref={(view) => { setScrollview(view) }}>
{
mensagens.length > 0 && mensagens.map(item => (
<View key={item.id} style={styles.linha_conversa}>
<Image style={styles.avatar_conversa} source={{ uri: item.avatar }} />
<View style={{ flexDirection: 'column', marginTop: 5 }}>
<Text style={{ fontSize: 12, color: '#999' }}>{item.usuario}</Text>
{typeof (item.mensagem) == "string" ?
<Text>{item.mensagem}</Text>
:
<Text> </Text>
}
</View>
</View>
))
}
</ScrollView>
<View style={styles.footer}>
<TextInput
style={styles.input_mensagem}
onChangeText={text => setCaixaTexto(text)}
value={caixaTexto} />
<TouchableOpacity onPress={salvar}>
<Ionicons style={{ margin: 3 }} name="md-send" size={32} color={'#999'} />
</TouchableOpacity>
</View>
</View>)

you can make a condition inside the style, like that:
create a boolean inside your state and change it value to true when the button is clicked.
Inside your Touchable, drop the condition.
style={
this.state.buttonCliked ? styles.backgroundBlue :
styles.backgroundGreen
}
I hope it helps you.

This is an example:-
state={isClicked:false}
checkToChangeStyle=()=>{
this.setState({isClicked:!this.state.isClicked})
}
return(
<TouchableOpacity onPress={this.checkToChangeStyle}
style={this.state.isClicked ? styles.backGround1 : styles.backGround2}>
<Text>Your Button</Text>
</TouchableOpacity>
)
const styles=StylesSheet.create({
backGround1:{backgroundColor:'green'},
backGround2:{backgroundColor:'red'},
})