Creating simple re-usable component with react native

Lets say we're trying to create a very simple activity busy spinner component. We can use the following code below :-

ActivitySpinner.js

import React, {Component} from 'react';

import {

StyleSheet,

ActivityIndicator,

View

} from 'react-native';

export const ActivitySpinner = ({isBusy}) => {

return (

<View>

<ActivityIndicator style={{position : 'absolute', left: 0,

right: 0, top: 0, bottom: 0, alignItems: 'center',justifyContent: 'center'}}

animating={isBusy} color = '#0a1640' size = "large" />

</View>

);

};

In other classes we can import

import { ActivitySpinner } from '../shared/ActivitySpinner';

In render function :-

<ActivitySpinner isBusy={this.state.loading} />