react-native-easy-loader v1.0.0

React Native Easy Loader

Loader component for React Native

Installation

  npm install --save react-native-easy-loader

Usage

Often we need to load some data asynchronously and show loading spinner until result comes

import Loader from 'react-native-easy-loader'
import React from 'react'
import { Text } from 'react-native'

const API = {
  getAppleCount: () =>
    new Promise(resolve => {
      setTimeout(() => resolve(2), 3000)
    })
}

class Application extends React.Component {
  state = { loading: true }

  componentWillMount = async () => {
    const appleCount = await API.getAppleCount()
    this.setState({ loading: false, appleCount })
  }

  render = () => <Loader loading={this.state.loading} loaded={() => <Text>{this.state.appleCount}</Text>} />
}

Customization

Default spinner is simple ActivityIndicator. If you want to have a custom spinner you can pass a component to spinner property. In this example I use spinner from react-native-loader and also I make my loading screen black.

import { Bars } from 'react-native-loader'
import Loader from 'react-native-easy-loader'
import React from 'react'
import { Text } from 'react-native'

const Application = () => (
  <Loader
    containerStyle={{ backgroundColor: 'black' }}
    loading={true}
    loaded={() => <Text>Loaded</Text>}
    spinner={() => <Bars size={20} color="white" />}
  />
)

API