Hello friends, It’s been a couple of days since I had posted a tutorial. There are some issued going on with my website about Google search. But I have resolved it. So form now on you all will be get new tutorials every day about React Native. Now in Today’s tutorial we would learn about changing size of ActivityIndicator component in RN. The ActivityIndicator supports 2 size format for iOS, small and large and 3 formats for android small, large and given size in Pixels. We would discuss all 3 of them in today’s tutorial. So in this tutorial we would learn about React Native Change ActivityIndicator Size in Android iOS.
Live Screenshot of App:-
Contents in this project React Native Change ActivityIndicator Size in Android iOS :-
1. Open your project’s main App.js file and import View, StyleSheet, Text, ActivityIndicator and Platform component.
|
1 2 3 |
import React from 'react'; import { View, StyleSheet, Text, ActivityIndicator, Platform } from 'react-native'; |
2. Creating our main export default App component.
|
1 2 3 4 5 |
export default function App() { } |
3. Creating ActivityIndicator component with 3 different sizes.
Note: iOS only supports 2 sizes small and large. But Android supports all 3 sizes small, large and given size in number.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<View style={{ justifyContent: 'space-evenly', flexDirection: 'row',}}> <ActivityIndicator size="small" /> <ActivityIndicator size="large" /> <ActivityIndicator size={60} /> </View> |
4. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, backgroundColor: 'white', paddingTop: (Platform.OS === 'ios') ? 20 : 0, }, text: { fontSize: 24, paddingBottom: 20, fontWeight: 'bold', textAlign: 'center', color: 'black' } }); |
5. Complete Source Code for App.js File :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
import React from 'react'; import { View, StyleSheet, Text, ActivityIndicator, Platform } from 'react-native'; export default function App() { return ( <View style={styleSheet.MainContainer}> <Text style={styleSheet.text}> Change Size of ActivityIndicator in React Native </Text> <View style={{ justifyContent: 'space-evenly', flexDirection: 'row',}}> <ActivityIndicator size="small" /> <ActivityIndicator size="large" /> <ActivityIndicator size={60} /> </View> </View> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, backgroundColor: 'white', paddingTop: (Platform.OS === 'ios') ? 20 : 0, }, text: { fontSize: 24, paddingBottom: 20, fontWeight: 'bold', textAlign: 'center', color: 'black' } }); |
