Nefarious Plastic Mannequins

    @tttstudios/react-native-empty-state
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.2 • Public • Published

    Banner

    React Native Empty State package

    Tests

    When we need to show a list of data, sometimes the data is null or empty. This empty data set still needs to keep the user informed as to why there is no data showing. Showing an empty screen, can confuse the user as there is no clear indication of what data is being returned. If there is an error/bug we should display it to the user.

    Referral for Empty View Design

    Detailed design

    There will be 4 optional components in this view: An image, header text, sub header text and a button. This view also accepts children as props.

    demo images

    Installation

    npm install --save @tttstudios/react-native-empty-state or yarn add @tttstudios/react-native-empty-state-view

    Usage

    import { FlatList } from 'react-native';
    import EmptyStateView from '@tttstudios/react-native-empty-state';
    
    ...
    
    const renderEmptyStateView = () => (
            <EmptyStateView
                imageSource={require('./assets/emptyImage.png')}
                headerText="You have Nothing"
                subHeaderText="Please add more content"
                buttonText="Next"
            />
          );
    
    ...
    
      <FlatList
        data={data}
        renderItem={renderItem}
        ListEmptyComponent={renderEmptyStateView}
      />

    More Advanced Usage

    import EmptyStateView from '@tttstudios/react-native-empty-state'
    
    ...
      <EmptyStateView
        imageSource={{
          uri: 'https://i.ibb.co/Fs3mhQW/group.png',
        }}
        imageStyle={styles.imageStyle}
        headerText="Turn on location permission"
        subHeaderText="Please turn on the location permission to see the charging stations near me. "
        buttonText="Go to Settings"
        buttonStyle={styles.buttonStyle}
        headerTextStyle={styles.headerTextStyle}
        subHeaderTextStyle={styles.subHeaderTextStyle}
        buttonTextStyle={styles.buttonTextStyle}
      />
    
    const styles = StyleSheet.create({
      headerTextStyle: {
        color: 'rgb(76, 76, 76)',
        fontSize: 18,
        marginVertical: 10,
      },
      imageStyle: {
        height: '15%',
        resizeMode: 'contain',
      },
      subHeaderTextStyle: {
        fontSize: 12,
        color: 'rgb(147, 147, 147)',
        paddingHorizontal: 60,
        textAlign: 'center',
        marginVertical: 10,
      },
      buttonStyle: {
        borderColor: 'rgb(0, 27, 72)',
        backgroundColor: 'rgb(0, 27, 72)',
        borderRadius: 50,
        borderWidth: 1,
        paddingHorizontal: 70,
        paddingVertical: 10,
      },
      buttonTextStyle: {
        color: '#fff',
        textDecorationLine: 'none',
      },
    });

    Parameters

    Parameter Required Description
    headerText Yes Main header text
    imageSource NO Source of the main image
    imageStyle NO Main image styles
    headerTextStyle NO Main header text style
    subHeaderText NO Sub header text
    subHeaderTextStyle NO Sub header text style
    style NO Main style for the container
    buttonText NO Text for the button in view
    buttonTextStyle NO Button text style
    buttonStyle NO Button style
    onButtonClick NO Callback when the button is clicked
    children NO Additional children for render

    Inspiration from:

    DZNEmptyDataSet

    Roadmap

    • [x] Typescript definition file
    • [x] Typescript implementation
    • [x] Add basic unit tests
    • [ ] Add integration tests

    Contributors


    Eric Dao

    Premium Support By TTT Studios

    React native empty-state-view is presented by the mobile team at TTT Studios. We are a Digital Innovation Studio based out of Vancouver, Canada, delivering custom software and solutions that are designed and developed 100% in-house. The technologies we work with include AR & VR, IoT, AI, security & encryption, and cloud computing.

    Empowering Business Through Technology

    Install

    npm i @tttstudios/react-native-empty-state

    DownloadsWeekly Downloads

    1

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    15.8 kB

    Total Files

    10

    Last publish

    Collaborators

    • tttstudios