airbnb / native-navigation

Native navigation library for React Native applications
http://airbnb.io/native-navigation/
MIT License
3.13k stars 177 forks source link

Screen Flickering problem #125

Open keithics opened 7 years ago

keithics commented 7 years ago

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>
      );
    }
  }