Wednesday, October 24, 2018

Loading Screen


Example : #1
import React, { Component } from 'react'
import { View, Text, StyleSheet } from 'react-native'

class MainService {
  static load(cb) {
    setTimeout(cb, 2000)
  }
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isLoading: false
    },
      MainService.load(()=> this.setState({ isLoading: true }))
  }
  render() {
    return (
      <View>
        {this.state.isLoading ? <Text>Welcome</Text>:<Text> Loading..... </Text>}
      </View>
    )
  }
}
export default App
..............................................................................................................................................................................................................................
Example : #2

import React, { Component } from 'react'
import { View, Text, ActivityIndicator } from 'react-native'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isLoading: true
    }
  }
  componentDidMount() {
    setTimeout(()=>this.setState({isLoading:false}),5000)
  }

  renderLoading() {
    return (
      <View>
        <ActivityIndicator size='large' color='red' animating></ActivityIndicator>
      </View>
    )
  }
  render() {
    return (
      <View>
        {this.state.isLoading ? this.renderLoading() : null}
      </View>
    )
  }
}
export default App


.................................................................................................................................................................................................................................

Example : #3

...................................................................................................................................................................................................................................
Example : #4

...................................................................................................................................................................................................................................
Example : #5

...................................................................................................................................................................................................................................



No comments:

Post a Comment