Retrieve data from screen to screen in react native - react-native

Im sending the data "item.email" from screen X to screen HomeParent
How can I retrieve the data in the HomeParent screen?
renderItem=(item,index)=>{
return(
<View style={styles.listItemContainer}>
<TouchableOpacity onPress={()=>this.props.navigation.navigate("HomeParent",item.email)}>
<View style={styles.listItemTitleContainer}>
<Text>Hello</Text>
</View>
</TouchableOpacity>
</View>
)
}


Pass it as a object field
<TouchableOpacity onPress={()=>this.props.navigation.navigate("HomeParent",{mail:item.email})}>
and use getParam like this,
const email = this.props.navigation.getParam('mail')

Related

How to make sticky footer with react native scrollview?

I Had this code with sticky component on the header, how can i move this to the bottom, like footer button on instagram (when you open the app, it already stick in the bottom) ? here's my code
function MyApp() {
return (
<ScrollView
stickyHeaderIndices={[0]}
showsVerticalScrollIndicator={false}>
<View>
<MyStickyFooter/>
</View>
<View>
<Text> Hello world </Text>
<Text> 3000 long lorem word </Text>
</View>
</ScrollView>)}
const MyStickyFooter = () => {
return (
<View style={{}}>
<Button> I am a sticky footer </Button>
</View>
)};

You should move out the MyStickyFooter component from your ScrollView.
You should have something like this:
<View style={....}>
<ScrollView>
... components
</ScrollView>
<MyStickyFooter/>
</View>

react native passing data to other screen

I am new to react native .what I want is that in my app there is many images in each menu .when I click on the image I want to view the image in the screen size .the thing is when I click on every image I want it to Direct to a single page and call the image from there ..how is it possible to pass image variable from different pages to a single page..the so far did image view single page render is like below:,when the image component is did so it only views the first image not the other .what is the solution?
render() {
this.state.incident = this.props.navigation.getParam('incidents','hi!!');
this.state.tenantattachedagreement = this.props.navigation.getParam('tenantattach','hi!!!')
// this.state.residents = this.props.navigation.getParam('residents','');
// this.state.tenantattachedagreement = this.props.navigation.getParam('attachedagreement','');
// console.log("attached agreement",this.state.tenantattachedagreement);
// incidents = this.props.navigation.getParam('incidents,'');
// console.log("hello",attached);
// console.log("l&f pic",this.state.lostfound);
console.log("incidentpic",this.state.incident);
console.log("tenantattach",this.state.tenantattachedagreement);
// console.log("residents",this.state.residents);
return (
<View style={{flex:1}}>
<StatusBar
barStyle = "light-content"
hidden = {false}
backgroundColor = "#32ACFD"
translucent = {false}
networkActivityIndicatorVisible = {true}
/>
<View style={{flexDirection:'row',height:50,width:'100%',justifyContent:'center',alignItems:'center',backgroundColor:'#32ACFD',elevation:5,borderBottomWidth:1,borderColor:'#5b9bd5'}}>
<TouchableOpacity onPress={()=>{this.props.navigation.goBack()}} style={{height:'100%',width:'12%',justifyContent:'center',alignItems:'center'}}>
<Icon name="angle-left" style={{fontSize:25,color:'white'}}/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>{this.props.navigation.navigate('DashBoard')}} style={{width:'33%',height:'100%',justifyContent:'center'}}>
<Text style={{color:'white',fontSize:18,textShadowColor: 'grey',paddingLeft:'5%',fontWeight:'500',fontStyle:'normal',textShadowRadius:5,textShadowOffset: {width: -1, height: 1}}}>Smart Vitae</Text>
</TouchableOpacity>
<View style={{width:'35%',height:'100%',justifyContent:'center',alignItems:'center'}}>
<Text style={{color:'white'}}>Unit: {this.state.unitname}</Text>
</View>
<TouchableOpacity onPress={()=>{this.props.navigation.navigate('Notification')}} style={{width:'10%',height:'100%',justifyContent:'center',alignItems:'center'}}>
<Icon name="bell-o" style={{color:'white',fontSize:22}}/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>{this.props.navigation.navigate('Settings')}} style={{width:'10%',height:'100%',justifyContent:'center',alignItems:'center'}}>
<Icon name="cog" style={{color:'white',fontSize:24}}/>
</TouchableOpacity>
</View>
<View>
<View style={{height:'100%',width:'100%',justifyContent:'center',alignItems:'center',borderColor:'#2E4053'}}>
<Image source={{uri:this.state.residents}} style={{height:'100%',width:'100%'}}></Image>
<Image source={{uri:this.state.lostfound}} style={{height:'100%',width:'100%'}}></Image>
<Image source={{uri:this.state.tenantattachedagreement}} style={{height:'100%',width:'100%'}}></Image>
<Image source={{uri:this.state.incident}} style={{height:'100%',width:'100%'}}></Image>
</View>
</View>
</View>
);
}
}

I believe this is a styling issue, you have multiple images all trying to fill 100%
<Image source={{uri:this.state.residents}} style={{height:'100%',width:'100%'}}></Image>
Try using flex or updating your height, like this:
<Image source={{uri:this.state.residents}} style={{height:'25%',width:'100%'}}></Image>

image passed as props react native not showing

i get image url correct and passed as props but image not showing in my app
main screen
here main screen that render FlatList data = products that include image url and i log that and getting correct but image not showing
const products = useSelector(state => state.products.availableProducts);
return(
<FlatList numColumns ={2}
data={products}
keyExtractor={item => item.id}
renderItem={itemData => (
<ProductItem
image={itemData.item.imageUrl}
title={itemData.item.title}
price={itemData.item.price}
onSelect={()=>{
props.navigation.navigate('detail', {
productId: itemData.item.id,
})
}}
>
</ProductItem>
)}
/>
ProductItem component
<View style={style.product}>
<View style={style.touchable}>
<TouchableCmp onPress={props.onSelect} useForeground>
<View>
<View style={style.imageContainer}>
<Image style={style.image} source={{uri: props.image}} />
</View>
<View style={style.detail}>
<Text style={style.title}>{props.title}</Text>
<Text style={style.price}>{props.price}SDG</Text>
</View>
</View>
</TouchableCmp>
<View style={{marginTop:1}}>{props.delete}</View>
</View>
</View>

¿What properties does the style tag "style.image" have?
There may be a problem with the height or width of the image.

i find the should add http:// to image url because i am not adding when saving data
code will be like
<Image style={styles.image} source=
{{uri:`http://${singleproduct.imageUrl}`}} />

React Native nested Flatlist (horizontal flatlist inside vertical flatlist)

I have a horizontal flatlist inside a vertical flatlist and I want data on the inside flatlist to be provided based on which item of the outer flatlist is being rendered
This is what I have currently:
<FlatList
style={styles.outerFlatlist}
data={this.state.catagories}
renderItem={({item, index})=>{
return (
<View>
<View>
<Text style={styles.catagoryName}>
{item.CategoryName}
</Text>
</View>
<View style={styles.innerFlatlist}>
<FlatList
horizontal={true}
data={this.state.product1}
renderItem={({item, index})=>{
return (
<View
style={styles.productsContainer}>
<View
style={styles.productImage}>
<Image
source={{uri:item.productImage}}
style={styles.image}
resizeMode='contain'>
</Image>
</View>
<View style={styles.productDETAILS}>
<Text
style={styles.productPrice}>R{item.productPrice}
</Text>
<Text
style={styles.productDescription}>
{item.productDecription}
</Text>
</View>
</View>
);
}}/>
</View>
</View>
);
}}/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
With the above code, everything works well except that each category displays the same data (this.state.product1), how can I make the data of the inner flatlist be dependant on the which item on the outer flatlist is displayed?

When you are inside the .map you already are inside the this.state.catagories , but since you always use this.state.product1 for the flatlist2 you will always get the same result because this.state.product1 stays the same.
At flatlist2 change the data to item.products or item.whateverYouNeedHereButArray
<View style={styles.innerFlatlist}>
<FlatList
horizontal={true}
data={item}

componentWillMount doesn't get called again when navigating back to my original component

screen A: calling componentWillMount successfully and then navigating to screen B,
screen B: do some redux changes (that will affect the data in WillMount) and then navigating back to A but componentWillMount doesn't get called and preventing desirable data from appearing on the screen
screen A:
componentWillMount(){
this.props.fetchData();
console.log('fetched')
}
renderItem({item}){
return <Text>{item.name}</Text>
}
render(){
const array = Object.values(this.props.data)
return(
<View style={{flex: 1}}>
<Inline>
<View style={styles.container}>
<View style={styles.headerContainer}>
<Header style={styles.header} HeaderText={'EmployeeList'}
/>
</View>
<TouchableOpacity style={styles.buttonContainer}
onPress={()=> this.props.navigation.navigate('CreateEmp')}
//screen B
>
<Text style={styles.buttonStyle}>Add an Employee</Text>
</TouchableOpacity>
</View>
</Inline>
<FlatList
data={array}
renderItem={this.renderItem}
keyExtractor={array1 => array1.name}
/>
</View>
screen B:
functionOne(){
const {name, phone, createEmployee, shift} = this.props
createEmployee(name, phone, shift)
}
functionTwo(){
this.props.navigation.navigate('EmployeeList')//screen A
}
functionCombined(){
this.functionOne();
this.functionTwo();
}
and calling functionCombined in the class of course

The componentWillMount is executed when the screen is rendered.
However, when navigating to the Navigate command, if the screen is first moved, it is rendered to draw the screen, but if it is already rendered, it is not rendered again.
The function shall be moved using a push commands to run again.
functionTwo(){
this.props.navigation.push('EmployeeList')//screen A
}