로딩 애니메이션 - ActivityIndicator, react-native-indicators

화면을 전환하거나 파일을 다운로드 할때 화면에서 빙글빙글 돌아가는 것을 구현할 수 있다.

ActivityIndicator

animating: false면 멈춘다.
react-native에서 기본적으로 제공되는 컴포넌트로 따로 설치안해도 된다.

import React, { useState, Component } from 'react';
import { View, Text, StyleSheet, TextInput, ActivityIndicator } from 'react-native';

class PickerComponent extends Component {
    ...

    render() {
        return (
            <View>
                ...
                <Text style={styles.input}>{this.state.value}</Text>
                <ActivityIndicator 
                style={{paddingTop: 200}}
                size="large"
                color="green"
                animating={true}
                />
                ...
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 20,
        marginBottom: 200,
        alignItems: 'center',
    },
    input: {
        width: '100%',
        marginTop: 20,
        fontSize: 25
    }
})

export default PickerComponent;

---

react-native-indicators

라이브러리를 설치한다.

npm install --save react-native-indicators

다음과 같이 사용할 수있다.

import React, { Component } from 'react';
import {
  BallIndicator,
  BarIndicator,
  DotIndicator,
  MaterialIndicator,
  PacmanIndicator,
  PulseIndicator,
  SkypeIndicator,
  UIActivityIndicator,
  WaveIndicator,
} from 'react-native-indicators';

class Example extends Component {
  render() {
    return (
      <DotIndicator color='white' />
    );
  }
}

BallIndicator,
BarIndicator,
DotIndicator,
MaterialIndicator,
PacmanIndicator,
PulseIndicator,
SkypeIndicator,
UIActivityIndicator,
WaveIndicator,

다음과 같이 종류가 다양하고 원하는 스타일을 선택해서 사용하면 된다. 나는 다 써보고 SkypeIndicator를 사용했다.

내가 개발할 때 코드에서 사용한 방법은 다음과 같다.

import {SkypeIndicator} from 'react-native-indicators';
...
return (
    <View style={styles.container}>
      {loading && (
        <View style={styles.loadingContainer}>
          <SkypeIndicator color="#606E76" size={145} style={styles.indicator} />
        </View>
      )}
...

{isUploading && (
        <View style={styles.loadingContainer}>
          <SkypeIndicator color="#606E76" size={145} />
        </View>
      )}

...

참고
https://github.com/n4kz/react-native-indicators