native-x-data-view v1.0.9

native-x-data-view

This component conditionally shows data, progress or error based on the status from API. This wrapper component will provide consistent data handling experience in an application.

Install

Yarn

yarn add native-x-data-view

NPM

npm install native-x-data-view

Usage

import { DataView } from 'native-x-data-view'

function MyComponent() {
  const { data, isLoading, error } = useAPIHook()
  return (
    <DataView data={data} isLoading={isLoading} error={error}>
      ...
    </Stack>
  )
}

API

Configure Empty Message

import { DataView } from 'native-x-data-view'

const emptyMessage = {
  title: 'No data',
  description: 'We could not find what you are looking for'
}

function MyComponent() {
  const { data, isLoading, error } = useAPIHook()
  return (
    <DataView data={data} isLoading={isLoading} error={error} emptyMessage={emptyMessage}>
      ...
    </Stack>
  )
}

You can also pass on a custom view as empty message

import { DataView } from 'native-x-data-view'

function EmptyMessage() {
  return <View>
    <Text>No data</Text>
  </View>
}

function MyComponent() {
  const { data, isLoading, error } = useAPIHook()
  return (
    <DataView data={data} isLoading={isLoading} error={error} emptyMessage={<EmptyMessage />}>
      ...
    </Stack>
  )
}

Configure Error Message

import { DataView } from 'native-x-data-view'

const renderError = (error: Error | string | null) => {
  if (!error) {
    return null
  }
  return <View>
    <Text>Custom error view: {error}</Text>
  </View>
}

function MyComponent() {
  const { data, isLoading, error } = useAPIHook()
  return (
    <DataView data={data} isLoading={isLoading} error={error} renderError={renderError}>
      ...
    </Stack>
  )
}

ErrorMessage component

import { ErrorMessage } from 'native-x-data-view'

function MyComponent() {
  return <ErrorMessage alignCenter>{error}</ErrorMessage>
}

EmptyMessage component

import { EmptyMessage } from 'native-x-data-view'

function MyComponent() {
  return (
    <EmptyMessage
      title='No data'
      alignLeft={false}
      alignCenter={true}
      alignRight={false}
      alignTop={false}
      alignMiddle={true}
      alignBottom={false}
      titleColor={COLOR.ERROR}
      descriptionColor={COLOR.WARNING}
    >
      {'Error description'}
    </EmptyMessage>
  )
}

Automatic Release

Here is an example of the release type that will be done based on a commit messages: