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}`}} />
Related
I'm making an app with expo react native, and I made a collapse that shows profile information about all users on my SQLite database.
I added a button (touchableopacity) inside the collapse and my idea is to edit information in the input where I'm showing information, but i don't know how to link the button press to the profile where is being touched.
so my code is as follows (i deleted styles to make it cleaner to see):
render(){
const miLista = this.state.datos.map((item) => //this is "list" and it works(show information of each profile and shows the button of each profile when i open the collapse of each on of them)
<ScrollView style={styles.container}>
<Collapse>
<CollapseHeader>
<Text>{item.id} {item.nombre}</Text> //here shows id and name (from sqlite data)
</CollapseHeader>
<CollapseBody >
<View key={item.id} >
<Text >Nombre</Text>
<TextInput
value={item.nombre}
onChangeText={(val) => this.setState({ nombre: val})}/>
<Text style=>Rut</Text>
<TextInput
value={item.rutPersona}
onChangeText={(val) => this.setState({ rutPersona: val})}/>
<Text >Clave</Text>
<TextInput
value={item.clave}
onChangeText={(val) => this.setState({ clave: val})}/>
{this.boton(item.id)}
</View>
</CollapseBody>
</Collapse>
</ScrollView>
);
return(
<View >
<SafeAreaView >
<TouchableOpacity
onPress={() => this.props.navigation.openDrawer()}>
<FontAwesome5 name="bars" size={24} color="#161924"/>
</TouchableOpacity>
</SafeAreaView>
<Text>Perfiles</Text>
<ScrollView>
{miLista}
</ScrollView>
</View>
);
};
so i needed to add .bind to the onpress of my button and pass the data: like this
boton(id,nombre,rutPersona,clave){
return(
<TouchableOpacity
key={id}
style={styles.boton}
onPress={this.funcionBoton.bind(this,nombre,rutPersona,clave,id)}
>
<Text>SAVE </Text>
</TouchableOpacity>
);
};
I have a react native app that is retrieving APIs.
However, instead of retrieving from item[0] to item[93], I wanted to reverse it so that it presents the data from item[93] at the top, followed by item[92], etc.
Hence, I tried to include this in my flatlist:
inverted={true}
However, in doing so, when i load the app, it will still load from [0], but keep including the next items above it over and over.
How do I also load the info from item[93] to item[0]?
Thanks so much!
My flatlist looks like that:
return (
<View style={styles.background}>
<FlatList
data={this.state.dataSource}
keyExtractor={this._keyExtractor}
inverted={true}
renderItem={({ item }) => (
<Card>
<CardItem>
<View style={styles.container}>
<Image style={styles.profilepic}
source={{
uri: item.links.mission_patch
// from API docs
}}
/>
</View>
<View style={styles.userinfo}>
<Text style={styles.content}>
Flight Number: {item.flight_number}
Mission Name: {item.mission_name}
{item.details}
</Text>
</View>
</CardItem>
</Card>
)}
/>
</View>
);
}
}
You can try the Array.reverse() like so:
<FlatList
data={this.state.dataSource.reverse()}
//
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}
I want to use a WebView to display a youtube playlist whenever I click on a image. But I can't manage to display the WebView, only a blank white page. Here is the code :
showBelier(){
this.setState({ishowing:true});
return(
<WebView
javaScriptEnabled={true}
domStorageEnabled={true}
source={{ uri: "https://www.youtube.com/watch?v=WiOKM4SvC5U&list=PLSlVQ0kIy6qx3s6EHtgStY2kzVfXKwuFD" }}
/>
)}
<View style = {{flexDirection: 'row', justifyContent:'space-between', position:'relative'}}>
<TouchableOpacity onPressIn={() => this.setState({belier: !this.state.belier})} onPress={()=> this.showBelier()}>
<Image style = {styles.image} source={ this.state.belier === true ? require("../Images/couleurs/icons8-belier-100.png")
: require("../Images/gris/beliergris.png")}/>
</TouchableOpacity>
</View>
Thanks in advance !
If you have a render method like showBelier inside another function of an element it won't be visible. Please include the method inside your render like this:
<View>
<TouchableOpacity onPress={() => this.setState({belier: !this.state.belier})}}>
....
</TouchableOpacity>
{this.showBelier()}
</View>
And adjust your method like this:
showBelier(){
if(this.state.belier) {
return(
<WebView
javaScriptEnabled={true}
domStorageEnabled={true}
source={{ uri: "https://www.youtube.com/watch?v=WiOKM4SvC5U&list=PLSlVQ0kIy6qx3s6EHtgStY2kzVfXKwuFD" }}
/>
)}
}
I am doing react native application. In that, One screen have custom tabs in centre of the screen.
My screen is like,
top view around 200px height with some text lines showing.
After that, Custom tabs as picture attached.
After that, I am showing for first tab on tap flat list data.
I have checked online forums and tutorials, According to tab bar, We can show either top or bottom screen with tabs.
But, How to show tabs with customisation like my requirement.
I have 4 tabs, and each tab has same top view which I mentioned in above (some text lines), And if I tap on each tab, different data bottom page should show.
Like,
First tab with some flat list,
second tab with some text lines,
likewise all tabs has different layout in bottom screen.
As I am very new to react native. How to achieve this?
Due to privacy policy, I am unable to post complete screenshot.
Here is my code.
Screen.js
onClickTelugu = () => {
alert("you clicked onClickTelugu")
}
onClickTamil = () => {
alert("you clicked onClickTamil")
}
onClickHindi = () => {
alert("you clicked onClickHindi")
}
onClickEnglish = () => {
alert("you clicked onClickEnglish");
}
render(item) {
return (
<View style={styles.container}>
<View style ={styles.Container}>
<Text style={styles.textStyle}>
Some Text
</Text>
<View style={styles.somestyles}>
<TouchableOpacity onPress={this.onClick}>
<Image
style={styles.somestyles}
source={MenuImage}
/>
</TouchableOpacity>
<TouchableOpacity onPress={this.onClick}>
<Image
style={styles.menuIcon}
source={MenuImage}
/>
</TouchableOpacity>
</View>
</View>
<View style ={styles.somestyles}>
<View style={styles.somestyles}>
<Text style= {styles.somestyles}>
Some Text
</Text>
<Text style= {styles.somestyles}>
Some Text
</Text>
<Text style= {styles.somestyles} >
<Text style= {styles.somestyles}>
Some Text
</Text>
<Text style ={styles.somestyles}>
Some Text
</Text>
</Text>
</View>
<View style={styles.somestyles}>
<Text style={styles.somestyles}>some text</Text>
<Text style={styles.somestyles} >some text</Text>
<Text style={styles.somestyles}>date</Text>
<Text style={styles.somestyles}>some other date</Text>
</View>
</View>
</View>
<View style = {styles.tabContainer}>
<View style ={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={this.onClickTelugu}>
<Image
style={styles.tabItemsImages}
source={image}
/>
</TouchableOpacity>
<Text style={styles.tabTextItems} onPress={this.onClickTelugu}>Telugu</Text>
</View>
<View style={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={this.onClickTamil}>
<Image
style={styles.tabItemsImages}
source={image}
/>
</TouchableOpacity>
<Text style={styles.tabTextItems} onPress={this.onClickTamil}>Tamil</Text>
</View>
<View style={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={this.onClickHindi}>
<Image
style={styles.tabItemsImages}
source={image}
/>
</TouchableOpacity>
<Text style={styles.tabTextItems} onPress={this.onClickHindi}>Hindi</Text>
</View>
<View style={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={this.onClicEnglish}>
<Image
style={styles.tabItemsImages}
source={image}
/>
</TouchableOpacity>
<Text style={styles.tabTextItems} onPress={this.onClicEnglish}>English</Text>
</View>
</View>
<View style = {styles.flatListContainer}>
<FlatList style = {styles.flatList}
showsVerticalScrollIndicator = {true}
data = {this.state.dataArray}
renderItem = {({item}) => (
<TouchableWithoutFeedback onPress={ () => this.flatListItemHandler(item)}>
<Image
style={styles.flatListArrowImage}
source={image}
/>
</View>
<View style={styles.flatListItemInsideSeparator}>
)
}
ItemSeparatorComponent = {() => (
<View style={{height:15, backgroundColor:'#F8F8F8'}}/>
)}
/>
</View>
</View>
);
}
}
And I have to show overlay tab images too. If 1st tab tapped, 2,3,4
tabs images should be like delighted images. Like
highlighted/delighted images.
Ok you need to give this component it's own state to keep track of what you want to show in the lower section. then you should replace all of your onClick events with just one onClick event that you pass different languages to. For Example this.onClickTelugu becomes () => this.onClick('telugu'), then your onClick event should be:
onClick = (language) => {
this.setState({selectedLanguage: language})
}
then in your renderBottomContent function, you can render different things depending on what this.state.selectedLanguage is.
something like...
class MyComponent extends Component {
constructor(props) {
super(props)
this.state = { selectedLanguage: null}
}
onClick = (language) => {
this.setState({selectedLanguage: language})
}
renderBottomContent = () => {
const {selectedLanguge} = this.state
switch(selectedLanguage) {
case "telugu":
return <View><Text>Telugu</Text></View>
case "tamil":
return <View><Text>Tamil</Text></View>
case "hindi":
return <View><Text>Hindi</Text></View>
case "english":
return <View><Text>English</Text></View>
default:
return <View><Text>No Language Selected...</Text></View>
}
}
render() {
...
<View style ={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={() => this.onClick('telugu')}>
<Image style={styles.tabItemsImages} source={image} />
<Text style={styles.tabTextItems}>
Telugu
</Text>
</TouchableOpacity>
</View>
<View style ={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={() => this.onClick('tamil')}>
<Image style={styles.tabItemsImages} source={image} />
<Text style={styles.tabTextItems}>
Tamil
</Text>
</TouchableOpacity>
</View>
...
// after all the other tab buttons, render bottom content depending on the component state
{this.renderBottomContent()}
}
}