react-native-stateview

1.1.5 • Public • Published

react-native-stateview

A react native wrapper view to add loading, content, error and placeholder states to your component

        

Expo

Try it out on expo. Just download the expo app, scan code and you are good to go.

Installation

Using npm:

npm i --save react-native-stateview

Using yarn:

yarn add react-native-stateview

Usage

You can wrap your view in StateView to give states to it. The StateView has with 4 states: loading, content, placeholder and error.

Import react-native-keyboard-aware-scroll-view and wrap your content inside it:

import StateView from 'react-native-stateview'
<StateView>
    <View>
        // ...
    </View>
</StateView>

There are some props which you can use to configure the StateView, as given below in API section, but all of them are optional.

API

Props

Generic Props

Prop Type Defaults Description
containerStyle PropTypes.object {} Style of container view
state PropTypes.oneOf([StateView.State.loading, StateView.State.placeholder, StateView.State.error, StateView.State.content]) StateView.State.loading The state of StateView.
color PropTypes.string '#000' A general tint color for all views.
imageStyle PropTypes.object {} Styles for image of placeholder and error view. Overrides the default styles.
titleStyle PropTypes.object {} Styles for title of loading, placeholder and error view. Overrides the default styles.
bodyStyle PropTypes.object {} Styles for body of placeholder and error view. Overrides the default styles.
buttonStyle PropTypes.object {} Styles for button of placeholder and error view. Overrides the default styles.
buttonTextStyle PropTypes.object {} Styles for button text of placeholder and error view. Overrides the default styles.

Loading View Props

Prop Type Defaults Description
loadingView PropTypes.element undefined A custom loading view.
loadingTitle PropTypes.string '' The title for the default loading view.
loadingTitleStyle PropTypes.object {} Styles for title of loading view. Overrides the titleStyle and default styles.

Placeholder View Props

Prop Type Defaults Description
placeholderView PropTypes.element undefined A custom placeholder view
placeholderImageRes PropTypes.number.isRequirednumber - Image resource id of the placeholder view image
placeholderTitle PropTypes.string '' Title text of the placeholder view
placeholderBody PropTypes.string '' Body text of the placeholder view
placeholderButtonText PropTypes.string '' Action button text of the placeholder view
placeholderButtonAction PropTypes.func () => {} Function that is executed when the placeholder view button is clicked. The button is not rendered if this is null or undefined
placeholderImageStyle PropTypes.object {} Styles for image of placeholder view. Overrides the imageStyle and default styles.
placeholderTitleStyle PropTypes.object {} Styles for title of placeholder view. Overrides the titleStyle and default styles.
placeholderBodyStyle PropTypes.object {} Styles for body of placeholder view. Overrides the bodyStyle and default styles.
placeholderButtonStyle PropTypes.object {} Styles for button of placeholder view. Overrides the buttonStyle and default styles.
placeholderButtonTextStyle PropTypes.object {}

Error View Props

Prop Type Defaults Description
errorView PropTypes.element undefined A custom error view
errorImageRes PropTypes.number.isRequirednumber - Image resource id of the error view image
errorTitle PropTypes.string '' Title text of the error view
errorBody PropTypes.string '' Body text of the error view
errorButtonText PropTypes.string '' Action button text of the error view
errorButtonAction PropTypes.func () => {} Function that is executed when the error view button is clicked. The button is not rendered if this is null or undefined
errorImageStyle PropTypes.object {} Styles for image of error view. Overrides the imageStyle and default styles.
errorTitleStyle PropTypes.object {} Styles for title of error view. Overrides the titleStyle and default styles.
errorBodyStyle PropTypes.object {} Styles for body of error view. Overrides the bodyStyle and default styles.
errorButtonStyle PropTypes.object {} Styles for button of error view. Overrides the buttonStyle and default styles.
errorButtonTextStyle PropTypes.object {} Styles for button text of error view. Overrides the buttonTextStyle and default styles.

Usage

A StateView with some styles overridded looks something like this:

<StateView
    style={styles.container}
    state={this.state.state}
    color="#5430EC"
 
    imageStyle={{
        width: 100,
        height: 100,
    }}
    placeholderTitleStyle={{
        color: '#5430EC',
        fontSize: 30
    }}
    buttonStyle={{
        borderRadius: 100,
        shadowColor: '#333',
        shadowOpacity: .6,
        shadowOffset: {
            width: 0,
            height: 3
        }
    }}
 
    loadingView={(
        <View>
            <ActivityIndicator
                color="#24B32D"
                size="large"/>
            <Text style={{
                fontSize: 20,
                textAlign: 'center',
                marginTop: 20,
                color: '#24B32D',
                fontWeight: 'bold'
            }}>
                Let me see what's cooking...
            </Text>
        </View>
    )}
 
    placeholderImageRes={require("./icons/ic_pizza.png")}
    placeholderTitle="We're all out!"
    placeholderBody={`It looks like we all out of dishes.\nCome back tomorrow for a nice slice of pizza!`}
    placeholderButtonText="How about now?"
    placeholderButtonAction={() => this._handleRefresh(0)}
 
    errorImageRes={require("./icons/ic_salt.png")}
    errorTitle="Eh?! This shouldn't be happening"
    errorBody="Don't get so salty. We're working on it!"
    errorButtonText="FIX IT NOW!"
    errorButtonAction={() => this._handleRefresh(0)}
    errorTitleStyle={{
        color: '#E83F6F',
        fontSize: 25
    }}
    errorBodyStyle={{
        color: '#E83F6F',
        marginTop: 10,
        fontSize: 15
    }}
    errorButtonStyle={{
        backgroundColor: '#E83F6F'
    }}
    errorButtonTextStyle={{
        color: '#fff2f6'
    }}
    >
 
    // ... your content view goes here
 
    </StateView>

This does look cluttered but StateView has some decent styles for every component and in most cases you should be good to go by just setting color prop to your app's primary color, along with the title, body, button text and it's action. But if you do prefer styling it completely, we recommend you create a component which wraps the StateView and sets all the styles so you don't have to do it everywhere manually.

License

MIT.

/react-native-stateview/

    Package Sidebar

    Install

    npm i react-native-stateview

    Weekly Downloads

    2

    Version

    1.1.5

    License

    MIT

    Unpacked Size

    2.08 MB

    Total Files

    64

    Last publish

    Collaborators

    • dp-singh
    • prithvibhola08
    • sourabhv