Move example to origin

example/src/app.js

@@ -1,93 +1,59 @@
-import {
-  Platform
-} from 'react-native';
-import {Navigation} from 'react-native-navigation';
+import { Platform } from 'react-native';
+import { Navigation } from 'react-native-navigation';
+import registerScreens from './screens';
 
 // screen related book keeping
-import {registerScreens} from './screens';
 registerScreens();
 
-const SHOW_SHARED_ELEMENT_SCREENS = false;
+const tabs = [{
+    label: 'Navigation',
+    screen: 'example.Types',
+    icon: require('../img/list.png'),
+    title: 'Navigation Types',
+}, {
+    label: 'Actions',
+    screen: 'example.Actions',
+    icon: require('../img/swap.png'),
+    title: 'Navigation Actions',
+}];
 
-const createTabs = () => {
-  const sharedElementScreens = Platform.OS === 'android' ? [
-    {
-      label: 'Card',
-      screen: 'example.CardScreen',
-      icon: require('../img/list.png'),
-      title: 'Shared Element Transition'
-    },
-    {
-      label: 'SET',
-      screen: 'example.ListScreen',
-      icon: require('../img/list.png'),
-      title: 'Shared Element Transition'
-    }
-  ] : null;
-
-  let tabs = [
-    {
-      label: 'One',
-      screen: 'example.FirstTabScreen',
-      icon: require('../img/one.png'),
-      selectedIcon: require('../img/one_selected.png'),
-      title: 'Screen One'
-    },
-    {
-      label: 'Two',
-      screen: 'example.SecondTabScreen',
-      icon: require('../img/two.png'),
-      selectedIcon: require('../img/two_selected.png'),
-      title: 'Screen Two',
-      navigatorStyle: {
-        tabBarBackgroundColor: '#4dbce9',
-      }
-    }
-  ];
-  if (Platform.OS === 'android') {
+if (Platform.OS === 'android') {
     tabs.push({
-      label: 'Collapsing',
-      screen: 'example.CollapsingTopBarScreen',
-      icon: require('../img/one.png'),
-      title: 'Collapsing',
+        label: 'Transitions',
+        screen: 'example.Transitions',
+        icon: require('../img/transform.png'),
+        title: 'Navigation Transitions',
     });
-    if (SHOW_SHARED_ELEMENT_SCREENS) {
-      tabs = [...sharedElementScreens, ...tabs];
-    }
-  }
-  return tabs;
-};
+}
+
 // this will start our app
 Navigation.startTabBasedApp({
-  tabs: createTabs(),
-  appStyle: {
-    tabBarBackgroundColor: '#0f2362',
-    tabBarButtonColor: '#ffffff',
-    tabBarSelectedButtonColor: '#63d7cc',
-    tabFontFamily: 'BioRhyme-Bold',
-    forceTitlesDisplay: true
-  },
-  drawer: {
-    left: {
-      screen: 'example.SideMenu'
+    tabs,
+    tabsStyle: {
+        tabBarBackgroundColor: '#003a66',
+        navBarButtonColor: '#ffffff',
+        tabBarButtonColor: '#ffffff',
+        navBarTextColor: '#ffffff',
+        tabBarSelectedButtonColor: '#ff505c',
+        navigationBarColor: '#003a66',
+        navBarBackgroundColor: '#003a66',
+        statusBarColor: '#002b4c',
+        tabFontFamily: 'BioRhyme-Bold',
+    },
+    appStyle: {
+        tabBarBackgroundColor: '#003a66',
+        navBarButtonColor: '#ffffff',
+        tabBarButtonColor: '#ffffff',
+        navBarTextColor: '#ffffff',
+        tabBarSelectedButtonColor: '#ff505c',
+        navigationBarColor: '#003a66',
+        navBarBackgroundColor: '#003a66',
+        statusBarColor: '#002b4c',
+        tabFontFamily: 'BioRhyme-Bold',
+    },
+    drawer: {
+        left: {
+            screen: 'example.Types.Drawer'
+        }
     }
-  }
 });
-//Navigation.startSingleScreenApp({
-//  screen: {
-//    screen: 'example.FirstTabScreen',
-//    title: 'Navigation',
-//    navigatorStyle: {
-//      navBarBackgroundColor: '#4dbce9',
-//      navBarTextColor: '#ffff00',
-//      navBarSubtitleTextColor: '#ff0000',
-//      navBarButtonColor: '#ffffff',
-//      statusBarTextColorScheme: 'light'
-//    }
-//  },
-//  drawer: {
-//    left: {
-//      screen: 'example.SideMenu'
-//    }
-//  }
-//});

example/src/components/Row.js

@@ -0,0 +1,41 @@
+import React, { PropTypes } from 'react';
+import { StyleSheet, View, Text, TouchableHighlight, Platform } from 'react-native';
+
+function Row({ title, onPress, platform }) {
+    if (platform && platform !== Platform.OS) {
+        return <View />;
+    }
+
+    return (
+        <TouchableHighlight
+            onPress={onPress}
+            underlayColor={'rgba(0, 0, 0, 0.054)'}
+        >
+            <View style={styles.row}>
+                <Text style={styles.text}>{title}</Text>
+            </View>
+        </TouchableHighlight>
+    );
+}
+
+Row.propTypes = {
+    title: PropTypes.string.isRequired,
+    onPress: PropTypes.func.isRequired,
+};
+
+const styles = StyleSheet.create({
+    row: {
+        height: 48,
+        paddingHorizontal: 16,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderBottomWidth: 1,
+        borderBottomColor: 'rgba(0, 0, 0, 0.054)',
+    },
+    text: {
+        fontSize: 16,
+    },
+});
+
+export default Row;

example/src/screens/Actions.js

@@ -0,0 +1,155 @@
+import React from 'react';
+import { StyleSheet, ScrollView } from 'react-native';
+import Row from '../components/Row';
+
+class Actions extends React.Component {
+
+    constructor() {
+        super();
+
+        this._fab = false;
+        this._rightButton = null;
+        this._contextualMenu = false;
+        this._toggleTabs = 'shown';
+        this._toggleNavBar = 'shown';
+    }
+
+    setTitle = () => {
+        this.props.navigator.setTitle({
+            title: 'New Title!',
+        });
+    };
+
+    toggleTabs = () => {
+        const to = this._toggleTabs === 'shown' ? 'hidden' : 'shown';
+
+        this.props.navigator.toggleTabs({
+            to,
+            animated: true,
+        });
+        this._toggleTabs = to;
+    };
+
+    setTabBadge = () => {
+        this.props.navigator.setTabBadge({
+            tabIndex: 1,
+            badge: Math.floor(Math.random() * 20) + 1,
+        });
+    };
+
+    switchToTab = () => {
+        this.props.navigator.switchToTab({
+            tabIndex: 0,
+        });
+    };
+
+    toggleNavBar = () => {
+        const to = this._toggleNavBar === 'shown' ? 'hidden' : 'shown';
+
+        this.props.navigator.toggleNavBar({
+            to,
+            animated: true,
+        });
+        this._toggleNavBar = to;
+    };
+
+    showSnackbar = () => {
+        this.props.navigator.showSnackbar({
+            title: 'Woo Snacks!',
+        });
+    };
+
+    toggleContextualMenu = () => {
+        if (!this._contextualMenu) {
+            this.props.navigator.showContextualMenu({
+                rightButtons: [{
+                    title: 'Edit',
+                    icon: require('../../img/edit.png'),
+                }, {
+                    title: 'Delete',
+                    icon: require('../../img/delete.png'),
+                }],
+                onButtonPressed: (index) => console.log(`Button ${index} tapped`)
+            });
+            this._contextualMenu = true;
+        } else {
+            this.props.navigator.dismissContextualMenu();
+            this._contextualMenu = false;
+        }
+
+    };
+
+    setButtons = () => {
+        let title = '';
+
+        if (!this._rightButton) {
+            title = 'Hello';
+        } else if (this._rightButton === 'Hello') {
+            title = 'Its Me';
+        }
+
+        this.props.navigator.setButtons({
+            rightButtons: [{
+                title,
+                id: 'topRight',
+            }],
+            animated: true,
+        });
+        this._rightButton = title;
+    };
+
+    toggleFAB = () => {
+        if (this._fab) {
+            this.props.navigator.setButtons({
+                fab: {},
+            });
+            this._fab = false;
+        } else {
+            this.props.navigator.setButtons({
+                fab: {
+                    collapsedId: 'share',
+                    collapsedIcon: require('../../img/edit@1x.png'),
+                    expendedId: 'clear',
+                    expendedIcon: require('../../img/edit@1x.png'),
+                    backgroundColor: '#ff505c',
+                    actions: [
+                        {
+                            id: 'mail',
+                            icon: require('../../img/edit@1x.png'),
+                            backgroundColor: '#03A9F4'
+                        },
+                        {
+                            id: 'delete',
+                            icon: require('../../img/delete@1x.png'),
+                            backgroundColor: '#4CAF50'
+                        }
+                    ]
+                },
+                animated: true,
+            });
+            this._fab = true;
+        }
+    };
+
+    render() {
+        return (
+            <ScrollView style={styles.container}>
+                <Row title={'Set Title'} onPress={this.setTitle} />
+                <Row title={'Toggle Tabs'} onPress={this.toggleTabs} />
+                <Row title={'Set Tab Badge'} onPress={this.setTabBadge} />
+                <Row title={'Switch To Tab 0'} onPress={this.switchToTab} />
+                <Row title={'Toggle Nav Bar'} onPress={this.toggleNavBar} />
+                <Row title={'Show Snackbar'} onPress={this.showSnackbar} platform={'android'} />
+                <Row title={'Toggle Contextual Menu'} onPress={this.toggleContextualMenu} platform={'android'} />
+                <Row title={'Set Right Buttons'} onPress={this.setButtons} />
+                <Row title={'Toggle FAB'} onPress={this.toggleFAB} platform={'android'} />
+            </ScrollView>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {},
+});
+
+export default Actions;

example/src/screens/CollapsingTopBarScreen.android.js

@@ -1,133 +0,0 @@
-import React, {Component} from 'react';
-import {
-  Text,
-  View,
-  ScrollView,
-  TouchableOpacity,
-  StyleSheet,
-} from 'react-native';
-
-// collapsingToolBarImage: require('../../img/gyro_header.jpg'),
-// collapsingToolBarImage: "https://static.wixstatic.com/media/ec14061b42d1dc5b809367f7cfda8eff.jpg/v1/fill/w_1002,h_499,q_80/ec14061b42d1dc5b809367f7cfda8eff.webp",
-
-export default class ThirdTabScreen extends Component {
-  static navigatorStyle = {
-    drawUnderTabBar: true,
-    navBarButtonColor: '#ffffff',
-    navBarTextColor: '#ffffff',
-    collapsingToolBarImage: require('../../img/gyro_header.jpg'),
-    collapsingToolBarCollapsedColor: '#0f2362',
-    navBarBackgroundColor: '#eeeeee'
-  };
-
-  static navigatorButtons = {
-    rightButtons: [
-      {
-        title: 'Edit',
-        id: 'edit'
-      },
-      {
-        icon: require('../../img/navicon_add.png'),
-        id: 'add'
-      }
-    ]
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      navBarVisibility: 'shown'
-    }
-  }
-  render() {
-    return (
-        <ScrollView style={styles.container}>
-          <View style={{flex: 1, backgroundColor: '#ffffff'}}>
-            <Text style={styles.button}>Row 0</Text>
-            <Text style={styles.button}>Row 1</Text>
-            <Text style={styles.button}>Row 2</Text>
-            <Text style={styles.button}>Row 3</Text>
-            <Text style={styles.button}>Row 4</Text>
-            <Text style={styles.button}>Row 5</Text>
-            <Text style={styles.button}>Row 6</Text>
-            <Text style={styles.button}>Row 7</Text>
-            <Text style={styles.button}>Row 8</Text>
-
-            <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
-              <Text style={styles.button}>Push Plain Screen</Text>
-            </TouchableOpacity>
-
-            <TouchableOpacity onPress={ this.onPushStyledPress.bind(this) }>
-              <Text style={styles.button}>Push Styled Screen</Text>
-            </TouchableOpacity>
-
-            <TouchableOpacity onPress={ this.onPushStyled2Press.bind(this) }>
-              <Text style={styles.button}>Push Styled Screen 2</Text>
-            </TouchableOpacity>
-
-            <TouchableOpacity onPress={ this.onModalPress.bind(this) }>
-              <Text style={styles.button}>Show Modal Screen</Text>
-            </TouchableOpacity>
-
-            <TouchableOpacity onPress={ this.onToggleNavBarPressed.bind(this) }>
-              <Text style={styles.button}>Toggle Navigation Bar</Text>
-            </TouchableOpacity>
-          </View>
-        </ScrollView>
-    );
-  }
-  onPushPress() {
-    this.props.navigator.push({
-      title: "More",
-      screen: "example.PushedScreen"
-    });
-  }
-  onPushStyledPress() {
-    this.props.navigator.push({
-      title: "Styled",
-      screen: "example.StyledScreen"
-    });
-  }
-  onPushStyled2Press () {
-    this.props.navigator.push({
-      title: "Styled",
-      titleImage: require('../../img/two.png'),
-      screen: "example.StyledScreen"
-    });
-  }
-  onModalPress() {
-    this.props.navigator.showModal({
-      title: "Modal",
-      screen: "example.ModalScreen"
-    });
-  }
-
-  onToggleNavBarPressed() {
-    this.state.navBarVisibility = (this.state.navBarVisibility === 'shown') ? 'hidden' : 'shown';
-    this.props.navigator.toggleNavBar({
-      to: this.state.navBarVisibility,
-      animated: true  // true is default
-    });
-  }
-
-  componentDidUpdate() {
-    console.error('this is an error: ' + Math.random());
-    this.state.navBarState = 'shown';
-  }
-
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 20,
-    backgroundColor: '#eeeeee'
-  },
-  button: {
-    textAlign: 'center',
-    fontSize: 18,
-    marginBottom: 10,
-    marginTop:30,
-    color: 'blue'
-  }
-});

example/src/screens/FirstTabScreen.js

@@ -1,166 +0,0 @@
-import React, {Component} from 'react';
-import {
-  Text,
-  View,
-  TouchableOpacity,
-  StyleSheet,
-  Alert,
-  Platform
-} from 'react-native';
-import {Navigation} from 'react-native-navigation';
-
-export default class FirstTabScreen extends Component {
-  static navigatorButtons = {
-    leftButtons: [{
-      icon: require('../../img/navicon_menu.png'),
-      id: 'menu'
-    }],
-    rightButtons: [
-      {
-        title: 'Edit',
-        id: 'edit'
-      },
-      {
-        icon: require('../../img/navicon_add.png'),
-        id: 'add'
-      }
-    ]
-  };
-  static navigatorStyle = {
-    navBarBackgroundColor: '#4dbce9',
-    navBarTextColor: '#ffff00',
-    navBarSubtitleTextColor: '#ff0000',
-    navBarButtonColor: '#ffffff',
-    statusBarTextColorScheme: 'light',
-    tabBarBackgroundColor: '#4dbce9',
-    tabBarButtonColor: '#ffffff',
-    tabBarSelectedButtonColor: '#ffff00',
-  };
-
-  constructor(props) {
-    super(props);
-    // if you want to listen on navigator events, set this up
-    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
-  }
-
-  onNavigatorEvent(event) {
-    if (event.id === 'menu') {
-      this.props.navigator.toggleDrawer({
-        side: 'left',
-        animated: true
-      });
-    }
-    if (event.id === 'edit') {
-      Alert.alert('NavBar', 'Edit button pressed');
-    }
-    if (event.id === 'add') {
-      Alert.alert('NavBar', 'Add button pressed');
-    }
-  }
-
-  render() {
-    return (
-      <View style={{flex: 1, padding: 20}}>
-        <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
-          <Text style={styles.button}>Push Plain Screen</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onPushStyledPress.bind(this) }>
-          <Text style={styles.button}>Push Styled Screen</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onPushCustomNavBarScreen.bind(this) }>
-          <Text style={styles.button}>Push Custom Navigation Bar Screen</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onModalPress.bind(this) }>
-          <Text style={styles.button}>Show Modal Screen</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onLightBoxPress.bind(this) }>
-          <Text style={styles.button}>Show LightBox</Text>
-        </TouchableOpacity>
-
-        {
-          Platform.OS === 'ios' ?
-            <TouchableOpacity onPress={ this.onInAppNotificationPress.bind(this) }>
-              <Text style={styles.button}>Show In-App Notification</Text>
-            </TouchableOpacity> : false
-        }
-
-        <TouchableOpacity onPress={ this.onStartSingleScreenApp.bind(this) }>
-          <Text style={styles.button}>Show Single Screen App</Text>
-        </TouchableOpacity>
-      </View>
-    );
-  }
-
-  onPushPress() {
-    this.props.navigator.push({
-      title: "More",
-      screen: "example.PushedScreen"
-    });
-  }
-
-  onPushStyledPress() {
-    this.props.navigator.push({
-      title: "Styled",
-      screen: "example.StyledScreen"
-    });
-  }
-
-  onModalPress() {
-    this.props.navigator.showModal({
-      title: "Modal",
-      screen: "example.ModalScreen"
-    });
-  }
-
-  onLightBoxPress() {
-    this.props.navigator.showLightBox({
-      screen: "example.LightBoxScreen",
-      style: {
-        backgroundBlur: "dark"
-      },
-      passProps: {
-        greeting: 'hey there'
-      },
-    });
-  }
-
-  onInAppNotificationPress() {
-    this.props.navigator.showInAppNotification({
-      screen: "example.NotificationScreen"
-    });
-  }
-
-  onStartSingleScreenApp() {
-    Navigation.startSingleScreenApp({
-      screen: {
-        screen: 'example.FirstTabScreen'
-      },
-      drawer: {
-        left: {
-          screen: 'example.SideMenu'
-        }
-      }
-    });
-  }
-
-  onPushCustomNavBarScreen() {
-    this.props.navigator.push({
-      title: "Custom Nav Bar",
-      screen: "example.CustomNavBarScreen"
-    });
-  }
-}
-
-const styles = StyleSheet.create({
-  button: {
-    textAlign: 'center',
-    fontSize: 18,
-    marginBottom: 10,
-    marginTop: 10,
-    color: 'blue'
-  }
-});

example/src/screens/InAppNotification.js

@@ -1,41 +0,0 @@
-import React, {Component} from 'react';
-import {
-  Text,
-  View,
-  TouchableHighlight,
-  StyleSheet,
-  Alert
-} from 'react-native';
-
-const styleSheet = StyleSheet.create({
-  container: {
-    height: 120,
-    backgroundColor: 'white',
-    alignItems: 'center',
-    justifyContent: 'center',
-  }
-});
-
-let globalCounter = 0;
-export default class InAppNotification extends Component {
-
-  constructor(props) {
-    super(props);
-    this._counter = globalCounter++;
-  }
-
-  render() {
-    const message = `I'm notification #${this._counter}!`;
-    return (
-      <View style={styleSheet.container}>
-          <Text style={{color: 'black', fontSize: 20}}>{message}</Text>
-          <TouchableHighlight onPress={() => {
-            this.props.navigator.dismissInAppNotification();
-            Alert.alert(`You've tapped on notification #${this._counter}`, 'We hope you had fun!');
-          }}>
-            <Text>Tap Me</Text>
-          </TouchableHighlight>
-      </View>
-    );
-  }
-}

example/src/screens/LightBoxScreen.js

@@ -1,62 +0,0 @@
-import React, {Component} from 'react';
-import {
-  StyleSheet,
-  Text,
-  View,
-  TouchableOpacity,
-  Dimensions
-} from 'react-native';
-
-export default class LightBoxScreen extends Component {
-  constructor(props) {
-    super(props);
-  }
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          This is a LightBox!
-        </Text>
-        {
-          this.props.greeting &&
-            <Text style={[styles.welcome, {fontSize: 16, marginTop: 20}]}>
-              {this.props.greeting}
-            </Text>
-        }
-        <TouchableOpacity onPress={() => this.onDismissPress()}>
-          <Text style={styles.button}>Dismiss</Text>
-        </TouchableOpacity>
-      </View>
-    );
-  }
-  onDismissPress() {
-    this.props.navigator.dismissLightBox();
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    width: Dimensions.get('window').width * 0.8,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'white',
-    borderRadius: 10
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-  button: {
-    textAlign: 'center',
-    fontSize: 18,
-    marginBottom: 10,
-    marginTop:10,
-    color: 'blue'
-  }
-});

example/src/screens/ModalScreen.js

@@ -1,83 +0,0 @@
-import React, {Component} from 'react';
-import {
-  Text,
-  View,
-  ScrollView,
-  TouchableOpacity,
-  StyleSheet
-} from 'react-native';
-
-export default class ModalScreen extends Component {
-  static navigatorButtons = {
-    leftButtons: [{
-      title: 'Close',
-      id: 'close'
-    }]
-  };
-  constructor(props) {
-    super(props);
-    // if you want to listen on navigator events, set this up
-    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
-  }
-  render() {
-    return (
-      <View style={styles.container}>
-
-        <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
-          <Text style={styles.button}>Push Plain Screen</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onPushStyledPress.bind(this) }>
-          <Text style={styles.button}>Push Styled Screen</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onClosePress.bind(this) }>
-          <Text style={styles.button}>Close Modal</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onCloseAllPress.bind(this) }>
-          <Text style={styles.button}>Close All Modals</Text>
-        </TouchableOpacity>
-
-      </View>
-    );
-  }
-  onNavigatorEvent(event) {
-    if (event.id == 'close') {
-      this.props.navigator.dismissModal();
-    }
-  }
-  onPushPress() {
-    this.props.navigator.push({
-      title: "More",
-      screen: "example.PushedScreen"
-    });
-  }
-  onPushStyledPress() {
-    this.props.navigator.push({
-      title: "More",
-      screen: "example.StyledScreen"
-    });
-  }
-  onClosePress() {
-    this.props.navigator.dismissModal();
-  }
-  onCloseAllPress() {
-    this.props.navigator.dismissAllModals();
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: 'white',
-    padding: 20
-  },
-  button: {
-    textAlign: 'center',
-    fontSize: 18,
-    marginBottom: 10,
-    marginTop:10,
-    color: 'blue'
-  }
-});

example/src/screens/NotificationScreen.js

@@ -1,52 +0,0 @@
-import React, {Component} from 'react';
-import {
-  StyleSheet,
-  Text,
-  View,
-  TouchableOpacity,
-  Dimensions
-} from 'react-native';
-
-export default class NotificationScreen extends Component {
-  constructor(props) {
-    super(props);
-  }
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          This is a Notification!
-        </Text>
-        <TouchableOpacity onPress={ this.onDismissPress.bind(this) }>
-          <Text style={styles.button}>Dismiss</Text>
-        </TouchableOpacity>
-      </View>
-    );
-  }
-  onDismissPress() {
-    this.props.navigator.dismissInAppNotification();
-  }
-}
-
-var styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: Dimensions.get('window').width,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#d6e7ad'
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-    paddingTop: 20
-  },
-  button: {
-    textAlign: 'center',
-    fontSize: 18,
-    marginBottom: 10,
-    marginTop:10,
-    color: '#4692ad'
-  }
-});

example/src/screens/PushedScreen.js

@@ -1,82 +0,0 @@
-import React, {Component} from 'react';
-import {
-  Text,
-  View,
-  ScrollView,
-  TouchableOpacity,
-  StyleSheet
-} from 'react-native';
-
-export default class PushedScreen extends Component {
-  static navigatorStyle = {
-    drawUnderTabBar: true
-  };
-  constructor(props) {
-    super(props);
-  }
-  render() {
-    return (
-      <View style={styles.container}>
-        <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
-          <Text style={styles.button}>Push Plain Screen</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onPushStyledPress.bind(this) }>
-          <Text style={styles.button}>Push Styled Screen</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onPopPress.bind(this) }>
-          <Text style={styles.button}>Pop Screen</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onPopToRootPress.bind(this) }>
-          <Text style={styles.button}>Pop To Root</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onResetToPress.bind(this) }>
-          <Text style={styles.button}>Reset To</Text>
-        </TouchableOpacity>
-      </View>
-    );
-  }
-  onPushPress() {
-    this.props.navigator.push({
-      title: "More",
-      screen: "example.PushedScreen"
-    });
-  }
-  onPushStyledPress() {
-    this.props.navigator.push({
-      title: "More",
-      screen: "example.StyledScreen"
-    });
-  }
-  onPopPress() {
-    this.props.navigator.pop();
-  }
-  onPopToRootPress() {
-    this.props.navigator.popToRoot();
-  }
-  onResetToPress() {
-    this.props.navigator.resetTo({
-      title: "New Root",
-      screen: "example.StyledScreen",
-      animated: true
-    });
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 20,
-    backgroundColor: 'white'
-  },
-  button: {
-    textAlign: 'center',
-    fontSize: 18,
-    marginBottom: 10,
-    marginTop:10,
-    color: 'blue'
-  }
-});

example/src/screens/SecondTabScreen.js

@@ -1,146 +0,0 @@
-import React, {Component} from 'react';
-import {
-  Text,
-  View,
-  ScrollView,
-  TouchableOpacity,
-  StyleSheet,
-  Alert
-} from 'react-native';
-
-export default class SecondTabScreen extends Component {
-  static navigatorStyle: {
-    drawUnderTabBar: true,
-    navBarBackgroundColor: '#4dbce9',
-    navBarTextColor: '#ffff00',
-    navBarSubtitleTextColor: '#ff0000',
-    navBarButtonColor: '#ffffff',
-    statusBarTextColorScheme: 'light'
-  };
-
-  constructor(props) {
-    super(props);
-    this.buttonsCounter = 0;
-    // if you want to listen on navigator events, set this up
-    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
-  }
-
-  render() {
-    return (
-      <View style={styles.container}>
-
-        <TouchableOpacity onPress={ this.onChangeButtonsPress.bind(this) }>
-          <Text style={styles.button}>Change Buttons</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onChangeTitlePress.bind(this) }>
-          <Text style={styles.button}>Change Title</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onSwitchTabPress.bind(this) }>
-          <Text style={styles.button}>Switch To Tab#1</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onSetTabBadgePress.bind(this) }>
-          <Text style={styles.button}>Set Tab Badge</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onToggleTabsPress.bind(this) }>
-          <Text style={styles.button}>Toggle Tabs</Text>
-        </TouchableOpacity>
-
-      </View>
-    );
-  }
-  onChangeTitlePress() {
-    this.props.navigator.setTitle({
-      title: Math.round(Math.random() * 100000).toString()
-    });
-  }
-  onChangeButtonsPress() {
-    let buttons;
-    if (this.buttonsCounter % 3 == 0) {
-      buttons = [
-        {
-          title: 'Edit',
-          id: 'edit',
-          disabled: true
-        },
-        {
-          icon: require('../../img/navicon_add.png'),
-          id: 'add'
-        }
-      ];
-    } else if (this.buttonsCounter % 3 == 1) {
-      buttons = [{
-        title: 'Save',
-        id: 'save'
-      }];
-    } else {
-      buttons = [];
-    }
-    this.buttonsCounter++;
-
-    this.props.navigator.setButtons({
-      rightButtons: buttons,
-      animated: true
-    });
-  }
-  onSwitchTabPress() {
-    this.props.navigator.switchToTab({
-      tabIndex: 0
-    });
-  }
-  onSetTabBadgePress() {
-    this.props.navigator.setTabBadge({
-      badge: 12
-    });
-  }
-  onToggleTabsPress() {
-    this.props.navigator.toggleTabs({
-      to: this.tabsHidden ? 'shown' : 'hidden'
-    });
-    this.tabsHidden = !this.tabsHidden;
-  }
-  onNavigatorEvent(event) {
-    // handle a deep link
-    if (event.type == 'DeepLink') {
-      const parts = event.link.split('/');
-      if (parts[0] == 'tab2') {
-        this.props.navigator.resetTo({
-          title: "Replaced Root",
-          screen: parts[1],
-          animated: true
-        });
-        this.props.navigator.switchToTab();
-      }
-    }
-    // handle a button press
-    if (event.type == 'NavBarButtonPress') {
-      if (event.id == 'edit') {
-        Alert.alert('NavBar', 'Dynamic Edit button pressed');
-      }
-      if (event.id == 'add') {
-        Alert.alert('NavBar', 'Dynamic Add button pressed');
-      }
-      if (event.id == 'save') {
-        Alert.alert('NavBar', 'Dynamic Save button pressed');
-      }
-    }
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 20,
-    backgroundColor: 'white'
-  },
-  button: {
-    textAlign: 'center',
-    fontSize: 18,
-    marginBottom: 10,
-    marginTop:10,
-    color: 'blue'
-  }
-});

example/src/screens/SideMenu.js

@@ -1,94 +0,0 @@
-import React, {Component} from 'react';
-import {
-  Text,
-  View,
-  ScrollView,
-  TouchableOpacity,
-  StyleSheet,
-  AlertIOS
-} from 'react-native';
-
-export default class SideMenu extends Component {
-  constructor(props) {
-    super(props);
-  }
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.title}>Side Menu</Text>
-
-        <TouchableOpacity onPress={ this.onReplaceTab2Press.bind(this) }>
-          <Text style={styles.button}>Replace Tab#2 Root</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onModalPress.bind(this) }>
-          <Text style={styles.button}>Show Modal Screen</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onShowInAppNotification.bind(this) }>
-          <Text style={styles.button}>Show In-App Notification</Text>
-        </TouchableOpacity>
-
-    </View>
-    );
-  }
-  onReplaceTab2Press() {
-    this._toggleDrawer();
-    // push/pop navigator actions affect the navigation stack of the current screen only.
-    // since side menu actions are normally directed at sibling tabs, push/pop will
-    // not help us. the recommended alternative is to use deep links for this purpose
-    this.props.navigator.handleDeepLink({
-      link: "tab2/example.PushedScreen"
-    });
-  }
-
-  onModalPress() {
-    this._toggleDrawer();
-    this.props.navigator.showModal({
-      title: "Modal",
-      screen: "example.ModalScreen"
-    });
-  }
-
-  onShowInAppNotification() {
-    this._toggleDrawer();
-    this.props.navigator.showInAppNotification({
-      screen: "example.InAppNotification",
-      // autoDismiss: false,
-      // autoDismissTimerSec: 1,
-      // position: "bottom",
-    });
-  }
-
-  _toggleDrawer() {
-    this.props.navigator.toggleDrawer({
-      to: 'closed',
-      side: 'left',
-      animated: true
-    });
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    backgroundColor: 'white',
-    justifyContent: 'center',
-    width: 300
-  },
-  title: {
-    textAlign: 'center',
-    fontSize: 18,
-    marginBottom: 10,
-    marginTop:10,
-    fontWeight: '500'
-  },
-  button: {
-    textAlign: 'center',
-    fontSize: 18,
-    marginBottom: 10,
-    marginTop:10,
-    color: 'blue'
-  }
-});

example/src/screens/StyledScreen.js

@@ -1,121 +0,0 @@
-import React, {Component} from 'react';
-import {
-  Text,
-  View,
-  ScrollView,
-  TouchableOpacity,
-  Image,
-  StyleSheet,
-  Alert,
-  Platform
-} from 'react-native';
-
-export default class StyledScreen extends Component {
-  static navigatorStyle = {
-    drawUnderNavBar: true,
-    drawUnderTabBar: true,
-    navBarTranslucent: true
-  };
-  static navigatorButtons = {
-    rightButtons: [{
-      icon: require('../../img/navicon_edit.png'),
-      id: 'compose',
-      testID: 'e2e_is_awesome'
-    }]
-  };
-  constructor(props) {
-    super(props);
-    // if you want to listen on navigator events, set this up
-    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
-  }
-  render() {
-    return (
-      <ScrollView style={styles.container}>
-        <Image style={{width: undefined, height: 100}} source={require('../../img/colors.png')} />
-
-        <View style={{padding: 20}}>
-          <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
-            <Text style={styles.button}>Push Plain Screen</Text>
-          </TouchableOpacity>
-
-          <TouchableOpacity onPress={ this.onPushStyledPress.bind(this) }>
-            <Text style={styles.button}>Push Styled Screen</Text>
-          </TouchableOpacity>
-
-          <TouchableOpacity onPress={ this.onPopPress.bind(this) }>
-            <Text style={styles.button}>Pop Screen</Text>
-          </TouchableOpacity>
-  
-          <TouchableOpacity onPress={ this.onSetSubtitlePress.bind(this) }>
-            <Text style={styles.button}>Set Subtitle</Text>
-          </TouchableOpacity>
-  
-          <TouchableOpacity onPress={ this.onSetTitleImagePress.bind(this) }>
-            <Text style={styles.button}>Set Title Image</Text>
-          </TouchableOpacity>
-        </View>
-
-      </ScrollView>
-    );
-  }
-  onNavigatorEvent(event) {
-    if (event.id == 'compose') {
-      Alert.alert('NavBar', 'Compose button pressed');
-    }
-  }
-  onPushPress() {
-    this.props.navigator.push({
-      title: "More",
-      screen: "example.PushedScreen"
-    });
-  }
-  onPushStyledPress() {
-    this.props.navigator.push({
-      title: "More",
-      screen: "example.StyledScreen"
-    });
-  }
-  onPopPress() {
-    this.props.navigator.pop();
-  }
-  
-  onSetSubtitlePress() {
-    if (Platform.OS === 'android') {
-      this.props.navigator.setSubTitle({
-        subtitle: 'Subtitle'
-      });
-    } else {
-      this.props.navigator.setTitle({
-        title: 'title',
-        subtitle: 'subtitle',
-        navigatorStyle: {
-          navBarSubtitleTextColor: '#ff00ff',
-          navBarTextColor: '#ffff00'
-
-        }
-      })
-    }
-  }
-  
-  onSetTitleImagePress() {
-    this.props.navigator.setTitle({
-      title: 'title',
-      titleImage: require('../../img/one.png'),
-    })
-  }
-  
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: 'white'
-  },
-  button: {
-    textAlign: 'center',
-    fontSize: 18,
-    marginBottom: 10,
-    marginTop:10,
-    color: 'blue'
-  }
-});

example/src/screens/Transitions.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { StyleSheet, ScrollView, Text } from 'react-native';
+import Row from '../components/Row';
+
+class Transitions extends React.Component {
+
+    showCollapsingHeader = () => {
+      this.props.navigator.showModal({
+          title: 'Collapsing Header',
+          screen: 'example.Transitions.CollapsingHeader',
+      });
+    };
+
+    showSharedElementTransitions = () => {
+        this.props.navigator.showModal({
+            title: 'Shared Element Transition Examples',
+            screen: 'example.Transitions.SharedElementTransitions',
+        });
+    };
+
+    render() {
+        return (
+            <ScrollView style={styles.container}>
+                <Row title={'Collapsing Header'} onPress={this.showCollapsingHeader} />
+                <Row title={'Shared Element Transition'} onPress={this.showSharedElementTransitions} />
+            </ScrollView>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+});
+
+export default Transitions;

example/src/screens/Types.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import { StyleSheet, View, Text, ScrollView, TouchableHighlight } from 'react-native';
+import Row from '../components/Row';
+
+class Types extends React.Component {
+
+    toggleDrawer = () => {
+        this.props.navigator.toggleDrawer({
+            side: 'left',
+            animated: true
+        });
+    };
+
+    pushScreen = () => {
+        this.props.navigator.push({
+            screen: 'example.Types.Push',
+            title: 'New Screen',
+        });
+    };
+
+    pushTopTabsScreen = () => {
+        this.props.navigator.push({
+            screen: 'example.Types.TopTabs',
+            title: 'Top Tabs',
+            topTabs: [{
+                screenId: 'example.Types.TopTabs.TabOne',
+                title: 'Tab One',
+            }, {
+                screenId: 'example.Types.TopTabs.TabTwo',
+                title: 'Tab Two',
+            }],
+        });
+    };
+
+    showModal = () => {
+        this.props.navigator.showModal({
+            screen: 'example.Types.Modal',
+            title: 'Modal',
+        });
+    };
+
+    showLightBox = () => {
+        this.props.navigator.showLightBox({
+            screen: "example.Types.LightBox",
+            passProps: {
+                title: 'LightBox',
+                content: 'Hey there, I\'m a light box screen :D',
+                onClose: this.dismissLightBox,
+            },
+            style: {
+                backgroundBlur: 'dark',
+                backgroundColor: 'rgba(0, 0, 0, 0.7)',
+            }
+        });
+    };
+
+    dismissLightBox = () => {
+        this.props.navigator.dismissLightBox();
+    };
+
+    showInAppNotification = () => {
+        this.props.navigator.showInAppNotification({
+            screen: 'example.Types.Notification',
+        });
+    };
+
+    render() {
+        return (
+            <ScrollView style={styles.container}>
+                <Row title={'Toggle Drawer'} onPress={this.toggleDrawer} />
+                <Row title={'Push Screen'} onPress={this.pushScreen} />
+                <Row title={'Top Tabs Screen'} onPress={this.pushTopTabsScreen} platform={'android'} />
+                <Row title={'Show Modal'} onPress={this.showModal} />
+                <Row title={'Show Lightbox'} onPress={this.showLightBox} />
+                <Row title={'Show In-App Notification'} onPress={this.showInAppNotification} />
+            </ScrollView>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    row: {
+        height: 48,
+        paddingHorizontal: 16,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderBottomWidth: 1,
+        borderBottomColor: 'rgba(0, 0, 0, 0.054)',
+    },
+    text: {
+        fontSize: 16,
+    },
+});
+
+export default Types;

example/src/screens/index.android.js

@@ -1,32 +0,0 @@
-import {Navigation} from 'react-native-navigation';
-
-import FirstTabScreen from './FirstTabScreen';
-import SecondTabScreen from './SecondTabScreen';
-import PushedScreen from './PushedScreen';
-import StyledScreen from './StyledScreen';
-import SideMenu from './SideMenu';
-import ModalScreen from './ModalScreen';
-import CollapsingTopBarScreen from './CollapsingTopBarScreen';
-import InAppNotification from './InAppNotification';
-import LightBoxScreen from './LightBoxScreen';
-import ListScreen from './set/ListScreen';
-import HeroScreen from './set/HeroScreen';
-import CardScreen from './set/CardScreen';
-import InfoScreen from './set/InformationScreen';
-
-// register all screens of the app (including internal ones)
-export function registerScreens() {
-  Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen);
-  Navigation.registerComponent('example.SecondTabScreen', () => SecondTabScreen);
-  Navigation.registerComponent('example.PushedScreen', () => PushedScreen);
-  Navigation.registerComponent('example.StyledScreen', () => StyledScreen);
-  Navigation.registerComponent('example.ModalScreen', () => ModalScreen);
-  Navigation.registerComponent('example.SideMenu', () => SideMenu);
-  Navigation.registerComponent('example.CollapsingTopBarScreen', () => CollapsingTopBarScreen);
-  Navigation.registerComponent('example.InAppNotification', () => InAppNotification);
-  Navigation.registerComponent('example.LightBoxScreen', () => LightBoxScreen);
-  Navigation.registerComponent('example.ListScreen', () => ListScreen);
-  Navigation.registerComponent('example.HeroScreen', () => HeroScreen);
-  Navigation.registerComponent('example.CardScreen', () => CardScreen);
-  Navigation.registerComponent('example.infoScreen', () => InfoScreen);
-}

example/src/screens/index.ios.js

@@ -1,28 +0,0 @@
-import {Navigation} from 'react-native-navigation';
-
-import FirstTabScreen from './FirstTabScreen';
-import SecondTabScreen from './SecondTabScreen';
-import PushedScreen from './PushedScreen';
-import StyledScreen from './StyledScreen';
-import SideMenu from './SideMenu';
-import ModalScreen from './ModalScreen';
-import NotificationScreen from './NotificationScreen';
-import LightBoxScreen from './LightBoxScreen';
-import CustomNavBarScreen from './CustomNavBarScreen';
-import CustomNavBar from './CustomNavBar';
-
-
-// register all screens of the app (including internal ones)
-export function registerScreens() {
-  Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen);
-  Navigation.registerComponent('example.SecondTabScreen', () => SecondTabScreen);
-  Navigation.registerComponent('example.PushedScreen', () => PushedScreen);
-  Navigation.registerComponent('example.StyledScreen', () => StyledScreen);
-  Navigation.registerComponent('example.ModalScreen', () => ModalScreen);
-  Navigation.registerComponent('example.NotificationScreen', () => NotificationScreen);
-  Navigation.registerComponent('example.SideMenu', () => SideMenu);
-  Navigation.registerComponent('example.LightBoxScreen', () => LightBoxScreen);
-
-  Navigation.registerComponent('example.CustomNavBarScreen', () => CustomNavBarScreen);
-  Navigation.registerComponent('example.CustomNavBar', () => CustomNavBar);
-}

example/src/screens/index.js

@@ -0,0 +1,70 @@
+import { Navigation } from 'react-native-navigation';
+
+// import FirstTabScreen from './FirstTabScreen';
+// import SecondTabScreen from './SecondTabScreen';
+// import PushedScreen from './PushedScreen';
+// import StyledScreen from './StyledScreen';
+// import SideMenu from './SideMenu';
+// import ModalScreen from './ModalScreen';
+// import NotificationScreen from './NotificationScreen';
+// import LightBoxScreen from './LightBoxScreen';
+
+// register all screens of the app (including internal ones)
+// export function registerScreens() {
+//   Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen);
+//   Navigation.registerComponent('example.SecondTabScreen', () => SecondTabScreen);
+//   Navigation.registerComponent('example.PushedScreen', () => PushedScreen);
+//   Navigation.registerComponent('example.StyledScreen', () => StyledScreen);
+//   Navigation.registerComponent('example.ModalScreen', () => ModalScreen);
+//   Navigation.registerComponent('example.NotificationScreen', () => NotificationScreen);
+//   Navigation.registerComponent('example.SideMenu', () => SideMenu);
+//   Navigation.registerComponent('example.LightBoxScreen', () => LightBoxScreen);
+// }
+
+import Types from './Types';
+import Actions from './Actions';
+import Transitions from './Transitions';
+
+import Push from './types/Push';
+import Drawer from './types/Drawer';
+import LightBox from './types/LightBox';
+import Notification from './types/Notification';
+import Modal from './types/Modal';
+import TopTabs from './types/TopTabs';
+import TabOne from './types/tabs/TabOne';
+import TabTwo from './types/tabs/TabTwo';
+
+import CollapsingHeader from './transitions/CollapsingHeader';
+import SharedElementTransitions from './transitions/SharedElementTransitions';
+
+import Cards from './transitions/sharedElementTransitions/Cards/Cards';
+import CardsInfo from './transitions/sharedElementTransitions/Cards/Info';
+
+// import Profiles from './transitions/sharedElementTransitions/Profiles/Profiles';
+
+import Masonry from './transitions/sharedElementTransitions/Masonry/Masonry';
+import MasonryItem from './transitions/sharedElementTransitions/Masonry/Item';
+
+export default function () {
+    Navigation.registerComponent('example.Types', () => Types);
+    Navigation.registerComponent('example.Actions', () => Actions);
+    Navigation.registerComponent('example.Transitions', () => Transitions);
+
+    Navigation.registerComponent('example.Types.Push', () => Push);
+    Navigation.registerComponent('example.Types.Drawer', () => Drawer);
+    Navigation.registerComponent('example.Types.Screen', () => Drawer);
+    Navigation.registerComponent('example.Types.Modal', () => Modal);
+    Navigation.registerComponent('example.Types.LightBox', () => LightBox);
+    Navigation.registerComponent('example.Types.Notification', () => Notification);
+    Navigation.registerComponent('example.Types.TopTabs', () => TopTabs);
+    Navigation.registerComponent('example.Types.TopTabs.TabOne', () => TabOne);
+    Navigation.registerComponent('example.Types.TopTabs.TabTwo', () => TabTwo);
+
+    Navigation.registerComponent('example.Transitions.CollapsingHeader', () => CollapsingHeader);
+    Navigation.registerComponent('example.Transitions.SharedElementTransitions', () => SharedElementTransitions);
+    Navigation.registerComponent('example.Transitions.SharedElementTransitions.Cards', () => Cards);
+    Navigation.registerComponent('example.Transitions.SharedElementTransitions.Cards.Info', () => CardsInfo);
+    // Navigation.registerComponent('example.Transitions.SharedElementTransitions.Profiles', () => Profiles);
+    Navigation.registerComponent('example.Transitions.SharedElementTransitions.Masonry', () => Masonry);
+    Navigation.registerComponent('example.Transitions.SharedElementTransitions.Masonry.Item', () => MasonryItem);
+}

example/src/screens/set/CardScreen.js

@@ -1,118 +0,0 @@
-import React, {Component} from 'react';
-import {
-  ScrollView,
-  TouchableWithoutFeedback,
-  TouchableNativeFeedback,
-  StyleSheet,
-  Image,
-  Text,
-  View,
-  Platform,
-  ScrolView
-} from 'react-native';
-import {SharedElementTransition} from 'react-native-navigation';
-import * as Animatable from 'react-native-animatable';
-import * as setStyles from './styles';
-
-const IMAGE_HEIGHT = 190;
-
-export default class CardScreen extends Component {
-  static navigatorStyle = {
-    ...setStyles.navigatorStyle
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-
-  render() {
-    return (
-      <ScrollView>
-        <View style={[styles.container]}>
-          {this._renderCard(0)}
-          {this._renderCard(1)}
-          {this._renderCard(2)}
-        </View>
-      </ScrollView>
-    );
-  }
-
-  _renderCard(index) {
-    return (
-      <View style={styles.cardContainer}>
-        <TouchableWithoutFeedback onPress={() => this._onCardPress(index)}>
-          {this._renderImage(index)}
-        </TouchableWithoutFeedback>
-        <TouchableNativeFeedback onPress={() => this._onCardPress(index)}>
-          {this._renderCardContent()}
-        </TouchableNativeFeedback>
-      </View>
-    );
-  }
-
-  _onCardPress(index) {
-    this.props.navigator.push({
-      screen: 'example.infoScreen',
-      _title: 'Shared Element Transition',
-      sharedElements: [`image${index}`],
-      animated: false,
-      overrideBackPress: true,
-      passProps: {
-        sharedImageId: `image${index}`
-      }
-    })
-  }
-
-  _renderImage(index) {
-    return (
-      <SharedElementTransition
-        style={styles.imageContainer}
-        sharedElementId={`image${index}`}
-      >
-        <Image
-          style={styles.image}
-          source={require('../../../img/beach.jpg')}
-        />
-      </SharedElementTransition>
-    );
-  }
-
-  _renderCardContent() {
-    return (
-      <View style={styles.cardContentContainer}>
-        <Text style={styles.title}>This is a title</Text>
-        <Text>This is a very long long long long long long long long long long content</Text>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    marginVertical: 16,
-    marginHorizontal: 8,
-  },
-  cardContainer: {
-    marginVertical: 8,
-    elevation: 2,
-    borderRadius: 2,
-    backgroundColor: '#F5F5F5'
-  },
-  imageContainer: {
-    justifyContent: 'flex-start'
-  },
-  image: {
-    height: IMAGE_HEIGHT,
-    borderTopLeftRadius: 2,
-    borderTopRightRadius: 2
-  },
-  cardContentContainer: {
-    padding: 8
-  },
-  title: {
-    fontWeight: '500',
-    paddingBottom: 8,
-    fontSize: 17
-  }
-});

example/src/screens/set/HeroScreen.js

@@ -1,216 +0,0 @@
-import React, {Component} from 'react';
-import {
-  ScrollView,
-  TouchableOpacity,
-  StyleSheet,
-  Image,
-  Text,
-  View,
-  ScrolView
-} from 'react-native';
-import {SharedElementTransition} from 'react-native-navigation';
-import * as Animatable from 'react-native-animatable';
-import * as heroStyles from './styles';
-
-const FADE_DURATION = 500;
-const SHOW_DURATION = 500;
-const HIDE_DURATION = 500;
-
-const HEADER_HEIGHT = 120;
-const ICON_MARGIN = 24;
-
-export default class HeroScreen extends Component {
-  static navigatorStyle = {
-    ...heroStyles.navigatorStyle
-  };
-
-  constructor(props) {
-    super(props);
-    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
-    this.state = {
-      animationType: 'fadeIn'
-    }
-  }
-
-  componentDidMount() {
-    if (__STRESS_TEST__) {
-      setTimeout(() => {
-        this.setState({
-          animationType: 'fadeOut'
-        });
-        this.props.navigator.pop();
-      }, 650);
-    }
-  }
-
-  render() {
-    return (
-      <ScrollView style={[styles.container]}>
-        {this._renderHeader()}
-        {this._renderContent()}
-      </ScrollView>
-    );
-  }
-
-  _renderHeader() {
-    return (
-        <Animatable.View
-          animation={this.state.animationType}
-          duration={FADE_DURATION}
-          style={[styles.header, {backgroundColor: this.props.primaryColor}]}
-          useNativeDriver={true}
-        >
-          <View style={{height: ICON_MARGIN, flexDirection: 'row', backgroundColor: 'white'}}/>
-          <View style={{flex: 1, flexDirection: 'row'}}>
-            {this._renderIcon()}
-            {this._renderTitle()}
-          </View>
-      </Animatable.View>
-    );
-  }
-
-  _renderTitle() {
-    return (
-      <View style={{alignSelf: 'flex-end'}}>
-        <SharedElementTransition
-          style={styles.titleContainer}
-          sharedElementId={this.props.sharedTitleId}
-          showDuration={SHOW_DURATION}
-          hideDuration={HIDE_DURATION}
-          showInterpolation={
-                {
-                  type: 'path',
-                  controlX1: '0.5',
-                  controlY1: '1',
-                  controlX2: '0',
-                  controlY2: '0.5',
-                  easing: 'FastOutSlowIn'
-                }
-              }
-          hideInterpolation={
-                {
-                  type: 'path',
-                  controlX1: '0.5',
-                  controlY1: '0',
-                  controlX2: '1',
-                  controlY2: '0.5',
-                  easing:'FastOutSlowIn'
-                }
-              }
-        >
-          <Text style={[styles.title, {color: this.props.titleColor}]}>{this.props.title}</Text>
-        </SharedElementTransition>
-      </View>
-    );
-  }
-
-  _renderContent() {
-    return (
-      <Animatable.View
-        animation={this.state.animationType}
-        duration={FADE_DURATION}
-        style={styles.body}
-        useNativeDriver={true}>
-        <View
-          style={styles.list}
-          initialListSize={20}>
-          {this._genRows()}
-        </View>
-      </Animatable.View>
-    );
-  }
-
-  _genRows() {
-    const children = [];
-    for (let ii = 0; ii < 30; ii++) {
-      children.push(
-        <Text>{'row ' + ii}</Text>
-      );
-    }
-    return children;
-  }
-
-  _renderIcon() {
-    return (
-      <SharedElementTransition
-        sharedElementId={this.props.sharedIconId}
-        style={styles.iconContainer}
-        showDuration={SHOW_DURATION}
-        hideDuration={HIDE_DURATION}
-        showInterpolation={
-          {
-            type: 'path',
-            controlX1: '0.5',
-            controlY1: '1',
-            controlX2: '0',
-            controlY2: '0.5',
-            easing: 'FastOutSlowIn'
-          }
-        }
-        hideInterpolation={
-          {
-            type: 'path',
-            controlX1: '0.5',
-            controlY1: '0',
-            controlX2: '1',
-            controlY2: '0.5',
-            easing:'FastOutSlowIn'
-          }
-        }
-      >
-        <Image
-          source={this.props.icon}
-          style={styles.heroIcon}
-          fadeDuration={0}
-        />
-      </SharedElementTransition>
-    );
-  }
-
-  onNavigatorEvent(event) {
-    if (event.id === 'backPress') {
-      this.setState({
-        animationType: 'fadeOut'
-      });
-      this.props.navigator.pop();
-    }
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'column',
-    backgroundColor: 'transparent'
-  },
-  header: {
-    height: 110,
-    flexDirection: 'column-reverse'
-  },
-  titleContainer: {
-    marginLeft: ICON_MARGIN + 90 +  + 16,
-    marginBottom: 8
-  },
-  title: {
-    fontSize: 23,
-    ...heroStyles.textLight
-  },
-  iconContainer: {
-    position: 'absolute',
-    bottom: -ICON_MARGIN,
-    left: ICON_MARGIN
-  },
-  heroIcon: {
-    width: 90,
-    height: 90,
-    resizeMode: 'contain'
-  },
-  body: {
-    flex: 4,
-    backgroundColor: 'white',
-  },
-  list: {
-    marginTop: 16,
-    marginHorizontal: 8
-  }
-});

example/src/screens/set/InformationScreen.js

@@ -1,126 +0,0 @@
-import React, {Component} from 'react';
-import {
-  ScrollView,
-  TouchableOpacity,
-  StyleSheet,
-  Image,
-  Text,
-  View,
-  Platform,
-  ScrolView
-} from 'react-native';
-import {SharedElementTransition} from 'react-native-navigation';
-import * as Animatable from 'react-native-animatable';
-import * as setStyles from './styles';
-
-const SHOW_DURATION = 400;
-const HIDE_DURATION = 300;
-
-export default class InfoScreen extends Component {
-  static navigatorStyle = {
-    ...setStyles.navigatorStyle,
-    navBarHideOnScroll: false
-  };
-
-  constructor(props) {
-    super(props);
-    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
-    this.state = {
-      animationType: 'fadeInRight',
-      animationDuration: SHOW_DURATION
-    }
-  }
-
-  onNavigatorEvent(event) {
-    if (event.id === 'backPress') {
-      this.setState({
-        animationType: 'fadeOutRight',
-        animationDuration: HIDE_DURATION
-      });
-      this.props.navigator.pop();
-    }
-  }
-
-  render() {
-    return (
-      <View style={styles.container}>
-        {this._renderImage()}
-        {this._renderContent()}
-      </View>
-    );
-  }
-
-  _renderImage() {
-    return (
-      <SharedElementTransition
-        style={styles.imageContainer}
-        sharedElementId={this.props.sharedImageId}
-        showDuration={SHOW_DURATION}
-        hideDuration={HIDE_DURATION}
-        animateClipBounds={true}
-        showInterpolation={
-          {
-            type: 'linear',
-            easing: 'FastOutSlowIn'
-          }
-        }
-        hideInterpolation={
-        {
-          type: 'linear',
-          easing:'FastOutSlowIn'
-        }
-      }
-      >
-        <Image
-          style={styles.image}
-          source={require('../../../img/beach.jpg')}
-        />
-      </SharedElementTransition>
-    );
-  }
-
-  _renderContent() {
-    return (
-      <Animatable.View
-        style={styles.content}
-        duration={this.state.animationDuration}
-        animation={this.state.animationType}
-        useNativeDriver={true}
-      >
-        <Text style={styles.text}>Line 1</Text>
-        <Text style={styles.text}>Line 2</Text>
-        <Text style={styles.text}>Line 3</Text>
-        <Text style={styles.text}>Line 4</Text>
-        <Text style={styles.text}>Line 5</Text>
-        <Text style={styles.text}>Line 6</Text>
-        <Text style={styles.text}>Line 7</Text>
-        <Text style={styles.text}>Line 8</Text>
-      </Animatable.View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  content: {
-    flex: 1,
-    marginTop: 190,
-    backgroundColor: 'white'
-  },
-  imageContainer: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-  },
-  image: {
-    height: 190
-  },
-  text: {
-    fontSize: 17,
-    paddingVertical: 4,
-    paddingLeft: 8
-  }
-});

example/src/screens/set/ListScreen.js

@@ -1,235 +0,0 @@
-import React, {Component} from 'react';
-import {
-  Text,
-  View,
-  ScrollView,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-  StyleSheet,
-  ListView,
-  Image
-} from 'react-native';
-import heroes from './heroes';
-import {SharedElementTransition} from 'react-native-navigation';
-import * as heroStyles from './styles';
-
-const LOREM_IPSUM = 'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix civibus corrumpit referrentur. Te nam case ludus inciderint, te mea facilisi adipiscing. Sea id integre luptatum. In tota sale consequuntur nec. Erat ocurreret mei ei. Eu paulo sapientem vulputate est, vel an accusam intellegam interesset. Nam eu stet pericula reprimique, ea vim illud modus, putant invidunt reprehendunt ne qui.';
-const hashCode = function(str) {
-  var hash = 15;
-  for (var ii = str.length - 1; ii >= 0; ii--) {
-    hash = ((hash << 5) - hash) + str.charCodeAt(ii);
-  }
-  return hash;
-};
-
-export default class ListScreen extends Component {
-  static navigatorStyle = {
-    ...heroStyles.navigatorStyle
-  };
-
-  static navigatorButtons = {
-    rightButtons: [
-      {
-        title: 'Add',
-        icon: require('../../../img/navicon_add.png'),
-        id: 'add',
-        showAsAction: 'always'
-      },
-      {
-        title: 'All',
-        id: 'all',
-        showAsAction: 'never'
-      },
-      {
-        title: 'Upcoming',
-        id: 'upcoming',
-        showAsAction: 'never'
-      },
-      {
-        title: 'My',
-        id: 'my',
-        showAsAction: 'never'
-      },
-      {
-        title: 'Participant',
-        id: 'participant',
-        showAsAction: 'never'
-      },
-    ],
-    fab: {
-      collapsedId: 'share',
-      collapsedIcon: require('../../../img/navicon_add.png'),
-      backgroundColor: '#31363c'
-    }
-  };
-
-  constructor(props) {
-    super(props);
-    this._onRowPress = this._onRowPress.bind(this);
-    this._renderRow = this._renderRow.bind(this);
-    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
-    this.onPress = [];
-    this.counter = 0;
-
-    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
-    this.state = {
-      dataSource: ds.cloneWithRows(this._genRows({}))
-    }
-  }
-
-  onNavigatorEvent(event) {
-    console.log('ListScreen', 'onNavigatorEvent ', event.id);
-    if (event.id === 'didAppear' && __STRESS_TEST__) {
-      setTimeout(() => {
-        this.onPress[Math.floor((Math.random() * 4))]();
-        console.log('count', this.counter++);
-      }, 750);
-    }
-  }
-
-  render() {
-    return (
-      <ListView
-        dataSource={this.state.dataSource}
-        renderRow={(rowData, sectionID, rowID) => this._renderRow(rowData, sectionID, rowID)}/>
-    );
-  }
-
-  _renderRow(rowData, sectionID, rowID) {
-    console.log('ListScreen', '_renderRow ', rowID);
-    const rowHash = Math.abs(hashCode(rowData.rowTitle));
-    const sharedIconId = "image" + rowID;
-    const sharedTitleId = "title" + rowID;
-
-    const onPress = () => this._onRowPress({
-      rowData,
-      sharedIconId,
-      sharedTitleId
-    });
-    if (['0', '1', '2', '3'].includes(rowID)) {
-      this.onPress.push(onPress);
-    }
-    return (
-      <TouchableWithoutFeedback
-        style={styles.row}
-        onPress={onPress}
-      >
-        <View style={[styles.sharedRowContent, heroStyles.primaryLight]}>
-          {this._renderRowIcon({rowData, sharedIconId})}
-          {this._renderRowContent({rowData, sharedTitleId, rowHash})}
-        </View>
-      </TouchableWithoutFeedback>
-    );
-  }
-
-  _renderRowIcon({rowData, sharedIconId}) {
-    return (
-      <View>
-        <SharedElementTransition
-          key={sharedIconId}
-          sharedElementId={sharedIconId}
-          style={styles.imageContainer}
-        >
-          <Image
-            source={rowData.icon}
-            style={styles.heroIcon}
-            fadeDuration={0}
-          />
-        </SharedElementTransition>
-      </View>
-    );
-  }
-
-  _renderRowContent({rowData, sharedTitleId, rowHash}) {
-    return (
-      <View style={styles.itemContentContainer}>
-        <SharedElementTransition sharedElementId={sharedTitleId}>
-          <Text style={styles.itemTitle}>{rowData.title}</Text>
-        </SharedElementTransition>
-        <Text style={styles.text}>
-          {rowData.rowTitle + ' - ' + LOREM_IPSUM.substr(0, rowHash % 301 + 10)}
-        </Text>
-      </View>
-    );
-  }
-
-  _onRowPress(data) {
-    const {rowData, sharedIconId, sharedTitleId} = data;
-    this.props.navigator.push({
-      screen: 'example.HeroScreen',
-      sharedElements: [
-        data.sharedElementId,
-        data.sharedElementId + 'container'
-      ],
-      animated: false,
-      overrideBackPress: true,
-      passProps: {
-        sharedIconId: sharedIconId,
-        sharedTitleId: sharedTitleId,
-        ...rowData
-      }
-    });
-  }
-
-  _genRows() {
-    const dataBlob = [];
-    for (let ii = 0; ii < 100; ii++) {
-      dataBlob.push({
-        rowTitle: 'Row ' + ii + ' ',
-        icon: heroes[ii % 5].icon,
-        title: heroes[ii % 5].title,
-        primaryColor: heroes[ii % 5].primaryColor,
-        titleColor: heroes[ii % 5].titleColor
-      });
-    }
-    return dataBlob;
-  }
-
-  _renderSeparator(sectionID, rowID) {
-    return (
-      <View
-        key={`${sectionID}-${rowID}`}
-        style={{
-          height: 1,
-          backgroundColor: rowID % 2 == 0 ? '#3B5998' : '#CCCCCC'
-        }}
-      />
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  row: {
-    padding: 5,
-    height: 110,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    borderWidth: 1,
-  },
-  sharedRowContent: {
-    flexDirection: 'row',
-  },
-  imageContainer: {
-    justifyContent: 'center'
-  },
-  heroIcon: {
-    width: 100,
-    height: 100,
-    resizeMode: 'contain'
-  },
-  itemContentContainer: {
-    flex: 1,
-    paddingLeft: 5,
-    flexDirection: 'column',
-    alignItems: 'flex-start'
-  },
-  itemTitle: {
-    fontSize: 19,
-    ...heroStyles.textDark
-  },
-  text: {
-    ...heroStyles.textDark
-  }
-});
-
-

example/src/screens/set/heroes.js

@@ -1,34 +0,0 @@
-import * as heroStyles from './styles';
-
-export default heroes = [
-  {
-    title: 'Bounty Hunter',
-    icon: require('../../../img/heroes/bouny_hunter.png'),
-    primaryColor: '#f0cb3c',
-    titleColor: '#993825'
-  },
-  {
-    title: 'Templar Assasin',
-    icon: require('../../../img/heroes/templar_assasin.png'),
-    primaryColor: '#f6f6f6',
-    titleColor: heroStyles.textDark.color
-  },
-  {
-    title: 'Oracle',
-    icon: require('../../../img/heroes/oracle.png'),
-    primaryColor: '#19b0b9',
-    titleColor: '#a2195b'
-  },
-  {
-    title: 'Earthspirit',
-    icon: require('../../../img/heroes/earthspirit.png'),
-    primaryColor: '#819c97',
-    titleColor: heroStyles.textDark.color
-  },
-  {
-    title: 'Skywrath Mage',
-    icon: require('../../../img/heroes/skywrath_mage.png'),
-    primaryColor: '#dfb42e',
-    titleColor: '#1e5ea6'
-  }
-];

example/src/screens/set/styles.js

@@ -1,26 +0,0 @@
-export const navigatorStyle = {
-  navBarHideOnScroll: true,
-  drawUnderTabBar: true,
-  navBarButtonColor: '#cacaca',
-  navBarBackgroundColor: '#31363c',
-  navBarTextColor: '#cacaca',
-  tabBarBackgroundColor: '#31363c',
-  tabBarButtonColor: '#cacaca',
-  tabBarSelectedButtonColor: '#cacaca'
-};
-
-export const primaryDark = {
-  backgroundColor: '#1f2222'
-};
-
-export const primaryLight = {
-  backgroundColor: '#cacaca'
-};
-
-export const textLight = {
-  color: '#cacaca'
-};
-
-export const textDark = {
-  color: '#1f2222'
-};

example/src/screens/transitions/CollapsingHeader.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { StyleSheet, View, Text, ScrollView } from 'react-native';
+
+class CollapsingHeader extends React.Component {
+
+    static navigatorStyle = {
+        drawUnderTabBar: true,
+        navBarButtonColor: '#ffffff',
+        navBarTextColor: '#ffffff',
+        collapsingToolBarImage: require('../../../img/gyro_header.jpg'),
+        collapsingToolBarCollapsedColor: '#0f2362',
+        navBarBackgroundColor: '#eeeeee'
+    };
+
+    render() {
+        return (
+            <ScrollView style={styles.container}>
+                <View>
+                    {[...new Array(40)].map((a, index) => (
+                        <Text key={`row_${index}`} style={styles.button}>Row {index}</Text>
+                    ))}
+                </View>
+            </ScrollView>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#fff',
+    },
+});
+
+export default CollapsingHeader;

example/src/screens/transitions/SharedElementTransitions.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { StyleSheet, ScrollView, Text } from 'react-native';
+import Row from '../../components/Row';
+
+class Transitions extends React.Component {
+
+    showCardsExample = () => {
+        this.props.navigator.showModal({
+            title: 'Cards',
+            screen: 'example.Transitions.SharedElementTransitions.Cards',
+        });
+    };
+
+    showProfileExample = () => {
+        this.props.navigator.showModal({
+            title: 'Profiles',
+            screen: 'example.Transitions.SharedElementTransitions.Profiles',
+        });
+    };
+
+    showMasonryExample = () => {
+        this.props.navigator.showModal({
+            title: 'Masonry',
+            screen: 'example.Transitions.SharedElementTransitions.Masonry',
+        });
+    };
+
+    render() {
+        return (
+            <ScrollView style={styles.container}>
+                <Row title={'Cards'} onPress={this.showCardsExample} />
+                {/*<Row title={'Profiles'} onPress={this.showProfileExample} />*/}
+                <Row title={'Masonry'} onPress={this.showMasonryExample} />
+            </ScrollView>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#ffffff',
+    },
+});
+
+export default Transitions;

example/src/screens/transitions/sharedElementTransitions/Cards/Cards.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import { ScrollView, TouchableHighlight, StyleSheet, Image, Text, View, ScrolView } from 'react-native';
+import { SharedElementTransition } from 'react-native-navigation';
+
+const IMAGE_HEIGHT = 190;
+
+class CardScreen extends React.Component {
+
+    goToCard = (index) => {
+        this.props.navigator.push({
+            screen: 'example.Transitions.SharedElementTransitions.Cards.Info',
+            sharedElements: [`image${index}`],
+            animated: false,
+            overrideBackPress: true,
+            passProps: {
+                sharedImageId: `image${index}`
+            }
+        })
+    };
+
+    _renderCard(index) {
+        return (
+            <View style={styles.cardContainer}>
+                <TouchableHighlight
+                    underlayColor={'rgba(0, 0, 0, 0.054)'}
+                    onPress={() => this.goToCard(index)}
+                >
+                    <View>
+                        {this._renderImage(index)}
+                        {this._renderCardContent()}
+                    </View>
+                </TouchableHighlight>
+            </View>
+        );
+    }
+
+    _renderImage(index) {
+        return (
+            <SharedElementTransition
+                style={styles.imageContainer}
+                sharedElementId={`image${index}`}
+            >
+                <Image
+                    style={styles.image}
+                    source={require('../../../../../img/beach.jpg')}
+                />
+            </SharedElementTransition>
+        );
+    }
+
+    _renderCardContent() {
+        return (
+            <View style={styles.cardContentContainer}>
+                <Text style={styles.title}>This is a title</Text>
+                <Text>This is a very long long long long long long long long long long content</Text>
+            </View>
+        );
+    }
+
+    render() {
+        return (
+            <ScrollView
+                style={styles.container}
+                contentContainerStyle={styles.content}
+            >
+                {this._renderCard(0)}
+                {this._renderCard(1)}
+                {this._renderCard(2)}
+            </ScrollView>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#ffffff',
+    },
+    content: {
+        marginHorizontal: 8,
+    },
+    cardContainer: {
+        marginVertical: 8,
+        elevation: 2,
+        borderRadius: 2,
+        backgroundColor: '#F5F5F5'
+    },
+    imageContainer: {
+        justifyContent: 'flex-start'
+    },
+    image: {
+        height: IMAGE_HEIGHT,
+        borderTopLeftRadius: 2,
+        borderTopRightRadius: 2
+    },
+    cardContentContainer: {
+        padding: 8
+    },
+    title: {
+        fontWeight: '500',
+        paddingBottom: 8,
+        fontSize: 17
+    },
+});
+
+export default CardScreen;

example/src/screens/transitions/sharedElementTransitions/Cards/Info.js

@@ -0,0 +1,123 @@
+import React, { Component } from 'react';
+import {
+    ScrollView,
+    TouchableOpacity,
+    StyleSheet,
+    Image,
+    Text,
+    View,
+    Platform,
+    ScrolView
+} from 'react-native';
+import { SharedElementTransition } from 'react-native-navigation';
+import * as Animatable from 'react-native-animatable';
+
+const SHOW_DURATION = 400;
+const HIDE_DURATION = 300;
+
+class InfoScreen extends Component {
+
+    constructor(props) {
+        super(props);
+        this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
+        this.state = {
+            animationType: 'fadeInRight',
+            animationDuration: SHOW_DURATION
+        }
+    }
+
+    onNavigatorEvent(event) {
+        if (event.id === 'backPress') {
+            this.setState({
+                animationType: 'fadeOutRight',
+                animationDuration: HIDE_DURATION
+            });
+            this.props.navigator.pop();
+        }
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                {this._renderImage()}
+                {this._renderContent()}
+            </View>
+        );
+    }
+
+    _renderImage() {
+        return (
+            <SharedElementTransition
+                style={styles.imageContainer}
+                sharedElementId={this.props.sharedImageId}
+                showDuration={SHOW_DURATION}
+                hideDuration={HIDE_DURATION}
+                animateClipBounds={true}
+                showInterpolation={
+                    {
+                        type: 'linear',
+                        easing: 'FastOutSlowIn'
+                    }
+                }
+                hideInterpolation={
+                    {
+                        type: 'linear',
+                        easing: 'FastOutSlowIn'
+                    }
+                }
+            >
+                <Image
+                    style={styles.image}
+                    source={require('../../../../../img/beach.jpg')}
+                />
+            </SharedElementTransition>
+        );
+    }
+
+    _renderContent() {
+        return (
+            <Animatable.View
+                style={styles.content}
+                duration={this.state.animationDuration}
+                animation={this.state.animationType}
+                useNativeDriver={true}
+            >
+                <Text style={styles.text}>Line 1</Text>
+                <Text style={styles.text}>Line 2</Text>
+                <Text style={styles.text}>Line 3</Text>
+                <Text style={styles.text}>Line 4</Text>
+                <Text style={styles.text}>Line 5</Text>
+                <Text style={styles.text}>Line 6</Text>
+                <Text style={styles.text}>Line 7</Text>
+                <Text style={styles.text}>Line 8</Text>
+            </Animatable.View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    content: {
+        flex: 1,
+        marginTop: 190,
+        backgroundColor: 'white'
+    },
+    imageContainer: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+    },
+    image: {
+        height: 190
+    },
+    text: {
+        fontSize: 17,
+        paddingVertical: 4,
+        paddingLeft: 8
+    }
+});
+
+export default InfoScreen;

example/src/screens/transitions/sharedElementTransitions/Masonry/Item.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { StyleSheet, View, Text, Image } from 'react-native';
+import { SharedElementTransition } from 'react-native-navigation';
+
+const SHOW_DURATION = 200;
+const HIDE_DURATION = 300;
+
+class Item extends React.Component {
+
+    static navigatorStyle = {
+        navBarHidden: true,
+    };
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <SharedElementTransition
+                    sharedElementId={this.props.sharedImageId}
+                    showDuration={SHOW_DURATION}
+                    hideDuration={HIDE_DURATION}
+                    animateClipBounds
+                    showInterpolation={{
+                        type: 'linear',
+                        easing: 'FastInSlowOut',
+                    }}
+                    hideInterpolation={{
+                        type: 'linear',
+                        easing: 'FastOutSlowIn',
+                    }}
+                >
+                    <Image
+                        style={styles.image}
+                        source={this.props.image}
+                    />
+                </SharedElementTransition>
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#ffffff',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    image: {
+        width: 400,
+        height: 400,
+    }
+});
+
+export default Item;

example/src/screens/transitions/sharedElementTransitions/Masonry/Masonry.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { StyleSheet, View, Text, PixelRatio, FlatList, Image, TouchableHighlight } from 'react-native';
+import { Navigation, SharedElementTransition } from 'react-native-navigation';
+
+import images from './images';
+
+const ROW_HEIGHT = 650;
+const COLS = 2;
+
+class Masonry extends React.Component {
+
+    onAssetPress = (image, key) => {
+        this.props.navigator.push({
+            screen: 'example.Transitions.SharedElementTransitions.Masonry.Item',
+            sharedElements: [key],
+            passProps: {
+                image,
+                sharedImageId: key,
+            },
+        });
+    };
+
+    renderAsset = (asset, row, column, index) => {
+        const key = `row_${row}_column_${column}_asset_${index}`;
+
+        return (
+            <TouchableHighlight
+                key={key}
+                onPress={() => {
+                    this.onAssetPress(asset.source, key);
+                }}
+                style={[styles.assetContainer, { flex: asset.weight }]}
+            >
+                <View style={{ flex: 1 }}>
+                    <SharedElementTransition
+                        style={{ flex: 1 }}
+                        sharedElementId={key}
+                    >
+                        <Image
+                            source={asset.source}
+                            resizeMode={'cover'}
+                            style={styles.asset}
+                        />
+                    </SharedElementTransition>
+                </View>
+            </TouchableHighlight>
+        );
+    };
+
+    renderItem = ({ item, index }) => {
+        return (
+            <View style={[styles.item, { height: ROW_HEIGHT }]}>
+                {[...new Array(COLS)].map((column, columnIndex) => (
+                    <View
+                        key={`row_${index}_column_${columnIndex}`}
+                        style={{ flex: 1 }}
+                    >
+                        {item.images[columnIndex].map((asset, assetIndex) => this.renderAsset(asset, index, columnIndex, assetIndex))}
+                    </View>
+                ))}
+            </View>
+        );
+    };
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <FlatList
+                    data={images}
+                    renderItem={this.renderItem}
+                    getItemLayout={(layout, index) => ({ length: ROW_HEIGHT, offset: ROW_HEIGHT * index, index })}
+                />
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#ffffff',
+    },
+    item: {
+        flex: 1,
+        flexDirection: 'row',
+    },
+    assetContainer: {
+        margin: 5,
+        borderRadius: 6,
+        borderWidth: StyleSheet.hairlineWidth,
+    },
+    asset: {
+        flex: 1,
+        borderRadius: 6,
+    },
+});
+
+export default Masonry;

example/src/screens/transitions/sharedElementTransitions/Masonry/images.js

@@ -0,0 +1,100 @@
+const images = [
+    require('../../../../../img/masonry/Cfw87359UT.jpeg'),
+    require('../../../../../img/masonry/a848dHxA4e.jpeg'),
+    require('../../../../../img/masonry/AdGXmD1CH6.jpeg'),
+    require('../../../../../img/masonry/5Gi8kova3k.jpeg'),
+    require('../../../../../img/masonry/ri90ueind7.jpeg'),
+    require('../../../../../img/masonry/kVN0FryOZk.jpeg'),
+    require('../../../../../img/masonry/v8KLi2f0Tr.jpeg'),
+    require('../../../../../img/masonry/xU42hx19BB.jpeg'),
+    require('../../../../../img/masonry/61mpAVRV73.jpeg'),
+    require('../../../../../img/masonry/pqgylg80SD.jpeg'),
+    require('../../../../../img/masonry/37r6Cqp1B8.jpeg'),
+    require('../../../../../img/masonry/N30E32431C.jpeg'),
+    require('../../../../../img/masonry/rVOcz7rd0z.jpeg'),
+    require('../../../../../img/masonry/A4g0lZ33Z8.jpeg'),
+    require('../../../../../img/masonry/j51Pva1P8L.jpeg'),
+    require('../../../../../img/masonry/158xD4xbeh.jpeg'),
+];
+
+function randomImage() {
+    return images[Math.floor(Math.random() * images.length)];
+}
+
+export default [
+    {
+        key: 1,
+        images: [[{
+            weight: 2,
+            source: randomImage(),
+        }, {
+            weight: 1,
+            source: randomImage(),
+        }, {
+            weight: 3,
+            source: randomImage(),
+        }], [{
+            weight: 1,
+            source: randomImage(),
+        } ,{
+            weight: 3,
+            source: randomImage(),
+        }, {
+            weight: 1,
+            source: randomImage(),
+        }, {
+            weight: 1,
+            source: randomImage(),
+        }]],
+    },
+    {
+        key: 2,
+        images: [[{
+            weight: 1,
+            source: randomImage(),
+        }, {
+            weight: 1,
+            source: randomImage(),
+        }, {
+            weight: 1,
+            source: randomImage(),
+        }, {
+            weight: 3,
+            source: randomImage(),
+        }], [{
+            weight: 3,
+            source: randomImage(),
+        } ,{
+            weight: 3,
+            source: randomImage(),
+        }]],
+    },
+    {
+        key: 3,
+        images: [[{
+            weight: 1,
+            source: randomImage(),
+        }, {
+            weight: 2,
+            source: randomImage(),
+        }, {
+            weight: 1,
+            source: randomImage(),
+        }, {
+            weight: 2,
+            source: randomImage(),
+        }], [{
+            weight: 2,
+            source: randomImage(),
+        } ,{
+            weight: 1,
+            source: randomImage(),
+        }, {
+            weight: 2,
+            source: randomImage(),
+        }, {
+            weight: 1,
+            source: randomImage(),
+        }]],
+    }
+];

example/src/screens/transitions/sharedElementTransitions/Profiles/Profiles.js

@@ -0,0 +1,213 @@
+import React, { Component } from 'react';
+import {
+    ScrollView,
+    TouchableOpacity,
+    StyleSheet,
+    Image,
+    Text,
+    View,
+    ScrolView
+} from 'react-native';
+import { SharedElementTransition } from 'react-native-navigation';
+import * as Animatable from 'react-native-animatable';
+
+const FADE_DURATION = 500;
+const SHOW_DURATION = 500;
+const HIDE_DURATION = 500;
+
+const ICON_MARGIN = 24;
+
+class Profiles extends Component {
+
+    constructor(props) {
+        super(props);
+        this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
+        this.state = {
+            animationType: 'fadeIn'
+        }
+    }
+
+    componentDidMount() {
+        if (__STRESS_TEST__) {
+            setTimeout(() => {
+                this.setState({
+                    animationType: 'fadeOut'
+                });
+                this.props.navigator.pop();
+            }, 650);
+        }
+    }
+
+    onNavigatorEvent(event) {
+        if (event.id === 'backPress') {
+            this.setState({
+                animationType: 'fadeOut'
+            });
+            this.props.navigator.pop();
+        }
+    }
+
+    _renderHeader() {
+        return (
+            <Animatable.View
+                animation={this.state.animationType}
+                duration={FADE_DURATION}
+                style={[styles.header, { backgroundColor: this.props.primaryColor }]}
+                useNativeDriver={true}
+            >
+                <View style={{ height: ICON_MARGIN, flexDirection: 'row', backgroundColor: 'white' }} />
+                <View style={{ flex: 1, flexDirection: 'row' }}>
+                    {this._renderIcon()}
+                    {this._renderTitle()}
+                </View>
+            </Animatable.View>
+        );
+    }
+
+    _renderTitle() {
+        return (
+            <View style={{ alignSelf: 'flex-end' }}>
+                <SharedElementTransition
+                    style={styles.titleContainer}
+                    sharedElementId={this.props.sharedTitleId}
+                    showDuration={SHOW_DURATION}
+                    hideDuration={HIDE_DURATION}
+                    showInterpolation={
+                        {
+                            type: 'path',
+                            controlX1: '0.5',
+                            controlY1: '1',
+                            controlX2: '0',
+                            controlY2: '0.5',
+                            easing: 'FastOutSlowIn'
+                        }
+                    }
+                    hideInterpolation={
+                        {
+                            type: 'path',
+                            controlX1: '0.5',
+                            controlY1: '0',
+                            controlX2: '1',
+                            controlY2: '0.5',
+                            easing: 'FastOutSlowIn'
+                        }
+                    }
+                >
+                    <Text style={[styles.title, { color: this.props.titleColor }]}>{this.props.title}</Text>
+                </SharedElementTransition>
+            </View>
+        );
+    }
+
+    _renderContent() {
+        return (
+            <Animatable.View
+                animation={this.state.animationType}
+                duration={FADE_DURATION}
+                style={styles.body}
+                useNativeDriver={true}>
+                <View
+                    style={styles.list}
+                    initialListSize={20}>
+                    {this._genRows()}
+                </View>
+            </Animatable.View>
+        );
+    }
+
+    _genRows() {
+        const children = [];
+        for (let ii = 0; ii < 30; ii++) {
+            children.push(
+                <Text>{'row ' + ii}</Text>
+            );
+        }
+        return children;
+    }
+
+    _renderIcon() {
+        return (
+            <SharedElementTransition
+                sharedElementId={this.props.sharedIconId}
+                style={styles.iconContainer}
+                showDuration={SHOW_DURATION}
+                hideDuration={HIDE_DURATION}
+                showInterpolation={
+                    {
+                        type: 'path',
+                        controlX1: '0.5',
+                        controlY1: '1',
+                        controlX2: '0',
+                        controlY2: '0.5',
+                        easing: 'FastOutSlowIn'
+                    }
+                }
+                hideInterpolation={
+                    {
+                        type: 'path',
+                        controlX1: '0.5',
+                        controlY1: '0',
+                        controlX2: '1',
+                        controlY2: '0.5',
+                        easing: 'FastOutSlowIn'
+                    }
+                }
+            >
+                <Image
+                    source={this.props.icon}
+                    style={styles.heroIcon}
+                    fadeDuration={0}
+                />
+            </SharedElementTransition>
+        );
+    }
+
+    render() {
+        return (
+            <ScrollView style={[styles.container]}>
+                {this._renderHeader()}
+                {this._renderContent()}
+            </ScrollView>
+        );
+    }
+
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        flexDirection: 'column',
+        backgroundColor: 'transparent'
+    },
+    header: {
+        height: 110,
+        flexDirection: 'column-reverse'
+    },
+    titleContainer: {
+        marginLeft: ICON_MARGIN + 90 + +16,
+        marginBottom: 8
+    },
+    title: {
+        fontSize: 23,
+    },
+    iconContainer: {
+        position: 'absolute',
+        bottom: -ICON_MARGIN,
+        left: ICON_MARGIN
+    },
+    heroIcon: {
+        width: 90,
+        height: 90,
+        resizeMode: 'contain'
+    },
+    body: {
+        flex: 4,
+        backgroundColor: 'white',
+    },
+    list: {
+        marginTop: 16,
+        marginHorizontal: 8
+    }
+});
+
+export default Profiles;

example/src/screens/transitions/sharedElementTransitions/Profiles/data.js

@@ -0,0 +1,32 @@
+export default heroes = [
+    {
+        title: 'Bounty Hunter',
+        icon: require('../../../../../img/heroes/bouny_hunter.png'),
+        primaryColor: '#f0cb3c',
+        titleColor: '#993825'
+    },
+    {
+        title: 'Templar Assasin',
+        icon: require('../../../../../img/heroes/templar_assasin.png'),
+        primaryColor: '#f6f6f6',
+        titleColor: 'red',
+    },
+    {
+        title: 'Oracle',
+        icon: require('../../../../../img/heroes/oracle.png'),
+        primaryColor: '#19b0b9',
+        titleColor: '#a2195b'
+    },
+    {
+        title: 'Earthspirit',
+        icon: require('../../../../../img/heroes/earthspirit.png'),
+        primaryColor: '#819c97',
+        titleColor: 'red',
+    },
+    {
+        title: 'Skywrath Mage',
+        icon: require('../../../../../img/heroes/skywrath_mage.png'),
+        primaryColor: '#dfb42e',
+        titleColor: '#1e5ea6'
+    }
+];

example/src/screens/types/Drawer.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+
+class MyClass extends React.Component {
+
+    render() {
+        return (
+            <View style={styles.container}>
+
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        width: 300,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#ffffff',
+    },
+});
+
+export default MyClass;

example/src/screens/types/LightBox.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { StyleSheet, View, Text, Dimensions, Button } from 'react-native';
+
+class Lightbox extends React.Component {
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <View style={{ flex: 8 }}>
+                    <Text style={styles.title}>{this.props.title}</Text>
+                    <Text style={styles.content}>{this.props.content}</Text>
+                </View>
+                <View style={{ flex: 2 }}>
+                    <Button
+                        title={'Close'}
+                        onPress={() => this.props.onClose()}
+                    />
+                </View>
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        width: Dimensions.get('window').width * 0.7,
+        height: Dimensions.get('window').height * 0.3,
+        backgroundColor: '#ffffff',
+        borderRadius: 5,
+        padding: 16,
+    },
+    title: {
+        fontSize: 17,
+        fontWeight: '700',
+    },
+    content: {
+      marginTop: 8,
+    },
+});
+
+export default Lightbox;

example/src/screens/types/Modal.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+
+class Modal extends React.Component {
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <Text>Modal Screen</Text>
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#ffffff',
+    },
+});
+
+export default Modal;

example/src/screens/types/Notification.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { StyleSheet, View, Text, Dimensions, Button } from 'react-native';
+
+class Notification extends React.Component {
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <Text style={styles.title}>In-App Notification</Text>
+                <Text style={styles.content}>You have 10 unread notifications!</Text>
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        height: 100,
+        backgroundColor: '#ff505c',
+        padding: 16,
+        margin: 10,
+    },
+    title: {
+        fontSize: 18,
+        textAlign: 'center',
+    },
+    content: {
+        textAlign: 'center',
+        marginTop: 10,
+    },
+});
+
+export default Notification;

example/src/screens/types/Push.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+
+class Push extends React.Component {
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <Text>Push Screen</Text>
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#ffffff',
+    },
+});
+
+export default Push;

example/src/screens/types/TopTabs.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { PixelRatio } from 'react-native';
+
+class TopTabs extends React.Component {
+    static navigatorStyle = {
+        topTabTextColor: '#ffffff',
+        selectedTopTabTextColor: '#ff505c',
+
+        // Icons
+        topTabIconColor: '#ffffff',
+        selectedTopTabIconColor: '#ff505c',
+
+        // Tab indicator
+        selectedTopTabIndicatorHeight: PixelRatio.get() * 2,
+        selectedTopTabIndicatorColor: '#ff505c',
+    };
+}
+
+export default TopTabs;

example/src/screens/types/tabs/TabOne.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { StyleSheet, View, Text, Dimensions, Button } from 'react-native';
+
+class TabOne extends React.Component {
+
+    render() {
+        return (
+            <View>
+                <Text>Tab One</Text>
+            </View>
+        );
+    }
+}
+
+export default TabOne;

example/src/screens/types/tabs/TabTwo.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { StyleSheet, View, Text, Dimensions, Button } from 'react-native';
+
+class TabOne extends React.Component {
+
+    render() {
+        return (
+            <View>
+                <Text>Tab Two</Text>
+            </View>
+        );
+    }
+}
+
+export default TabOne;