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} />

Comments

Popular posts from this blog

PySpark - Working with JDBC Sqlite database