React-native-stateview NPM

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`	`{}`		Styles for button text of placeholder view. Overrides the `buttonTextStyle` and default styles.

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.