react-native-loading-bubbles

React Native package of loading balls. you can use it in your app to make more responsive.

Installation

Native Cli: npm install react-native-loading-bubbles

Expo: expo install react-native-loading-bubbles

Demo

Sample Code

import React, { useState } from 'react'
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity as Button
} from 'react-native'
import {Loader} from 'react-native-loading-bubbles';

export default function App(){
    const [isLoad, setIsLoad] = useState(true)
    return (
        <View style={[styles.container,{}]}>
            <Text style={{color: 'black', fontSize: 18}}>Loading Bubbles</Text>
            {isLoad?<Loader 
                leftBubbleColor={'red'}
                middleBubbleColor={'green'}
                rightBubbleColor={'blue'}
                />:null}
            <Button style={[styles.button,{marginTop:55}]} activeOpacity={0.4} onPress={()=>setIsLoad(!isLoad)}>
                <Text style={{fontSize: 16, color: 'white'}}>{isLoad?'Stop':'Start'}</Text>
            </Button>
        </View>
    );
}
const styles = StyleSheet.create({
    container:{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    button:{
        margin: 5,
        paddingHorizontal: 30,
        padding: 6,
        backgroundColor: 'lime',
        borderRadius: 15,
    }
})

Properties

Props	Type	Default
leftBubbleColor	String	'red'
middleBubbleColor	String	'green'
rightBubbleColor	String	'blue'