React Native Loader

Loader is very essential component in every application. Loader should be light-weight, attractive and should cover whole screen also. Here I have created Loader component in React Native without using any third-party packages.

import React from 'react';import { StyleSheet, View, Modal, ActivityIndicator } from 'react-native';
export default class Loader extends React.Component {render() { const THEME_COLOR = "#000"; return ( <Modal transparent={true} animationType={'none'} visible={true}> <View style={styles.modalBackground}> <View style={styles.wrapper}> <ActivityIndicator size="large" color={THEME_COLOR} /> </View> </View> </Modal>);}}const styles = StyleSheet.create({ modalBackground: { flex: 1, alignItems: "center", flexDirection: "column", justifyContent: "space-around", backgroundColor: "#00000040"},wrapper: { backgroundColor: '#FFFFFF', height: 100, width: 100, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'space-around'},});

Here I have created new class called Loader. You can change loader color by changing value of constant named THEME_COLOR.

You can use this class as,

<Loader />

If you want different loader colors every time then you can also pass color as class parameter.

I hope you will like this code. Thank you.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store