What is the best way to deal with empty error message in react native? - react-native

Question

I have to display a error message called "No record available".
This is my scenario : -
API Call {
if (data){
loading == false
}
}
In my component
Render(){
{
data.length > 0 && this.state.loading == false ?
<Flat List/>
: null
}
{
data.length==0 ?
<Text>No Record found</Text>
: null
}
}
My Problem was , my message displays if data not found but it doesn't refresh.
I have to achieve a scenario like this -
when i open or navigate through a page then its first show blank then loader start and after API call if data not found then they display a message.

Answer 1

This is a working example of what you describe. When the component loads the data is empty until your API call runs in componentDidMount. I have emulated the API call with a timeout of 2 seconds. You need to switch out the setTimeout function in apiCall with your own fetch method and set the state in the callback of that function
import React, { Component } from 'react';
import { View, Text } from 'react-native';
class Test extends Component {
state = {
loading: false,
data: [],
};
componentDidMount() {
this.apiCall();
}
apiCall = () => {
this.setState({ loading: true });
setTimeout(() => {
this.setState({
loading: false,
data: ['1', '2', '3'],
});
}, 3000);
};
render() {
if (this.state.loading) return <Text>Loading...</Text>;
if (this.state.data.length === 0) return <Text>No records found</Text>;
return (
<View>
<Text>Records found</Text>
</View>
);
}
}
export default Test;

Answer 2

You can bind your action and reducers data
here this is the example you want
import React, { Component } from 'react';
import {
Text,
View,
Dimensions,
FlatList,
ScrollView,
} from 'react-native';
import { connect } from 'react-redux';
import {showLoading, getProducts} from '../actions/productAction';
import * as Progress from 'react-native-progress';
class Data extends Component {
this.state = {
product: [],
loading: false
};
componentWillMount() {
this.setState({loading: true});
API CALL();
}
render() {
return (
<View>
{this.state.isLoading ?
<View>
<Progress.CircleSnail thickness={5} size={55} color={['#000000', '#000000', '#FFFFFF',]} />
</View>
:
null
}
{this.state.product.length === 0 && <View>
<Text>{"NO PRODUCT"}</Text>
</View>}
<FlatList
data={this.state.product}
/>
</View>
);
}
}
export default Data;