We Keep Coding

how to handle images from API in a swiper

I installed react-native-swiper and I swipe 3 full screen views and everything is okay, but I have to swipe images from an API, I'll receive images from an API. I dont know how to display it, because the number of images will change everytime I can't put my images in my project
I have to utilize flatList in one view or what ?
return (
<View style={styles.container}>
<Swiper autoplay={true} loop={true} style={styles.wrapper} showsButtons={true}>
<View style={styles.slide1}>
<Text style={styles.text}>Dima Arcol 1</Text>
</View>
<View style={styles.slide2}>
<Text style={styles.text}>Dima Arcol 2</Text>
</View>
<View style={styles.slide3}>
<Text style={styles.text}>Dima Arcol 3</Text>
</View>
</Swiper>
<View style={styles.myButtunContainer}>
<MyLButton/>
</View>
</View>
);

You can iterate over your data using map.
lets say your data is
data = [
{
text: 'imageheading',
image: 'yoururl'
},
...
];
return (
<View style={styles.container}>
<Swiper autoplay={true} loop={true} style={styles.wrapper} showsButtons={true}>
{this.data.map((data) => {
return(
<View style={styles.slide3}>
<Text style={styles.text}>{data.text}</Text>
<Image src={{ uri: data.image }}/>
</View>
);
})}
</Swiper>
<View style={styles.myButtunContainer}>
<MyLButton/>
</View>
</View>
);

How to Integrate react-native-swiper using flatlist

I was trying to integrate react-native-swiper, which loads videos in it.
I am looking for a way to integrate it with a flat list. but the data is not loading properly, is there any alternative way to load data using flat list (using array.map())
export default class HomeTab extends Component {
render() {
return (
<FlatList
data={Data}
keyExtractor={(item, index) => item.id}
renderItem={({item}) =>
<Swiper style={styles.wrapper}
showsButtons={false}
horizontal={true}
loop={false}
index={item.id}
activeDot={
<View></View>
}
dot={
<View></View>
}
>
<View style={styles.slide1}>
<Video
source={{uri: item.media}} // Can be a URL or a local file.
ref={(ref) => {
this.player = ref
}}
resizeMode={'contain'}
style={styles.backgroundVideo}
/>
</View>
</Swiper>
}
/>
)
}
}
using npm package: react-native-swiper https://www.npmjs.com/package/react-native-swiper

try to use this lib, cause react-native-swiper-flatlist it has flatlist inside
Example below:
<SwiperFlatList
autoplay
autoplayDelay={3}
index={3}
autoplayLoop
data={items}
renderItem={({item}) => // Standard Image
<View style={[styles.child, { backgroundColor: '#000' }]}>
<Image
source={{uri:item.key}}
style={styles.checkoutSliderImage}
/>
<Text>{item.key}</Text>
</View>
}
showPagination
/>

I cannot figure out how to make ListView work properly

I am trying to render a list in React Native, however, nothing ever shows. I am logging the list before render as well and it is showing that the data field is being populated, but nothing is being shown.
This is the ListView code that I am trying that is NOT working.
This is the way that I am currently rendering the list. This method is working for me.
The reason that I want to use ListView instead of the current method that I am using is because I was reading from the documentation that ListView has better properties and performance.
Thank you!

Try destructuring correctly your item in renderItem. I mean:
<FlatList
data={this.state.users}
renderItem={({item}) => {
return (
<View>
<Image source={{uri: item.image}} style={{width: 150, height: 150}} />
<Text>{item.login}</Text>
</View>
)
}}
keyExtractor={(user) => user.id}
/>
Or, if you prefer to call it as info, define a function:
renderItem = (info) => {
return (
<View>
<Image source={{uri: info.image}} style={{width: 150, height: 150}} />
<Text>{info.login}</Text>
</View>
)
}
And call it like
<FlatList
data={this.state.users}
renderItem={({item}) => this.renderItem(item)}
keyExtractor={(user) => user.id}
/>
See more in the offical doc

You need to extract the item property from your data property in the FlatList
<FlatList
data={this.state.users}
renderItem={({item}) => {
return (
<View>
<Image source={{uri: item.image}} style={{width: 150, height: 150}} />
<Text>{item.login}</Text>
</View>
)
}}
keyExtractor={(user) => user.id}
/>
Note {item} in the renderItem callback
Another example
<FlatList
data={this.state.users}
renderItem={(data) => {
return (
<View>
<Image source={{uri: data.item.image}} style={{width: 150, height: 150}} />
<Text>{data.item.login}</Text>
</View>
)
}}
keyExtractor={(user) => user.id}
/>

Pass, Receive, and Use function into child Component

I'm still learning ReactJS / React Native and I'm stuck with a stupid thing I'm sure. Here's my case: I want to receive data in my child component and display it in a Modal. So:
I have a function like this (axios, API, ...):
getProductInfo = (product_id) => {
axios.get(
`API-EXAMPLE`
)
.then((response) => {
this.setState({
isVisible: false,
productInfo: response.data
})
console.log(this.state.productInfo);
})
}
I pass the function to my Child Component with the "onModalPress":
<CatalogList productsList={this.state.displayProducts} onModalPress={this.getProductInfo}/>
And here, some info about the Child Component:
const CatalogList = ({productsList, onModalPress}) => (
<Card containerStyle={styles.container}>
<View style={{ padding:20, margin:0, flexDirection: 'row', flexWrap: 'wrap', flex: 1, justifyContent: 'space-between' }}>
{
productsList.map((p, i) => {
return (
<TouchableHighlight key={i} onPress={() => onModalPress(p.id)}>
<View style={style.card}>
<View style={style.content}>
<View style={{width: 170, zIndex: 2}}>
<Text style={style.name}>{p.id}</Text>
<Text style={style.name}>{p.name}</Text>
<Text style={style.winemaker}>Domaine : {p.domain}</Text>
<Text style={style.winemaker}>Origine : {p.wine_origin}</Text>
<Text style={style.aop}>Appellation : {p.appellation}</Text>
</View>
<Image
style={style.image}
source={{ uri: p.image, width: 140, height: 225, }}
/>
</View>
<View style={style.entitled}>
<Text style={[style.priceText, style.cadetGrey]}>{p.publicPriceText}</Text>
<Text style={style.priceText}>{p.subscriberPriceText}</Text>
</View>
<View style={style.row}>
<Text style={[style.price, style.cadetGrey]}>{p.price} €</Text>
<Text style={style.price}>{p.subscriber_price} €</Text>
</View>
<View style={[{backgroundColor: p.label_colour}, style.label]}>
<Text style={style.labelText}>{p.label}</Text>
</View>
<Modal isVisible={false}>
<View style={{ flex: 1 }}>
{/* <Text>{productInfo.rewiew_wine_waiter}</Text> */}
</View>
</Modal>
</View>
</TouchableHighlight>
);
})
}
</View>
</Card>
);
The "p.id" comes from another data (productList) that I get with another Axios API Call. With "p.id" I get the product_id I need in my function
getProductInfo
Everything works and I display the info inside my console.log (this.state.productInfo).
My issue and I think is easy... It's how can I "store/stock" this info I have in the console.log in a const/props to use it in my Modal and call it like in this example:
<Modal isVisible={false}>
<View style={{ flex: 1 }}>
<Text>{productInfo.rewiew_wine_waiter}</Text>
</View>
</Modal>
Of course, any other advice is welcome!

React is all about one-way data flow down the component hierarchy
Let's assume that you have a Container component that fetch all the data:
class MyContainer extends Component{
state = {
myItensToDisplay: []
}
componentDidMount(){
//axios request
.then(res => this.setState({myItensToDisplay: res.itens}))
}
}
Looking good! Now you have all the data you want to display fetched and stored in your container's state. Let's pass it to a Itemcomponent:
class MyContainer extends Component{
// All the code from above
render(){
const itens = this.state.myDataToDisplay.map( item =>{
return(<Item name={item.name} price={item.price} />);
})
return(
<div>
{itens}
</div>
)
}
}
Now you are fetching all the data you want to display in a parent component and distributing that data to it's childrens via props.

React Native Navigation set image name with navigation.getParam()

My frist question on Stackoverflow :)
I'am using React Navigation. How can i load a image by the value of navigation.getParam('Country')?. This Image isn't loading (error code 500)
constructor(props) {
super(props);
this.state = { isLoading: true}
const { navigation } = this.props;
this.number = navigation.getParam('number');
this.country = navigation.getParam('country');
}
return (
<View style={bubble.container}>
<Text>{this.country}</Text>
<Image source={require('./img/flags/'+ this.country +'.png')} style={{width: 30, height: 30}}/>
<FlatList
data={this.state.dataSource}
renderItem={({item}) => <View style={bubble.wrapper}>
<Text selectable>{item.text}</Text>
<View style={bubble.footer}>
<View style={{flex: 1}}>
<Text style={bubble.sender}>{item.sender}</Text>
</View>
<View style={{flex: 1}}>
<Text style={bubble.time}><TimeAgo time={item.datetime} interval={20000}/></Text>
</View>
</View>
</View>}
/>
</View>
);

First of all, make sure your img is available in your path of the JS code,
assume your file of the js code is Country.js, so, the structure of your folder should be :
--Country.js (File)
--img (folder)
--flags (folder)
--country.png (an image)
and then, try to change your code look's like this:
render(){
const {country} = this.props.navigation.state.params
return (
<View style={bubble.container}>
<Text>{country}</Text>
<Image source={require('./img/flags/'+ country +'.png')} style={{width: 30, height: 30}}/>
<FlatList
..your setting
/>
</View>
)
}
Don't need to declare the params in constructor, you can declare the param of React Navigation in componentDidMount()/componentWillMount()/ even in render(){}

I have load my image by URL
<Image source={{uri: 'http://192.168.1.222/img/'+ countryvar + '.png'}} style={{width: 30, height: 30}}/>