Small example of flicker in react-native-navigation

README.md

Just create a new React Native project as shown in RN's Getting Started. Then run yarn add react-native-navigation and replace the contents of index.js with the code below.

I've run example this with

• React Native 0.54.3
• React Native Navigation 1.1.428

Refresh the app and press both tabs. Once in every ~7 times you can see the content flicker.

index.js

import React from 'react';
import { StyleSheet, View, Text, Image } from 'react-native';
import { Navigation } from 'react-native-navigation';

const FirstTabScreen = () => (
  <View style={styles.view}>
    <Text>First Screen</Text>
    <Image
      style={styles.image}
      source={{ uri: 'https://media.tuicontent.nl/p/header/vakantie-indonesie.jpg' }}
    />
  </View>
);

const SecondTabScreen = () => (
  <View style={styles.view}>
    <Text>Second Screen</Text>
    <Image
      style={styles.image}
      source={{ uri: 'https://media.tuicontent.nl/p/header/vakantie-indonesie.jpg' }}
    />
  </View>
);

const PushedScreen = () => (
  <View style={styles.view}>
    <Text>Pushed Screen</Text>
    <Image
      style={styles.image}
      source={{ uri: 'https://media.tuicontent.nl/p/header/vakantie-indonesie.jpg' }}
    />
  </View>
);

const styles = StyleSheet.create({
  view: {
    alignItems: 'center',
    overflow: 'hidden',
    marginTop: 25,
  },
  image: {
    width: 255,
    height: 166,
    marginVertical: 25,
  },
});

function registerScreens() {
  Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen);
  Navigation.registerComponent('example.SecondTabScreen', () => SecondTabScreen);
  Navigation.registerComponent('example.PushedScreen', () => PushedScreen);
}

registerScreens(); // this is where you register all of your app's screens

// start the app
Navigation.startTabBasedApp({
  tabs: [
    {
      label: 'One',
      screen: 'example.FirstTabScreen', // this is a registered name for a screen
      title: 'Screen One'
    },
    {
      label: 'Two',
      screen: 'example.SecondTabScreen',
      title: 'Screen Two'
    },
    {
      label: 'Three',
      screen: 'example.SecondTabScreen',
      title: 'Screen Three'
    }
  ]
});