A React Native component based on FlatList that provides an option to display different views for each of its states (empty datasource, error, loading).
$ npm install --save @ingenuity-labs/react-native-stateful-table-viewThe packages consists of various components that users can utilize to make the most of this package:
- StatefulTableView
- StatefulTableViewConstants
- StatefulTableInfoView
- StatefulTableErrorView
- StatefulTableLoadingView
Using all of these components is the recommended approach, although the last three props can be omitted to allow users to provide their own state views.
The actual table view component that utilizes a FlatList component in the hood. What makes it different from a regular FlatList is that it also handle several conditions to display different views for each of its state.
It has several required props needed to be supplied in order for the component to work:
data- Refers to the actual dataset to be fed to the FlatList.keyExtractor- Function to define the key to be used for each FlatList item.renderItem- Function to configure component to be used for displaying each row.state- The current state of the component.
Example of its usage (without any kind of customization):
<StatefulTableView
data={['Item 1', 'Item 2']}
keyExtractor={this.keyExtractor}
renderItem={this.renderItem}
state={StatefulTableViewConstants.States.DATA}
/>
These other props will allow users to further customize this component:
emptyStateView- Providing a component to this prop will override the default empty state view, thus, displaying the provided component instead for an empty state.errorStateView- Providing a component to this prop will override the default error state view, thus, displaying the provided component instead when resulting to an error state.loadingStateView- Providing a component to this prop will override the default loading state view, thus, displaying the provided component instead when loading of dataset is ongoing.refreshControl- ARefreshControlcomponent which will enable pull-to-refresh functionality when provided.separator- A component which will serve as the separator for each row.
Dictionary containing the states that the StatefulTableView will recognize in order to display its corresponding state view.
States: {
LOADING: 0,
DATA: 1,
ERROR: {
SERVER: -1,
INTERNET_CONNECTION: -2
},
}
LOADING- Refers to the state in which the process of fetching the dataset is currently ongoing.DATA- Refers to the state in which the fetching of the dataset has either resulted in an empty dataset or has actual content.ERROR- Further divided intoSERVERandINTERNET_CONNECTION. The former can be used when fetching of data from an API or other similar platform results in a error, while the latter is if the fetching of data was disrupted by an internet connection problem.
One of the 3 state views, the StatefulTableInfoView serves as a generic state view, wherein you can provide any information not necessarily tied in to a specific state. By default, it defaults to an empty state view.
With its default implementation (not supplying any props) will display a "No data available" text intended as a default value for empty states. Providing values to these following props will allow this component to better cater user needs:
headerText(required) - The primary text to be displayed in the view.customStyle- AStyleSheetobject to customize the appearance of theheaderText,detailText, andcontainer.
A sample customStyle looks like this:
let padding = 10;
let customStyle = {
container: {
// Your style here
},
detailText: {
// Your style here
},
headerText: {
// Your style here
},
};
detailText- The supplementing information to be displayed in the view.imageDetails- A dictionary supplying values forImagecomponent's props. Not providing the values for the style prop will use the default styling for the image provided by this package.
A full implementation of this component looks like this:
<StatefulTableInfoView
headerText='No data fetched'
detailText='Please try again later.'
imageDetails={{
source: require('./empty.png'),
// Optional
style: {
// Your style here
}
}}
customStyle={customStyle}
/>
Another of the three state views, the StatefulTableErrorView serves as a state view specific for error states.
Unlike the previous state view, this has a required prop, state, which defines as to what default message it should display. "No internet connection." text is displayed for the INTERNET_CONNECTION error, and "An error occured." for the SERVER error.
Providing values to these following props will allow this component to better cater user needs:
customStyle- AStyleSheetobject to customize the appearance of theheaderText,detailText, andcontainer.
See customStyle in StatefulTableInfoView for a sample guide.
detailText- The supplementing information to be displayed in the view.headerText(required) - The primary text to be displayed in the view.imageDetails- A dictionary supplying values forImagecomponent's props. Not providing the style prop will use the default styling for the image provided by this package.errorButtonDetails- A dictionary supplying values for the customErrorButtoncomponent's props bundled in this package. Providing a value for this prop will enable a button to be displayed in the view, which can be further customized by the user.
errorButtonDetails={{
onPress: () => {
this.setState({
tableViewState: StatefulTableViewConstants.States.LOADING
});
this.fetchJokes();
},
// Optional
title: 'Reload',
// Optional
customStyle: {
title: {
// Your style here
},
view: {
// Your style here
}
}
}}
For the button to have any functionality, the onPress prop must be provided. This is where you will put the function you want to be executed when the button is pressed.
title refers to the title of the button, and supplying any value defaults the button to have "Retry" as its title.
Provide a value to the customStyle prop if you want to further customize the appearance of the button.
A full implementation of this component looks like this:
<StatefulTableErrorView
headerText='Error'
detailText='Cannot complete request. Please try again later.'
state={StatefulTableViewConstants.States.ERROR.SERVER}
imageDetails={{
source: require('./empty.png'),
style: {
// Your style here
}
}}
errorButtonDetails={{
onPress: () => {
console.log('Clicked')
},
// Optional
title: 'Reload',
// Optional
customStyle: {
view: {
// Your style here
}
}
}}
customStyle={customStyle}
/>
Lastly, the StatefulTableLoadingView is specifically built for the loading state.
With its default implementation (not supplying any props) will display a "Loading..." text with a default activity indicator. Providing values to these following props will allow this component to better cater user needs:
activityIndicatorDetails- A dictionary supplying values forActivityIndicatorcomponent's props. Not providing the style prop will use the default styling for the activity indicator provided by this package.customStyle- AStyleSheetobject to customize the appearance of theheaderText,detailText, andcontainer.detailText- The supplementing information to be displayed in the view.hasActivityIndicator- Visibility of the activity indicator. Defaults totrue.headerText- The primary text to be displayed in the view.
A full implementation of this component looks like this:
<StatefulTableLoadingView
headerText='Processing...'
detailText='This may take a while'
activityIndicatorDetails={{
// Optional
color: 'black',
// Optional
style: {
// Your style here
}
}}
customStyle={customStyle}
/>
- Fork repository
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request
MIT