loading...のspinnerを表示する（他のコンポーネントに触らせない）

react-native-loading-spinner-overlayを使うのがいいらしい。

やりたいこ

こんな感じ。

インストール

npm install --save react-native-loading-spinner-overlay

実装

使い方は簡単。

App.js

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import Spinner from 'react-native-loading-spinner-overlay';

export default class App extends React.Component {

    //初期値true
    state = {
        spinner: true
    }

    //3秒たったら消す
    componentDidMount(){
        setInterval(()=>{
            this.setState({
                spinner: false
            })
        }, 3000);
    }

    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>App</Text>
                <Spinner
                    visible={this.state.spinner}
                    textContent="読込中..."
                    textStyle={{ color: "#fff" }}
                    overlayColor="rgba(0,0,0,0.5)"
                />
            </View>
        );
    }
}