CODEWITHSUNDEEP
javascriptreactjsreact-native
Andrew Runner
Andrew Runner

Reputation: 83

NavigatorIOS transition causes Image to blink

I'm using NavigatorIOS to transition between pages with Image tags. Before each "forward" transition all images blink. How to get rid of it?

Happens on React Native 0.11.0 (untested on later versions) in the Simulator and on the device (iPhone 5).

Demo:

AnnoyingBlinkingDemo

Code:

var React = require('react-native');

var {
  AppRegistry,
  Image,
  NavigatorIOS,
  Text,
  TouchableOpacity,
  View,
} = React;

var NavigatorRoot = React.createClass({
  render(){
    return (
      <NavigatorIOS
        style={{flex: 1,}}
        ref="navigator"
        initialRoute={{
          component: TestPage,
          title: 'Test Page',
        }}
      />
    )
  },
});

var TestPage = React.createClass({
  render(){
    return (
      <View >
        <Image
          style={{width: 340, height: 300,}}
          source={{uri: "http://dummyimage.com/320/300/090&text=test_image"}}
        />

        <Text >
          This is a page with intentionally unstyled content. Note that before each "forward" transition the image blinks. Other components (like this text) are not affected.
        </Text>

        <TouchableOpacity
          onPress={()=>{
            this.props.navigator.push({
              component: TestPage,
              title: 'Test Page',
            });
          }}
        >
          <View>
            <Text >TEST BUTTON</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
});

AppRegistry.registerComponent('reference', ()=> NavigatorRoot );

Upvotes: 1

Views: 162

Answers (1)

oblador
oblador

Reputation: 3004

This is a bug fixed in React Native 0.14. Upgrade or cherry pick this commit.

Upvotes: 4

Related Questions