Develop Reference

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!

react-native calling custom view

I have a custom header view and I have call this inside my class but for some reason it is not showing.
export default class App extends Component<Props> {
customHeader(){
<View style={{height:80, width:'100%', backgroundColor: 'blue'}}>
<TouchableOpacity>
<Text>Header</Text>
</TouchableOpacity>
</View>
}
render() {
return (
<View style={styles.container}>
//Calling my custom header
{this.customHeader()}
</View>
);
}
}
I feel like my code is correct but the header is not showing. Any idea why?

Your customHeader function must return something. Right now it just runs jsx and returns nothing. Fix it like this for example:
customHeader(){
return (
<View style={{height:80, width:'100%', backgroundColor: 'blue'}}>
<TouchableOpacity>
<Text>Header</Text>
</TouchableOpacity>
</View>
)
}

Trying to create two columns in react-native

I am trying to create a two column grid using flex. One column will be used to display a word or phrase and the second column will be used to translate the first column. Here is a link: http://imgur.com/nZGo8pb to give you a visual idea on what I am trying to achieve.
I am unable to get two columns side by side. I am only able to have my words appear on top of each other. This is best attempt. A huge failure.http://imgur.com/a/ICApr
My code is:
nent} from 'react';
import { Text, View,StyleSheet,Image,TextInput,ListView} from 'react-native';
class AddWords extends Component{
state = {words:['iku','konkai','kaikan'],
word:'',
EnglishWords:['go','this time','next time']
}
renderList(tasks){
return(
tasks.map((task) =>{
return(
<View key={task} style={styles.item}>
<Text>
{task}
</Text>
<Text>
</Text>
</View>
)
})
)
}
renderEnglishWords(english){
return(
english.map((english) =>{
return(
<View key={english} style={styles.item2}>
<Text>
{english}
</Text>
<Text>
</Text>
</View>
)
})
)
}
addWord(){
let words = this.state.words.concat([this.state.word]);
this.setState({words})
}
render(){
return(
<View style={styles.container}>
<TextInput
style={styles.input}
onChangeText={(word) => {
this.setState({word})
}}
onEndEditing={()=>this.addWord()}
/>
<View style={styles.wordContainer}>
{this.renderList(this.state.words)}
{this.renderEnglishWords(this.state.EnglishWords)}
<View style={styles.item2}>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
borderWidth:3,
borderColor:'green',
flexDirection:'column',
paddingTop:10
},
wordContainer:{
flexDirection: 'column',
borderColor:'blue',
borderWidth:2
},
input:{
height:60,
borderWidth:1,
borderRadius:5,
borderColor:'black',
textAlign:'center',
margin:10,
paddingTop:20,
paddingBottom:10
},
item:{
borderColor:'red',
borderWidth:2
},
item2:{
borderColor:'black',
borderWidth:2,
flexDirection:'column',
}
})
export default AddWords;
Any help will be greatly appreciated.
Thanks.

You need to wrap both inner containers in another <View> with the following style:
<View style={styles.container}>
<TextInput
style={styles.input}
onChangeText={(word) => {
this.setState({ word })
}}
onEndEditing={this.addWord}
/>
<View style={{ flexDirection: 'row', flex: 1 }}>
<View style={styles.wordContainer}>
...
</View>
<View style={styles.item2}>
...
</View>
</View>
</View>

It's because the flexDirection in styles.wordContainer is set to 'column', it should be set to 'row'.
Check out this link on flex-direction examples.

How do I add a button to the end of items in a ListView in ReactNative?

This is what I tried but "Show unlinked tags" appears at the bottom, not after the last item.
render() {
return (
<View style={styles.container}>
<Text style={styles.title}> Settings Children </Text>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData)=> <Text>{rowData}</Text>}
/>
<View style={styles.button}>
<Text style={styles.buttonText}>Show unlinked tags</Text>
</View>
</View>
)
}
View image!

you can use renderFooter to render view after your list.
renderFooter = () => {
return (
<View style={styles.button}>
<Text style={styles.buttonText}>Show unlinked tags</Text>
</View>
)
}
render() {
return (
<View style={styles.container}>
<Text style={styles.title}> Settings Children </Text>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData)=> <Text>{rowData}</Text>}
renderFooter={this.renderFooter}
/>
</View>
)
}

TLDR: React native doesn't provide a button component, use this https://github.com/ide/react-native-button
Full:
npm install react-native-button --save
then use it as
import React, { Component } from 'react';
import Button from 'react-native-button';
export default class ExampleComponent extends Component {
constructor(props, context) {
super(props, context);
// ...
}
_handlePress() {
console.log('Pressed!');
}
render() {
return (
<View>
<View>
<ListView
dataSource={ this.state.dataSource }
renderRow={ (rowData) => <Text>
{ rowData }
</Text> } />
</View>
<View>
<Button
style={ { fontSize: 20, color: 'green' } }
styleDisabled={ { color: 'red' } }
onPress={ () => this._handlePress() }>
Press Me!
</Button>
</View>
</View>
);
}
}