react native render another component in main

Question

i want to render another component in the main component so user won't face a white screen for a second! i'm using TabNavigator from react-navigation and when i want to switch between tabs, i face a white screen for a second (seems it need a second to render). i was thinking of rendering the second tab in the first so i can have a better user experience! P.s. : my components are in separate files!

Main:

export default class AdCalc extends React.Component {
  render() {
    return (
      <View>
        <Text>
          TEST
        </Text>
      </View>
    );
  }
}

and my child:

export default class Child extends React.Component {
  render() {
    return (
      <View>
        <Text>
          This is child!
        </Text>
      </View>
    );
  }
}

thanks in advance!

Answer 1

You can use react-navigation TabNavigatorConfig's lazy prop. Pass lazy={false} so that your views may load at initial start. Then you will not see such a screen.