Retrieve a list of products and display them - react-native

Question

I am trying to retrieve a list of products from my API. For the moment, nothing is displayed, the page is currently empty except for my back button and I do not understand why. The two functions I use are functional since both console.log works. Could you help me ?
Everything looks fine, the console.log work in the terminal but I can't display anything in the app.
I tried this snack : https://snack.expo.io/O4oPj8-Qz
const Item = ({ item, onPress, style }) => (
<TouchableOpacity onPress={onPress} style={[styles.productItem, style]}>
<Text style={[styles.h4, {textAlign: "left"}]}>
{item.name}
</Text>
</TouchableOpacity>
);
export default class Products extends Component {
constructor(props) {
super(props);
this.state = {
selectedId: '',
setSelectedId: '',
listData: '',
currentPage: 1,
loadMoreVisible: true,
loadMoreVisibleAtEnd: false,
displayArray: null
}
};
initListData = async () => {
let list = await getProducts(1);
console.log(list)
if (list) {
this.setState({
displayArray: list,
loadMoreVisible: (list.length >= 15 ? true : false),
currentPage: 2
});
}
};
setNewData = async (page) => {
let list = await getProducts(parseInt(page));
if (list) {
this.setState({
displayArray: this.state.displayArray.concat(list),
loadMoreVisible: (list.length >= 15 ? true : false),
loadMoreVisibleAtEnd: false,
currentPage: parseInt(page)+1
});
}
};
loadMore() {
this.setNewData(this.state.currentPage);
}
displayBtnLoadMore() {
this.setState({
loadMoreVisibleAtEnd: true
});
}
async UNSAFE_componentWillMount() {
this.initListData();
}
render() {
return (
<View>
{this.state.displayArray !== null && this.state.displayArray.length > 0 ? (
<View style={{ flex: 1, marginBottom: 100 }}>
<SafeAreaView style={styles.container}>
<FlatList
data={this.state.displayArray}
extraData={this.selectedId}
onEndReached={() => this.displayBtnLoadMore()}
renderItem={({item})=>
<View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
<Item
item={item}
onPress={() => this.props.navigation.navigate('ProductDetails', {productId: parseInt(item.id)})}
/>
</View>
}
keyExtractor={item => "product-" + item.id.toString()}
style={{width:"90%"}}
/>
{this.state.loadMoreVisible === true && this.state.loadMoreVisibleAtEnd === true ? (
<Button title=" + " onPress={()=>{this.loadMore()}}></Button>
) : null
}
<View style={styles.container}>
<Text>{"\n"}</Text>
<TouchableOpacity
style={styles.touchable2}
onPress={() => this.props.navigation.goBack()}
>
<View style={styles.view2}>
<Text style={styles.textimg2}>
back
</Text>
</View>
</TouchableOpacity>
</View>
<Text>{"\n\n"}</Text>
</SafeAreaView>
</View>
) : (
<View style={styles.container}>
<Text>{"\n\n" + (this.state.displayArray === null ? i18n.t("products.searching") : i18n.t("products.nodata")) + "\n\n\n"}</Text>
<TouchableOpacity
style={styles.touchable2}
onPress={() => this.props.navigation.goBack()}
>
<View style={styles.view2}>
<Text style={styles.textimg2}>
Back
</Text>
</View>
</TouchableOpacity>
</View>
)}
</View>
);
};
}

Answer 1

You were not adding flex: 1 and also not calling the API in the right way, here is the snack with the solution.
Link to snack

Answer 2

Thanks to your answers and help. I got it work this way : Thank you so much for yout time and help, really, sincerely.
import React, { Component } from "react";
import { FlatList, SafeAreaView, Button, Text, View, TouchableOpacity } from 'react-native';
import { getProducts } from '../../../src/common/Preferences';
import styles from '../../../assets/styles';
import i18n from '../../../src/i18n';
const Item = ({ item, onPress, style }) => (
<TouchableOpacity onPress={onPress} style={[styles.productItem, style]}>
<Text style={[styles.h4, {textAlign: "left"}]}>
{item.name}
</Text>
</TouchableOpacity>
);
export default class Products extends Component {
constructor(props) {
super(props);
this.state = {
selectedId: '',
setSelectedId: '',
listData: '',
currentPage: 1,
loadMoreVisible: true,
loadMoreVisibleAtEnd: false,
displayArray: []
}
};
initListData = async () => {
let list = await getProducts(1);
if (list) {
this.setState({
displayArray: list,
loadMoreVisible: (list.length >= 15 ? true : false),
currentPage: 2
});
console.log(this.state.displayArray, 'dans initListData')
}
};
setNewData = async (page) => {
let list = await getProducts(parseInt(page));
if (list) {
this.setState({
displayArray: this.state.displayArray.concat(list),
loadMoreVisible: (list.length >= 15 ? true : false),
loadMoreVisibleAtEnd: false,
currentPage: parseInt(page)+1
});
}
};
loadMore() {
this.setNewData(this.state.currentPage);
}
displayBtnLoadMore() {
this.setState({
loadMoreVisibleAtEnd: true
});
}
async UNSAFE_componentWillMount() {
this.initListData();
console.log(this.state.displayArray, 'dans componentWillMount')
}
render() {
console.log('displayArray', this.state.displayArray)
return (
<View style={{flex: 1}}>
<Text>{"\n"}</Text>
<Text>{"\n"}</Text>
{this.state.displayArray !== null && this.state.displayArray.length > 0 ? (
<View style={{ flex: 1, marginBottom: 100 }}>
<SafeAreaView style={styles.container}>
<FlatList
data={this.state.displayArray}
//extraData={this.selectedId}
//onEndReached={() => this.displayBtnLoadMore()}
renderItem={({item})=>
<View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
<Item
item={item}
onPress={() => this.props.navigation.navigate('ProductDetails', {productId: parseInt(item.id)})}
/>
</View>
}
keyExtractor={item => "product-" + item.id.toString()}
style={{width:"90%"}}
/>
{this.state.loadMoreVisible === true && this.state.loadMoreVisibleAtEnd === true ? (
<Button title=" + " onPress={()=>{this.loadMore()}}></Button>
) : null
}
<View style={styles.container}>
<Text>{"\n"}</Text>
<TouchableOpacity
style={styles.touchable2}
onPress={() => this.props.navigation.goBack()}
>
<View style={styles.container}>
<Button
color="#F78400"
title= 'Back'
onPress={() => this.props.navigation.goBack()}>BACK
</Button>
</View>
</TouchableOpacity>
</View>
<Text>{"\n\n"}</Text>
</SafeAreaView>
</View>
) : (
<View style={styles.container}>
<Text>{"\n\n" + (this.state.displayArray === null ? i18n.t("products.searching") : i18n.t("products.nodata")) + "\n\n\n"}</Text>
<Button
color="#F78400"
title= 'Back'
onPress={() => this.props.navigation.goBack()}>BACK
</Button>
</View>
)}
</View>
);
};
}