airbnb / native-navigation

Native navigation library for React Native applications

Home Page:http://airbnb.io/native-navigation/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Screen Flickering problem

keithics opened this issue · comments

There seems to be a problem when pushing a screen with a fullscreen image.
In split second the screen's background color is shown before the image is fully rendered which causes the flickering.
blink1

  import React, {
    Component,
    PropTypes,
  } from 'react';
  import {
    Dimensions,
      StyleSheet,
      TouchableHighlight,
    Image,
    View,
  } from 'react-native';

  import Navigator from 'native-navigation';

  const { width,height } = Dimensions.get('window');
  const styles = StyleSheet.create({
      canvas: {
          width: width,
          height: height
      }
  })

  export default class NavigationExampleScreen extends Component {
      _onPress = () => {
          Navigator.push('ScreenOne')
      };

      render() {
      return (
          <View>
              <TouchableHighlight onPress={this._onPress} underlayColor="white">
              <Image
                  resizeMode="contain"
                  source={require('../assets/images/Walkthrough1.png')}
                  style={styles.canvas} />
              </TouchableHighlight>
          </View>
      );
    }
  }