Skip to content

Instantly share code, notes, and snippets.

@jasperkuperus
Created April 4, 2018 17:59
Show Gist options
  • Save jasperkuperus/9f4c2677c7505fc3ea0d92c30b5f84b5 to your computer and use it in GitHub Desktop.
Save jasperkuperus/9f4c2677c7505fc3ea0d92c30b5f84b5 to your computer and use it in GitHub Desktop.
Small example of flicker in react-native-navigation

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.

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'
}
]
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment