Add CocktailDetails screen to playground app

Will be used for shared element transition showcase

playground/src/assets/cocktails.js

@@ -3,6 +3,7 @@ export default [
     id: '1',
     name: "Negroni",
     image: require("../../img/cocktails/negroni.jpg"),
+    color: '#e00001',
     ingredients: [
       {
         name: 'Gin',
@@ -22,6 +23,7 @@ export default [
     id: '2',
     name: "Last Word",
     image: require("../../img/cocktails/lastWord.jpg"),
+    color: '#c7cfb7',
     ingredients: [
       {
         name: 'Gin',
@@ -41,6 +43,7 @@ export default [
     id: '3',
     name: "Basil Smash",
     image: require("../../img/cocktails/cucumberBasilSmash.jpg"),
+    color: '#9dd888',
     ingredients: [
       {
         name: 'Gin',
@@ -59,6 +62,7 @@ export default [
     id: '4',
     name: "Bloody Marry",
     image: require("../../img/cocktails/bloodyMarry.jpg"),
+    color: '#e73e05',
     ingredients: [
       {
         name: 'Vodka',
@@ -94,6 +98,7 @@ export default [
     id: '5',
     name: 'Gimlet',
     image: require('../../img/cocktails/gimlet.jpg'),
+    color: '#d3d6cf',
     ingredients: [
       {
         name: 'Gin',
@@ -113,6 +118,7 @@ export default [
     id: '6',
     name: 'French Martini',
     image: require('../../img/cocktails/frenchMartini.jpg'),
+    color: '#c03500',
     ingredients: [
       {
         name: 'Vodka',

playground/src/screens/Screens.js

@@ -7,6 +7,7 @@ const StatusBarFirstTab = 'StatusBarFirstTab'
 
 module.exports = {
   Buttons: 'Buttons',
+  CocktailDetailsScreen: 'CocktailDetailsScreen',
   CocktailsListScreen: 'CocktailsListScreen',
   ContextScreen: 'ContextScreen',
   ExternalComponent: 'ExternalComponent',

playground/src/screens/index.js

@@ -12,6 +12,7 @@ const Screens = require('./Screens');
 
 function registerScreens() {
   Navigation.registerComponent(Screens.Alert, () => require('./Alert'));
+  Navigation.registerComponent(Screens.CocktailDetailsScreen, () => require('./sharedElementTransition/CocktailDetailsScreen'));
   Navigation.registerComponent(Screens.CocktailsListScreen, () => require('./sharedElementTransition/CocktailsList'));
   Navigation.registerComponent(Screens.EventsOverlay, () => require('./StaticLifecycleOverlay'));
   Navigation.registerComponent(Screens.EventsScreen, () => require('./StaticEventsScreen'));

playground/src/screens/sharedElementTransition/CocktailDetailsScreen.js

@@ -0,0 +1,46 @@
+const React = require('react');
+const { Component } = require('react');
+const { SafeAreaView, FlatList, View, Image, Text, StyleSheet } = require('react-native');
+
+class CocktailDetailsScreen extends Component {
+  render() {
+    return (
+      <View style={styles.root}>
+        <View style={[styles.header, {backgroundColor: this.props.color}]}>
+          <Text style={styles.title}>{this.props.name}</Text>
+        </View>
+        <Image
+          source={this.props.image}
+          style={styles.image}
+          />
+      </View>
+    );
+  }
+}
+
+module.exports = CocktailDetailsScreen;
+const SIZE = 120;
+const HEADER = 150;
+const styles = StyleSheet.create({
+  root: {
+    
+  },
+  header: {
+    height: HEADER,
+    width: '100%',
+    flexDirection: 'column-reverse'
+  },
+  title: {
+    fontSize: 32,
+    color: 'whitesmoke',
+    marginLeft: 24,
+    marginBottom: 16
+  },
+  image: {
+    height: SIZE,
+    width: SIZE,
+    position: 'absolute',
+    right: 24,
+    top: HEADER / 2
+  }
+});

playground/src/screens/sharedElementTransition/CocktailsList.js

@@ -1,8 +1,9 @@
 const React = require('react');
 const { Component } = require('react');
-const { SafeAreaView, FlatList, View, Image, Text, StyleSheet } = require('react-native');
-const { Navigation } = require('react-native-navigation');
+const { SafeAreaView, TouchableOpacity, FlatList, View, Image, Text, StyleSheet } = require('react-native');
+const Navigation = require('../../services/Navigation');
 const { slice } = require('lodash');
+const Screens = require('../Screens')
 const data = require('../../assets/cocktails').default;
 
 class CocktailsList extends Component {
@@ -16,10 +17,6 @@ class CocktailsList extends Component {
     }
   }
 
-  constructor(props) {
-    super(props);
-  }
-
   render() {
     return (
       <FlatList
@@ -35,7 +32,15 @@ class CocktailsList extends Component {
   separatorComponent = () => <View style={styles.separator} />;
 
   renderItem = ({ item }) => (
-    <View style={styles.itemContainer}>
+    <TouchableOpacity
+      activeOpacity={0.75}
+      style={styles.itemContainer}
+      onPress={() => Navigation.push(this, {
+        component: {
+          name: Screens.CocktailDetailsScreen,
+          passProps: { ...item }
+        }
+      })}>
       <Image
         source={item.image}
         style={styles.image}
@@ -47,7 +52,7 @@ class CocktailsList extends Component {
           <Text style={styles.ingredients}>{slice(item.ingredients, 0, 3).map(i => i.name).join(' • ')}</Text>
         </View>
       </View>
-    </View>
+    </TouchableOpacity>
   )
 
   keyExtractor = item => item.id;