React Native - ActivityIndicator
React Native - ActivityIndicator
In this chapter we will show you how to use the activity indicator in React Native.
Step 1: App
App component will be used to import and show our ActivityIndicator.
App.js
import React from 'react' import ActivityIndicatorExample from './activity_indicator_example.js' const Home = () => { return ( <ActivityIndicatorExample /> ) } export default Home
Step 2: ActivityIndicatorExample
Animating property is a Boolean which is used for showing the activity indicator. The latter closes six seconds after the component is mounted. This is done using the closeActivityIndicator() function.
activity_indicator_example.js
import React, { Component } from 'react'; import { ActivityIndicator, View, Text, TouchableOpacity, StyleSheet } from 'react-native'; class ActivityIndicatorExample extends Component { state = { animating: true } closeActivityIndicator = () => setTimeout(() => this.setState({ animating: false }), 60000) componentDidMount = () => this.closeActivityIndicator() render() { const animating = this.state.animating return ( <View style = {styles.container}> <ActivityIndicator animating = {animating} color = '#bc2b78' size = "large" style = {styles.activityIndicator}/> </View> ) } } export default ActivityIndicatorExample const styles = StyleSheet.create ({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', marginTop: 70 }, activityIndicator: { flex: 1, justifyContent: 'center', alignItems: 'center', height: 80 } })
When we run the app, we will see the loader on screen. It will disappear after six seconds.
Frequently Asked Questions
+
Ans: React Native - Modal
view more..
+
Ans: React Native - WebView
view more..
+
Ans: React Native - View
view more..
+
Ans: React Native - ActivityIndicator
view more..
+
Ans: React Native - Picker
view more..
+
Ans: React Native - Status Bar
view more..
+
Ans: React Native - Switch
view more..
+
Ans: React Native - Text view more..
+
Ans: React Native - Alert view more..
+
Ans: React Native - Geolocation
view more..
+
Ans: React Native - AsyncStorage
view more..
Recommended Posts:
- React Native Tutorial
- React Native - Overview
- React Native - Environment Setup
- React Native - App
- React Native - State
- React Native - Props
- React Native - Styling
- React Native - Flexbox
- React Native - ListView
- React Native - Text Input
- React Native - ScrollView
- React Native - Images
- React Native - HTTP
- React Native - Buttons
- React Native - Animations
Rating - NAN/5
Advertisements