render(): ReactElement { return ( <Animated.Image // Base: Image, Text, View source={{uri: 'http://i.imgur.com/XMKOH81.jpg'}} style={{ flex: 1, transform: [ // `transform` is an ordered array {scale: this.state.bounceValue}, // Map `bounceValue` to `scale` ] }} /> ); }
function (_Component) { babelHelpers.inherits(BackgroundImage, _Component); function BackgroundImage() { babelHelpers.classCallCheck(this, BackgroundImage); return babelHelpers.possibleConstructorReturn(this, (BackgroundImage.__proto__ || Object.getPrototypeOf(BackgroundImage)).apply(this, arguments)); } babelHelpers.createClass(BackgroundImage, [{ key: 'render', value: function render() { return _react2.default.createElement( _reactNative.Image, { source: require('../../public/images/bg1.jpg'), style: styles.backgroundImage }, this.props.children ); } }]); return BackgroundImage; }(_react.Component)
render () { return ( <View style={styles.chained}> {this.state.stickers.map((_, i) => { const j = this.state.stickers.length - i - 1 // reverse so leader is on top const handlers = j === 0 ? this.state.chainResponder.panHandlers : {} return ( <Animated.Image {...handlers} key={i} source={CHAIN_IMGS[j]} style={[ styles.sticker, { transform: this.state.stickers[j].getTranslateTransform() // simple conversion } ]} /> ) })} </View> ) }
<Animated.Image pointerEvents="none" style={{
</View> </ScrollView> <Animated.Image pointerEvents="none" style={[
render () { return ( <View style={styles.bobbleContainer}> {this.state.bobbles.map((_, i) => { const j = this.state.bobbles.length - i - 1 // reverse so lead on top const handlers = j > 0 ? {} : this.state.bobbleResponder.panHandlers return ( <Animated.Image {...handlers} key={i} source={{ uri: BOBBLE_IMGS[j] }} style={[ styles.circle, { backgroundColor: randColor(), // re-renders are obvious transform: this.state.bobbles[j].getTranslateTransform() // simple conversion } ]} /> ) })} </View> ) }