Transition is not re-rendering child props

[brunolsantos]

It seems that every state under <Transition> tag is not being updated.

Parent Component

import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
} from 'react-native';
import {
    createTransition,
    SlideLeft
} from 'react-native-transition';
import Icon from 'react-native-vector-icons/FontAwesome';

//Modules
import * as Exchange from '../modules/exchanges';


//Pages
import Bundle from './info-bundle';
import EditWallet from './edit-wallet';


const Transition = createTransition(SlideLeft);
//<Bundle backText='PRICE' frontText={this.state.bitcoinPrice} topText='MercadoBitcoin'/>
export default class Main extends Component {
    constructor() {
        super();
        this.state = {
            bitcoinPrice: '2'
        };
    }
    getExchangePrice = (exchange) => {
        console.log('State: ' + this.state.bitcoinPrice);
        console.log('Exchanges: ' + exchange);
        this.setState({ bitcoinPrice: '1' });
    }
    switchToWallet = () => {
        Transition.show(
            <EditWallet />
        );
    }
    render() {
        return (
            <Transition duration={500}>
                <View style={styles.container}>
                    <View style={styles.configButton}>
                        <Icon name="cog" size={40} color='rgba(255,173,0,0.5)'></Icon>
                    </View>
                    <TouchableOpacity
                        style={styles.bundleOrientation}
                        onPress={this.switchToWallet}>
                        <Bundle backText='WALLET' frontText='0.00347' />
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.bundleOrientation} onPress={() => this.getExchangePrice(Exchange.exchanges.MERCADO_BITCOIN)}>
                        <Text style={styles.text1}>{this.state.bitcoinPrice}</Text>
                    </TouchableOpacity>
                    <View style={styles.bundleOrientation}>
                        <Bundle backText='TOTAL' frontText='172.42' />
                    </View>
                </View>
            </Transition>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgb(58,62,91)',
    },
    bundleOrientation: {
        flex: 1,
        alignSelf: 'stretch',
        zIndex: -1,
    },
    configButton: {
        alignSelf: 'flex-start',
        padding: 15,
        zIndex: 1,
    },
    text1: {
        fontSize: 30,
        alignSelf:'center',
        color:'white'
    }
});

Child Component

import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
} from 'react-native';

export default class InfoBundle extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.aboveTextView}>
                    <Text style={styles.aboveText}>{this.props.topText}</Text>
                </View>
                <View style={styles.bigTextView}>
                    <Text style={styles.bigText}>{this.props.backText}</Text>
                </View>
                <View style={styles.normalTextView}>
                    <Text style={styles.normalText}>{this.props.frontText}</Text>
                </View>
            </View>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        alignSelf: 'stretch',
    },
    bigText: {
        color: 'rgba(255,173,0,0.3)',
        fontWeight: 'bold',
        fontSize: 70,
    },
    bigTextView: {
        zIndex: -1
    },
    normalText: {
        color: 'rgb(255,173,0)',
        fontWeight: 'bold',
        fontSize: 40,
    },
    normalTextView: {
        zIndex: 1,
        top: -45
    },
    aboveText: {
        color: 'rgb(255,255,255)',
        fontWeight: 'bold',
    },
    aboveTextView: {
        zIndex: 1,
        bottom: -18
    }

});

When i click the second <TouchableOpacity> in parent component to change child value it just doesn't update.

Maybe this problem is related to #4 .

[code-matt]

The way I get around this is by making Transition's duration prop come from state. When I need to update state, I change it to 0 (so the re-render happens instantly with no animation) and call Transition.show and when I want something to animate, put it back to 250 or whatever.

You could do a similar thing in componentDidUpdate with props.