Why does the header icon load slowly in react-native?

Question

I'm using both Stack Navigations and Draw Navigations at the same time.

"react-navigation": "3.0.4"

My App.js

import React, { Component } from "react";
import HomeScreen from "./screen/HomeScreen";
export default class AwesomeApp extends Component {
  constructor() {
    super();
    this.state = {
      isReady: false
    };
  }
  async componentWillMount() {
    await Expo.Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
      Ionicons: require("native-base/Fonts/Ionicons.ttf")
    });
    this.setState({ isReady: true });
  }
  render() {
    if (!this.state.isReady) {
      return <Expo.AppLoading />;
    }
    return <HomeScreen />;
  }
}

my HomeScreen:

import React, { Component } from "react";
import TestScreen from "../TestScreen";
...
import {
  createDrawerNavigator,
  createAppContainer,
  createStackNavigator
} from "react-navigation";
import { AsyncStorage } from "react-native";
import Expo, { Constants, LocalAuthentication } from "expo";
import TouchID from "react-native-touch-id";
import crypto from "crypto";
import safeCrypto from "react-native-fast-crypto";
import { asyncRandomBytes } from "react-native-secure-randombytes";
const defaultNavigationOptions = {
  headerTintColor: "black",
  headerStyle: {
    borderBottomColor: "#fff",
    borderBottomWidth: 1,
    shadowColor: "transparent",
    elevation: 0
  },
  headerTitleStyle: {
    fontWeight: "bold",
    fontSize: 18
  }
};

window.randomBytes = asyncRandomBytes;
window.scryptsy = safeCrypto.scrypt;

let pinnumbercheck = AsyncStorage.getItem("pinnumber");
let powersucesscheck = AsyncStorage.getItem("powersucess");
let nicknamecheck = AsyncStorage.getItem("nickname");
let compatible = Expo.LocalAuthentication.hasHardwareAsync();
let fingerprints = Expo.LocalAuthentication.isEnrolledAsync();

const Drawers = createDrawerNavigator(
  {
    FirstAgree: {
      screen: UserAcceptanceScreen
    },
    Test: { screen: TestScreen }
  },
  {
    initialRouteName: "FirstAgree",
    contentComponent: props => <SideBar {...props} />
  }
);

const SettingStack = createStackNavigator(
  {
    screen: SettingScreen
  },
  {
    defaultNavigationOptions,
    headerLayoutPreset: "center"
  }
);

const FirstAgreeStack = createStackNavigator(
  {
    screen: UserAcceptanceScreen
  },
  {
    defaultNavigationOptions,
    headerLayoutPreset: "center"
  }
);

const FirstAgreeStack2 = createStackNavigator(
  {
    screen: UserAcceptanceScreen2
  },
  {
    defaultNavigationOptions,
    headerLayoutPreset: "center"
  }
);

const WalletScreenStack = createStackNavigator(
  {
    screen: RegisterWalletScreen2
  },
  {
    defaultNavigationOptions,
    headerLayoutPreset: "center"
  }
);

const WalletScreen2Stack = createStackNavigator(
  {
    screen: RegisterWalletScreen3
  },
  {
    defaultNavigationOptions,
    headerLayoutPreset: "center"
  }
);

const TakeWalletStack = createStackNavigator(
  {
    screen: TakeWalletScreen
  },
  {
    defaultNavigationOptions,
    headerLayoutPreset: "center"
  }
);

const RegisterSecurityStack = createStackNavigator(
  {
    screen: RegisterSecurityScreen
  },
  {
    defaultNavigationOptions,
    headerLayoutPreset: "center"
  }
);

const RegisterSecurityStack2 = createStackNavigator(
  {
    screen: RegisterSecurityScreen2
  },
  {
    defaultNavigationOptions,
    headerLayoutPreset: "center"
  }
);

const PinNumberLoginStack = createStackNavigator(
  {
    screen: PinNumberLogin
  },
  {
    defaultNavigationOptions,
    headerLayoutPreset: "center"
  }
);

const TestssStack = createStackNavigator(
  {
    screen: Testss
  },
  {
    defaultNavigationOptions,
    headerLayoutPreset: "center"
  }
);

const NickRegisterStack = createStackNavigator(
  {
    screen: NickRegisterScreen
  },
  {
    defaultNavigationOptions,
    headerLayoutPreset: "center"
  }
);

const stackScreen = createStackNavigator(
  {
    Drawers: {
      screen: Drawers
    },
    UserRight: {
      screen: UserRightScreen
    },
  ...(very more)
  },
  {
    initialRouteName: "RegisterWalletIndex",
    headerMode: "none"
  }
);

const HomeScreenRouter = createAppContainer(stackScreen);

export default HomeScreenRouter;

There's nothing wrong with moving between screens and how to use them.

However, the header icon is displayed too late on the next screen when you move the screen.

The header icon is displayed later than the full screen. So you can't act on the screen right away.

usepage.js:

import React from "react";
import {
  View,
  Text,
  TouchableOpacity,
  Alert,
  Image,
  Platform,
  ActivityIndicator
} from "react-native";
import { ListItem, CheckBox, Body } from "native-base";
import styles from "./styles.js";
import { Ionicons } from "@expo/vector-icons";
import { NavigationActions } from "react-navigation";

class UserAcceptanceScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      allCheckbox: false,
      checkbox1: false,
      checkbox2: false,
      checkbox3: false,
      loading: false
    };
  }

  static navigationOptions = ({ navigation }) => {
    return {
      headerLeft: (
        <TouchableOpacity
          style={{ paddingLeft: 15 }}
          onPress={() => navigation.dispatch(NavigationActions.back())}
        >
          <Ionicons name={"ios-arrow-back"} size={35} color={"black"} />
        </TouchableOpacity>
      )
    };
  };

  componentDidMount() {
    this.setState({
      loading: true
    });
  }

  allToggleSwitch() {
    this.setState({
      allCheckbox: !this.state.allCheckbox
    });
  }


  toggleSwitch1() {
    this.setState({
      checkbox1: !this.state.checkbox1
    });
  }


  toggleSwitch2() {
    this.setState({
      checkbox2: !this.state.checkbox2
    });
  }


  toggleSwitch3() {
    this.setState({
      checkbox3: !this.state.checkbox3
    });
  }

  render() {
    return this.state.loading === false ? (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <ActivityIndicator size="large" />
      </View>
    ) : (
      <View style={styles.container}>
      ...
      </View>
    );
  }
}

export default UserAcceptanceScreen;

I don't know why because I did what I wanted. Is there something I'm missing?

Please give us a lot of feedback and help.

hong developer hong developer · Accepted Answer · 2019-05-17T01:36:34

I didn't know why it was loading slowly, but I solved this problem by designing one loading screen.

My use loading Screen Page:

import React, { Component } from "react";
import {
  AsyncStorage,
  Text,
  View,
  ActivityIndicator,
  TouchableOpacity
} from "react-native";
import { Ionicons } from "@expo/vector-icons";

class StartScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isReady: false
    };
  }

  static navigationOptions = ({ navigation }) => {
    return {
      headerLeft: (
        <TouchableOpacity
          style={{ paddingLeft: 15 }}
          onPress={() => navigation.navigate("FirstAgreeStack")}
        >
          <Ionicons name={"ios-arrow-back"} size={35} color={"#ffffff"} />
        </TouchableOpacity>
      ),

      headerRight: null
    };
  };

  async componentWillMount() {
    let powersucess = await AsyncStorage.getItem("powersucess");
    let keystoredata = await AsyncStorage.getItem("keystoredata");
    let nickname = await AsyncStorage.getItem("nickname");
    let pinnumber = await AsyncStorage.getItem("pinnumber");
    let useTouchId = await AsyncStorage.getItem("useTouchId");
    powersucess === null
      ? this.props.navigation.navigate("CusterMizingAlert")
      : keystoredata === null
      ? this.props.navigation.navigate("RegisterWalletIndex")
      : nickname === null
      ? this.props.navigation.navigate("RegisterWalletIndex")
      : pinnumber === null
      ? this.props.navigation.navigate("RegisterSecurity")
      : pinnumber === null
      ? this.props.navigation.navigate("RealPinNumberLogin")
      : useTouchId === "useTouchId"
      ? this.props.navigation.navigate("TouchIdLogin")
      : this.props.navigation.navigate("FaceIdLogin"),
      this.setState({ isReady: true });
  }
  render() {
    return this.state.isReady === false ? (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <ActivityIndicator size="large" />
      </View>
    ) : (
      <View>
        <Text>dfdff</Text>
      </View>
    );
  }
}
export default StartScreen;

Why does the header icon load slowly in react-native?

1 Answers