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.