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.
Related
If I press on any of these Button it's border color should change and rest of should have no color.
Every time i press diffrent button only its border color should change and all other buttons should have no color.
Here is a Image of what I want:-
<View
style={{
flexDirection: 'row',
justifyContent: 'space-evenly',
}}>
<TouchableOpacity style={styles.Circlebtn}>
<Icon.MaterialCommunityIcons name="calendar-today" size={24} />
<Text>Day to day</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.Circlebtn}>
<Icon.MaterialCommunityIcons name="alarm-light" size={24} />
<Text>Emergency</Text>
</TouchableOpacity>
</View>
<View style={styles.mainview}>
<TouchableOpacity style={styles.Circlebtn}>
<Icon.MaterialCommunityIcons name="hammer-wrench" size={24} />
<Text>Planned Works</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.Circlebtn}>
<Icon.Foundation name="clipboard-pencil" size={24} />
<Text>Survey</Text>
</TouchableOpacity>
</View>
<View style={styles.mainview}>
<TouchableOpacity style={styles.Circlebtn}>
<Icon.FontAwesome name="users" size={24} />
<Text>Meeting</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.Circlebtn}>
<Icon.Entypo name="dots-three-horizontal" size={24} />
<Text>Others</Text>
</TouchableOpacity>
</View>
You can add a variable to your state which holds your pressed button. Let's say
index = 0
After that, each button click, you can update the state. Let's say
const [index, setIndex] = useState(0);
<Button onClick={() => setIndex(1)} />
<AnotherButton onClick={() => setIndex(2)} />
If you check the style of each button according to this index variable, you can add your border to your button.
<Button style={{ borderColor: index === 1 ? 'green' : 'black' }} />
<AnotherButton style={{ borderColor: index === 2 ? 'green' : 'black' }} />
You can try these steps to put a border to your buttons. I hope it works well
In my component, I was rendering a button for each Item. It was working. However, when I wrap all of it in a touchable TouchableOpacity, the button no longer works. Everything is the touchable opacity now. How can I still use the button?
return (
<TouchableOpacity onPress= {()=> console.log('Hello')}>
<View style={styles.item} key={item.id}>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
}}></Thumbnail>
<View style={styles.nameNumber}>
<Text style={styles.userName}>{userName}</Text>
</View>
<View style={styles.deleteButtonContainer}>
<Button
rounded
style={styles.deleteButton}
onPress={() => onDeleteContact(item.id)}
>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
</View>
</TouchableOpacity>
);
},
Change like this? (Wrap the tag except the button?)
return (
<View style={styles.item} key={item.id}>
<TouchableOpacity onPress= {()=> console.log('Hello')}>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
}}></Thumbnail>
<View style={styles.nameNumber}>
<Text style={styles.userName}>{userName}</Text>
</View>
</TouchableOpacity>
<View style={styles.deleteButtonContainer}>
<Button
rounded
style={styles.deleteButton}
onPress={() => onDeleteContact(item.id)}
>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
</View>
);
},
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'},
})
I have an interesting question: So I import this
<TouchableOpacity onPress={() => this.props.navigation.navigate('Feed')} style={styles.buttonContainer}>
<Text style={styles.buttonText}>
LOGIN
</Text>
</TouchableOpacity>
button from a form I created,
I import it to a screen that I want to load the form on like this:
<KeyboardAvoidingView behavior='padding' style={styles.container}>
<View style={styles.logo}>
<Text style={{fontSize: 64, color: '#34B3E4'}}>Partner<Text style={{fontSize: 64, color: '#0077B5'}}>Up</Text></Text>
<Text style={{fontSize: 13, opacity: 0.8, color: '#0077B5'}}>We connect you. You work easier.</Text>
</View>
<LoginForm/> <-------------------Here is the import
<View style={styles.accountLogin}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Forgot')}>
<Text style={{opacity: 0.9,color:'#34B3E4'}} >Forgot your password? </Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
but my onpress function to transition screens doesnt want to relay and throws an undefined error
Cant import something and render an onpress function anywhere even in my router:
Feed: {
screen: Feed,
navigationOptions: {
title: 'Mentor',
header:{
right: //Going to be the users profile picture
<Icon
onPress={() => this.props.navigation.navigate('Profile')}
name="user"
color='#0077B5'
size={30}
/>,
left: //Messages
<Icon
name="message"
color='#0077B5'
size={30}
/>,
titleStyle: { color: '#0077B5' },
}
}
},
what do i have to do exactly
Here be the logcat error msg
You need to pass the properties to your child component to
Change
<LoginForm/>
to
<LoginForm navigation={this.props.navigation}/>
For it to work in navigator, use a reference
<Navigator
ref='navigator'
...
/>
and then
<Icon
navigator={this.refs.navigator}
/>
I am trying to write a very simple app to test react native.
I have some TextInput components in a big ScrollView, as a register formulary.
Everything works fine, but when I scroll clicking on a TextInput, it doesn't scroll.
I can only scroll through the page when I click in blank spaces. Any idea of how to do it?
Thanks.
<ScrollView>
<TextInput onChangeText={email => this.setState({email})} label={ I18n.t("contactEmail") }/>
<TextInput onChangeText={email => this.setState({email})} label={ I18n.t("contactEmail") }/>
<TextInput onChangeText={email => this.setState({email})} label={ I18n.t("contactEmail") }/>
<TextInput onChangeText={email => this.setState({email})} label={ I18n.t("contactEmail") }/>
</ScrollView>
I had the same problem and after searching for a while no answer helped me; so I solved it myself by putting a <TouchableWithoutFeedback /> over each <TextInput> and sending the touch event back to the <TextInput />:
<View>
<TextInput ref ={(ref)=>this.textInput = ref}>
<TouchableWithoutFeedback style={{position: 'absolute', top:0, bottom:0, left:0, right:0}}
onPress={()=>this.textInput.focus()}/>
</View>
You can create a custom component which wraps TextInput like that and use them in your ScrollViews.
I had solve the problem like this:
<TouchableOpacity
activeOpacity={1}
style={{ flex: 1 }}
onPress={() => this.textInput.focus()} >
<View
style={{ flex: 1 }}
pointerEvents="none" >
<TextInput
ref={(ref) => this.textInput = ref}
style={{ fontSize: 14, color: '#666666', textAlign: 'right', flex: 1 }}
placeholder={this.props.placeHolder}
defaultValue={this.props.defaultValue ? this.props.defaultValue + '' : ''}
placeholderTextColor='#aaaaaa'
keyboardType={this.props.keyboardType ? this.props.keyboardType : 'default'}
secureTextEntry={this.props.isSecret}
onChangeText={this._onChangeText.bind(this)} />
</View>
</TouchableOpacity>