1.1.1 • Published 9 years ago

rn-loading-view v1.1.1

Weekly downloads
4
License
MIT
Repository
github
Last release
9 years ago

RN-Loading-View

Just combines loading indicator with optional text and button into one component so you can quickly construct loading views

If the button is rendered via renderButton={ true } the ActivityIndicator and Text will not show.

  • npm install rn-loading-view --save

Props

PropTypeDescription
spinnerPropsobjectActivityIndicator Props
textstringtext to display below the spinner
textPropsobjectText Props
renderButtonbooleanrender a button below the text
buttonTextstringtext in the button
buttonTextPropsobjectText Props for button text
buttonPropsobjectTouchableOpacity Props
import React from 'react';
import { View } from 'react-native';
import LoadingView from 'rn-loading-view';

class LoadingViewExampleOne extends React.Component {
  render(){
    return(

      <LoadingView
        text={ 'Hold on here...I\'m loading' }
        textProps={{ style: {color:'red',fontSize:20} }}
        spinnerProps={{size:'large',color:'deeppink'}}
      />

    )
  };

class LoadingViewExampleTwo extends React.Component {
  render(){
    return(
        <LoadingView
          text={ 'Getting information...' }
          renderButton={ (some condition) ? true:false }
          spinnerProps={{ size:'small' }}
          buttonText={ 'Try Again?' }
          buttonProps={{
            style: {backgroundColor:'red',padding:10},
            onPress: () => console.log('do stuff')
          }}
        />
    )
  };

}