React-navigation undefined Error

React-navigation undefined Error - javascript

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}
/>

Related

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.

How to change border color of this circular Button on OnPress?

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

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

How to display cards in two columns in React Native?

I have this code that makes cards but it only displays three cards and does not display the fourth card and it does not display cards in 2 columns.
Is there any way to change a code a bit so that it can display cards in 2 columns and display all cards? I have tried squeaking the code by changing Stylesheet.create with different options but due to lack of knowledge and experience, I cannot implement it.
import React from 'react'
import { Card, ListItem, Button, Icon } from 'react-native-elements';
import {ScrollView, StyleSheet, Text,Image, TouchableOpacity, View} from 'react-native';
import { Ionicons, AntDesign } from '#expo/vector-icons';
class App extends React.Component{
render(){
return(
<ScrollView>
<View style = {styles.container}>
<Card
image={{uri:('https://www.mrmunro.co.uk/wp-content/uploads/2018/08/Cavani-Tommy-Three-Piece-Suit-Worn.jpg')}} style ={styles.item}>
<Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
$299.99
</Text>
<AntDesign style={{flexDirection:'row', justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
<Text>
Grey Suit
</Text>
</Card>
<Card
image={{uri:('https://simages.ericdress.com/Upload/Image/2018/14/watermark/99e027f5-1e4f-4b77-93d2-827e0c2db2e7.jpg')}} style ={styles.item}>
<Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
$299.99
</Text>
<AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
<Text>
Grey Suit
</Text>
</Card>
<Card
image={{uri:('https://simages.ericdress.com/Upload/Image/2018/14/watermark/99e027f5-1e4f-4b77-93d2-827e0c2db2e7.jpg')}} style ={styles.item}>
<Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
$299.99
</Text>
<AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
<Text>
Grey Suit
</Text>
</Card>
<Card
image={{uri:('https://www.mrmunro.co.uk/wp-content/uploads/2018/08/Cavani-Tommy-Three-Piece-Suit-Worn.jpg')}} style ={styles.item}>
<Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
$299.99
</Text>
<AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
<Text>
Grey Suit
</Text>
</Card>
</View>
</ScrollView>
)
}
}
export default App;
const styles = StyleSheet.create({
container:{
flexDirection: 'row',
alignContent:'stretch',
},
item:{
width: '50%'
}
})

You can use flatlist instead.
Code:
<FlatList style={{margin:5}}
data={this.state.items}
numColumns={2} <-- you can change number of columns by changing this value
keyExtractor={(item, index) => item.id }
renderItem={(item) =>
<Card /> <-- render your card component here
}
/>

container:{
flexDirection: 'row',
flexWrap: 'wrap',
},

Simplest way is to divide it in 2 views if you have limited/fixed number of cards
<View style={{flexDirection: 'column'}}>
<View style={{flexDirection: 'row'}}>
<Card1 style={{flex:1}}/>
<Card2 style={{flex:1}}/>
</View>
<View style={{flexDirection: 'row'}}>
<Card3 style={{flex:1}}/>
<Card4 style={{flex:1}}/>
</View>
<View>

You need to wrap your Card in two View parts
Changed code
<View style = {styles.container}>
<View style ={styles.item}>
<Card
image={{uri:('https://www.mrmunro.co.uk/wp-content/uploads/2018/08/Cavani-Tommy-Three-Piece-Suit-Worn.jpg')}}>
<Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
$299.99
</Text>
<AntDesign style={{flexDirection:'row', justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
<Text>
Grey Suit
</Text>
</Card>
<Card
image={{uri:('https://simages.ericdress.com/Upload/Image/2018/14/watermark/99e027f5-1e4f-4b77-93d2-827e0c2db2e7.jpg')}} style ={styles.item}>
<Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
$299.99
</Text>
<AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
<Text>
Grey Suit
</Text>
</Card>
</View>
<View style ={styles.item}>
<Card
image={{uri:('https://simages.ericdress.com/Upload/Image/2018/14/watermark/99e027f5-1e4f-4b77-93d2-827e0c2db2e7.jpg')}}>
<Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
$299.99
</Text>
<AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
<Text>
Grey Suit
</Text>
</Card>
<Card
image={{uri:('https://www.mrmunro.co.uk/wp-content/uploads/2018/08/Cavani-Tommy-Three-Piece-Suit-Worn.jpg')}} style ={styles.item}>
<Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
$299.99
</Text>
<AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
<Text>
Grey Suit
</Text>
</Card>
</View>
</View>

React native textInput scrollView android

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>

Develop Reference

JavaScript is the programming language of the Web.

React-navigation undefined Error - javascript

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} />

Related

how pass a function navigation.goBack() to component

How to change border color of this circular Button on OnPress?

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

How to display cards in two columns in React Native?

React native textInput scrollView android

Categories

Resources