Develop Reference

Why cant i pass props to another page? Cannot read proprty of undefined comes up

I'd like to pass the value of localUserId to another screen ( defined in Table.js)
In my App.js i have:
goToTable() {
this.props.navigation.navigate('Table', { userIdForPrivacyToggle: this.state.localUserId } )
}
render() {
return (
<View style={styles.TableButton}>
<TouchableOpacity onPress={()=>this.goToTable()}>
<Icon style={styles.icon} name="list" size={25} color="#FF7400" resizeMode='contain' />
</TouchableOpacity>
</View>
)}
In my Table.js
export default class TableClass extends Component {
constructor(props) {
super(props)
this.state = {
userIdForPrivacyToggle: this.props.navigation.state.params.userIdForPrivacyToggle,
};
Foo() {
Alert.alert(this.state.userIdForPrivacyToggle)
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.Foo}>
<Icon style={styles.icon} name="icon" size={30} color="#FF7400" resizeMode='contain' />
</TouchableOpacity>
</View>
)}
}
When i click the button to call Foo() i get the error:
cannot read property 'userIdForPrivacyToggle' of undefined
Is there something wrong with the onPress methods? What could be going wrong

The Foo() needed to be onPress={()=>this.Foo()}

I am not familiar with <TouchableOpacity /> but usually invoking methods straight away is a bad idea. I guess what you want to do is to pass the method down in order to invoke it where you need it to.
Try this in App.js:
<TouchableOpacity onPress={this.goToTable}>

Passing data to routes navigation React Native

I made a screen of a flatlist that displays a bunch of Doctors infos(name,location,Picture),when i click on a doctor view it navigates to his profil. for the moment the profil screen is just blank, but i want to pass the params so i can just display them without re doing the api call.
here is the code of the research screen where the flatlist is:
render(){
return (
<View style={styles.main_container}>
<FlatList
data={this.state.dataSource}
keyExtractor={item=> item.id.toString()}
renderItem= {({item})=> <MedItem Med={item} />} />
</View>
);
}
i created a component custom med item to style my flat list:
//Meditem.js
class MedItem extends React.Component {
render(){
const Med = this.props.Med
return (
<View style={styles.main_container} >
<View style={styles.ctr1}>
<TouchableOpacity onPress={()=>NavigationService.navigate('MedProfil')}>
<Image style={styles.img} source={require('../assets/Title.jpg')} />
</TouchableOpacity>
<TouchableOpacity onPress={()=>NavigationService.navigate('MedProfil')}>
<Text style={styles.txt}> {Med.name} </Text>
<Text style={{flexWrap:'wrap'}} > {Med.specialite} </Text>
<Text> {Med.work} </Text>
</TouchableOpacity>
</View>
<View style={styles.ctr2}>
<Text style={{textAlign:'center',marginBottom:5}}>Disponibilité</Text>
<Calendar/>
</View>
</View>
);
}
}
last this is my doctor profil screen:
export default class MedProfilScreen extends React.Component {
render(){
return(
<View>
<Text>{Med.name}</Text>
<Button title='Prendre rendez-vous' onPress={()=>{}} />
</View>
);
}
}
Can someone please help me doing this.
thank you

Send Data through navigation like this
this.props.navigation.navigate("MedProfil",
{
name:Med.name
})
Get data in MedProfil Screen
const name=this.props.navigation.getParam("name")

In your Sending component use this:
constructor(props) {
super(props);
this.navigate = this.props.navigation.navigate;
}
//Send it like this
this.navigate("MedProfilScreen", { name:Med.name });
In your receiving component
constructor(props) {
super(props);
this.params = this.props.navigation.state.params;
}
//Can access it using
console.log(this.params.name);

thank you everyone! getParam won't work for me.
i used this to solve the problem
//MedItem.js
<TouchableOpacity onPress={()=>NavigationService.navigate('MedProfil',Med)}>
and in the profil screen
//MedProfil.js
export default function MedProfilScreen({route}){
const {name,specialite,work}=route.params;
return(
<ScrollView contentContainerStyle={{flex:1,alignItems:'center'}}>
<View style={styles.ctr1}>
<Text>{name}</Text>
<Text>{specialite}</Text>
<Text>{work}</Text>

Show Loader when a button is clicked

I'm trying to obtain a loader when a button is clicked (for a signup) without create another page (only to show the loader).
How can I do??
This is my code and what I tried (but it doesn't appears)
class Signup extends Component {
constructor(props) {
super(props);
this.state = {
//code about signup
isLoading: false
};
}
showLoader = () =>{
this.setState({ isLoading: true})
this.registrazione()
}
registrazione() {
//code about signup
}
render() {
return (
<View style={style.container}>
//code about signup
<View style={style.footer}>
<TouchableOpacity
style={[style.button, style.buttonOK]}
onPress={() => this.showLoader()}
>
<Text style={[style.buttonTesto]}>Signup</Text>
</TouchableOpacity>
<ActivityIndicator animating={this.state.isLoading} size="large" color="#56cbbe" />
</View>
</KeyboardAwareScrollView>
</View>
</View>
);
}
}

First of all you have one closing View tag that is not needed.
Assuming that's just mistake in question, you could do it with JS ternary operator. Like this:
<View style={style.container}>
//code about signup
<View style={style.footer}>
{(!this.state.isLoading) ? <TouchableOpacity
style={[style.button, style.buttonOK]}
onPress={() => this.showLoader()}
>
<Text style={[style.buttonTesto]}>Signup</Text>
</TouchableOpacity> : <ActivityIndicator animating={this.state.isLoading} size="large" color="#56cbbe" />}
</View>
</KeyboardAwareScrollView>
</View>
You can learn more about ternary operators here
This should replace your button with loading animation.
Don't hesitate to ask any more questions if you have any! I'm glad to help!

View into IndicatorViewPager React Native

I'm trying to create IndicatorViewPager with three parts.
the problem that I can't see the content of each page. Below my code.
export default class Reservations extends Component {
render() {
return (
<View style={{flex:1}}>
<IndicatorViewPager
style={{flex:1, paddingTop:20, backgroundColor:'white'}}
indicator={this._renderTitleIndicator()}
>
<View style={{backgroundColor:'cadetblue'}}>
<Text>page one</Text>
</View>
<View style={{backgroundColor:'cornflowerblue'}}>
<Text>page two</Text>
</View>
<View style={{backgroundColor:'#1AA094'}}>
<Text>page three</Text>
</View>
</IndicatorViewPager>
</View>
);
}
_renderTitleIndicator() {
return <PagerTitleIndicator titles={['one', 'two', 'three']} />;
}
I have the title for each part but the content is hidden. Thank you for your help.

Layout a button from superview's bottom in react-native

I wanna render a button in react native like this:
Hear is my code :
class Test extends Component {
render() {
return (
<View>
<TouchableHighlight style={{marginBottom:20,height:40,backgroundColor:'blue',justifyContent:'center'}}>
<Text style={{alignSelf:'center',color:'white'}}>Login</Text>
</TouchableHighlight>
</View>
);
}
}
But the render result for mentioned above is :
How to modify my code？

Use position: 'absolute' in this case, like:
loginButton: {
position:'absolute',
bottom: 0,
height:40,
backgroundColor:'blue',
justifyContent:'center',
width: width
}
and render should be:
render() {
return (
<View style={styles.loginButton}>
<TouchableHighlight>
<Text style={styles.loginButtonText}>Login</Text>
</TouchableHighlight>
</View>
);
}
Here is the full working code: https://rnplay.org/apps/6qMTdA