HighlightableImage.js

/**
 * HighlightableImage.js
 *
 * If we simply change the source prop of an Image in the render method, the
 * image blinks, and there is no image for a fraction of a second. This is
 * solved by mounting 2 images and changing their opacity.
 *
 */
import React from 'react'
import {
    Image,
    StyleSheet,
    Text,
    TouchableNativeFeedback,
    View
} from 'react-native'
import flattenStyle from 'flattenStyle'


export default class HighlightableImage extends React.Component {

    static propTypes = {
        highlightSource: React.PropTypes.number,  // This is what is returned by a 'require()'
        noHighlightSource: React.PropTypes.number,
        style: View.propTypes.style,
        highlighted: React.PropTypes.bool
    }

    static defaultProps = {
        style: {},
        highlighted: false
    }

    render() {
        let style = flattenStyle(this.props.style)
        // Must explicitly set dimensions for image to resize properly
        let imageStyle = [styles.image, {
            width: style.width,
            height: style.height
        }]
        return (
            <View style={[styles.imageContainer, this.props.style]}>
                <Image
                    source={this.props.highlightSource}
                    style={[...imageStyle, {opacity: this.props.highlighted ? 1 : 0}]}
                />
                <Image
                    source={this.props.noHighlightSource}
                    style={[...imageStyle, {opacity: this.props.highlighted ? 0 : 1}]}
                />
            </View>
        )
    }
}


const styles = StyleSheet.create({
    image: {
        position: 'absolute',
        left: 0,
        top: 0,
        resizeMode: 'contain',
    },
})

flatten-style is now unpublished