<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> import React from 'react'; import { Modal, View } from 'react-native'; import { BarIndicator } from 'react-native-indicators'; import colors from '../styles/colors'; import { height, width } from '../styles/responsiveSize'; const LoadingComponent = () => { return ( <View style={{ // ...commonStyles.loader, backgroundColor: colors.whiteOpacity22, elevation: 5, height:height, width:width }}> <BarIndicator size={25} color={colors.themeredColor} /> </View> ); }; const Loader = ({isLoading = false, withModal}) => { if (withModal) { return ( <Modal transparent visible={isLoading}> <LoadingComponent /> </Modal> ); } if (isLoading) { return <LoadingComponent />; } return null; }; export default Loader;