splashScreen.js

import React, { PureComponent } from "react";
import { InteractionManager, StatusBar, Text, View } from "react-native";
import firebase from "react-native-firebase";
import { NavigationActions, StackActions } from "react-navigation";
import { connect } from "react-redux";
import { setFcmToken } from "../actions/auth";
import globalStyles from "../assets/styles/global";
import type { RemoteMessage } from "react-native-firebase";

class SplashScreen extends PureComponent {
  static navigationOptions = {
    header: null
  };

  state = {
    ready: false
  };

  componentDidMount() {
    firebase
      .messaging()
      .hasPermission()
      .then(enabled => {
        if (enabled) {
          firebase
            .messaging()
            .getToken()
            .then(token => {
              this.props.setFcmToken(token);
            });
        } else {
          firebase
            .messaging()
            .requestPermission()
            .then(() => {
              console.log("User Now Has Permission");
            })
            .catch(error => {
              alert("Error", error);
            });
        }
      });

    InteractionManager.runAfterInteractions(() => {
      this.setState({ ready: true });
      if (this.props.isLogin) {
        return this.onResetNav("Home");
      } else {
        return this.onResetNav("Login");
      }
    });
    this.messageListener = firebase
      .messaging()
      .onMessage((message: RemoteMessage) => {
        // Process your message as required
        console.log("message", message);
      });
  }

  componentWillUnmount() {
    this.messageListener();
  }
  onResetNav(routeName) {
    const resetAction = StackActions.reset({
      index: 0,
      actions: [NavigationActions.navigate({ routeName: routeName })]
    });
    this.props.navigation.dispatch(resetAction);
  }

  render() {
    if (!this.state.ready || this.state.ready == null) {
      return <View style={globalStyles.alignCenterContainer} />;
    }
    return (
      <View
        style={[globalStyles.centerContainer, { backgroundColor: "#2845b5" }]}
      >
        <StatusBar hidden />
        <Text
          style={[
            globalStyles.font,
            { fontWeight: "bold", fontSize: 20, color: "white" }
          ]}
        >
          Abunawas
        </Text>
        <Text style={[globalStyles.font, { color: "white" }]}>Corporate</Text>
      </View>
    );
  }
}

const mapStateToProps = ({ auth }) => ({
  isLogin: auth.isLogin
});

const mapDispatchToProps = dispatch => ({
  setFcmToken: token => dispatch(setFcmToken(token))
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SplashScreen);