components.js

import View1 from "./View1";
import View2 from "./View2";
import { View } from 'react-native';

export { View1, View2, View };

index.android.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import MyNavigator from "./MyNavigator"

class App extends Component {
    state = {
        currentScene: {
            name: "View1"
        }
    }
    render() {
        return (
            <MyNavigator
                {...this.state}
                onPress={() => {
                    this.setState({
                        currentScene: {
                            name: "View2"
                        }
                    })
                }}
            />
            );
    }
}


AppRegistry.registerComponent('rn_test', () => App);

MyNavigator.js

import { View, Animated, TouchableHighlight, Text } from 'react-native';
import React, { PropTypes as pt } from "react";
import * as components from "./components";

class MyNavigator extends React.Component {
    static propTypes = {
        currentScene: pt.object.isRequired
    }

    state = {
        animate: false,
        fadeAnim: new Animated.Value(),
        previousScene: null
    }

    render() {
        /* current scene by props */
        const currentScene = this.props.currentScene;

        /* previous scene is set in state */
        const previousScene = this.state.previousScene;

        return (
            <View style={[{flex: 1}]}>
                {/* PREVIOUS SCREEN */}
                {this.previousScene
                 ? <Animated.View
                     key={previousScene.name}
                     style={{
                         opacity: this.state.fadeAnim.interpolate({
                             inputRange: [0.65, 1],
                             outputRange: [0.1, 0]
                         }),
                         top: 0,
                         bottom: 0,
                         right: 0,
                         left: 0,
                         position: "absolute"
                     }}
                   >
                       {React.createElement(components[previousScene.name], previousScene)}
                   </Animated.View>
                 : null}
                {/* NEW SCREEN */}
                <Animated.View
                    key={currentScene.name}
                    style={{
                        opacity: this.state.fadeAnim,
                        top: 0,
                        bottom: 0,
                        right: 0,
                        left: 0,
                        position: "absolute"
                    }}
                >
                    {React.createElement(components[currentScene.name], currentScene)}
                </Animated.View>
                <TouchableHighlight
                    style={{
                        height: 100,
                        borderWidth: 1
                    }}
                    onPress={this.props.onPress}
                >
                    <Text>
                        TAP ME
                    </Text>
                </TouchableHighlight>
            </View>
        )
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.currentScene.name === "LoginScreen" && nextProps.currentScene.name === "HomeScreen") {
            this.setState({
                animate: true,
                previousScene: this.props.currentScene
            })

        } else {
            this.setState({
                animate: false,
                previousScene: null
            })
        }
    }

    componentDidUpdate() {
        if (this.state.animate) {
            this.state.fadeAnim.setValue(0.65);
            Animated.timing(
                this.state.fadeAnim,
                {toValue: 1}
            ).start();
        }
    }
}

export default MyNavigator;

View1.js

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

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

class View1 extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit index.android.js
                </Text>
                <Text style={styles.instructions}>
                    Shake or press menu button for dev menu
                </Text>
            </View>
        )
    }
}

export default View1;

View2.js

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

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

class View2 extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native Second View!
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit index.android.js
                </Text>
                <Text style={styles.instructions}>
                    Shake or press menu button for dev menu
                </Text>
            </View>
        )
    }
}

export default View2;