CODEWITHSUNDEEP
androidreact-nativereact-navigation
N Sharma
N Sharma

Reputation: 34497

How to render/navigate a component on condition basis

I have index.android.js where I am getting value of key from AsyncStorage if value is true then I want to navigate to DashboardScreen and else StackNav.

index.android.js

/**
 * @flow
 */

import React, { Component } from "react";
import { AppRegistry } from "react-native";
import { StackNav } from "./router";
export default class ScheduledApp extends Component {
  render() {

    const { navigate } = this.props.navigation;

    try {
      AsyncStorage.getItem("@ProductTour:key").then(value => {
        // control goes inside if when user has completed product tour
        if (value) {
          navigate("DashboardScreen");
        }
      });
    } catch (error) {
      console.log(error);
    }
    return <StackNav />;
  }
}

AppRegistry.registerComponent("Scheduled", () => ScheduledApp);

router.js

import { StackNavigator } from "react-navigation";

import SplashScreen from "./ui/SplashScreen";
import EnableNotificationScreen from "./ui/EnableNotificationScreen";
import CreateMessageScreen from "./ui/CreateMessageScreen";
import DashboardScreen from "./ui/DashboardScreen";
import CreateSMS from "./ui/CreateSMS";

export const StackNav = StackNavigator(
  {
    Splash: {
      screen: SplashScreen,
      navigationOptions: {
        header: null
      }
    },
    EnableNotification: {
      screen: EnableNotificationScreen,
      navigationOptions: {
        header: null
      }
    },
    CreateMessage: {
      screen: CreateMessageScreen,
      navigationOptions: {
        header: null
      }
    },
    DashboardScreen: {
      screen: DashboardScreen,
      navigationOptions: {
        headerLeft: null,
        headerTitleStyle: { alignSelf: "center" }
      }
    },
    CreateSMS: {
      screen: CreateSMS
    }
  },
  {
    initialRouteName: "Splash"
  }
);

Does anyone know how to render/navigate component on condition basis ?

Upvotes: 0

Views: 1801

Answers (1)

Carlos C
Carlos C

Reputation: 677

export default class ScheduledApp extends Component {
  render() {            
    return <StackNav />;
  }
}

AppRegistry.registerComponent("Scheduled", () => ScheduledApp);

And then in your SplashScreen component:

export default class ScheduledApp extends Component {
  render() {

    const { navigate } = this.props.navigation;

    try {
      AsyncStorage.getItem("@ProductTour:key").then(value => {
        // control goes inside if when user has completed product tour
        if (value) {
          navigate("DashboardScreen");
        }
      });
    } catch (error) {
      console.log(error);
    }
    return <Text>Return whatever you are already returning in the SplashScreen render function</Text>;
  }
}

Upvotes: 2

Related Questions