Browse Source

Initial work on new Shared Element screen

Guy Carmeli 5 years ago
parent
commit
89ac5c89d9

BIN
playground/img/cocktails/bloodyMarry.jpg View File


BIN
playground/img/cocktails/cucumberBasilSmash.jpg View File


BIN
playground/img/cocktails/frenchMartini.jpg View File


BIN
playground/img/cocktails/gimlet.jpg View File


BIN
playground/img/cocktails/lastWord.jpg View File


BIN
playground/img/cocktails/negroni.jpg View File


+ 131
- 0
playground/src/assets/cocktails.js View File

@@ -0,0 +1,131 @@
1
+export default [
2
+  {
3
+    id: '1',
4
+    name: "Negroni",
5
+    image: require("../../img/cocktails/negroni.jpg"),
6
+    ingredients: [
7
+      {
8
+        name: 'Gin',
9
+        measurement: '30ml'
10
+      },
11
+      {
12
+        name: 'Campari',
13
+        measurement: '30ml'
14
+      },
15
+      {
16
+        name: 'Sweet Vermouth',
17
+        measurement: '30ml'
18
+      }
19
+    ]
20
+  },
21
+  {
22
+    id: '2',
23
+    name: "Last Word",
24
+    image: require("../../img/cocktails/lastWord.jpg"),
25
+    ingredients: [
26
+      {
27
+        name: 'Gin',
28
+        measurement: '50ml'
29
+      },
30
+      {
31
+        name: 'Noilly Prat dry vermouth',
32
+        measurement: '20ml'
33
+      },
34
+      {
35
+        name: 'St. Germain',
36
+        measurement: '15ml'
37
+      }
38
+    ]
39
+  },
40
+  {
41
+    id: '3',
42
+    name: "Basil Smash",
43
+    image: require("../../img/cocktails/cucumberBasilSmash.jpg"),
44
+    ingredients: [
45
+      {
46
+        name: 'Gin',
47
+        measurement: '50ml'
48
+      },
49
+      {
50
+        name: 'Lemon Juice',
51
+        measurement: '1tbsp'
52
+      },
53
+      {
54
+        name: 'Tonic'
55
+      }
56
+    ]
57
+  },
58
+  {
59
+    id: '4',
60
+    name: "Bloody Marry",
61
+    image: require("../../img/cocktails/bloodyMarry.jpg"),
62
+    ingredients: [
63
+      {
64
+        name: 'Vodka',
65
+        measurement: '45ml'
66
+      },
67
+      {
68
+        name: 'Tomato Juice',
69
+        measurement: '75ml'
70
+      },
71
+      {
72
+        name: 'Worcestershire Sauce',
73
+        measurement: '2 dashes'
74
+      },
75
+      {
76
+        name: 'Hot Sauce',
77
+        measurement: '3 dashes'
78
+      },
79
+      {
80
+        name: 'Lemon Juice',
81
+        measurement: '30ml'
82
+      },
83
+      {
84
+        name: 'Ground black pepper',
85
+        measurement: '1 pinch'
86
+      },
87
+      {
88
+        name: 'Salt',
89
+        measurement: '1 pinch'
90
+      }
91
+    ]
92
+  },
93
+  {
94
+    id: '5',
95
+    name: 'Gimlet',
96
+    image: require('../../img/cocktails/gimlet.jpg'),
97
+    ingredients: [
98
+      {
99
+        name: 'Gin',
100
+        measurement: '75ml'
101
+      },
102
+      {
103
+        name: 'Lime Juice',
104
+        measurement: '30ml'
105
+      },
106
+      {
107
+        name: 'Simple Syrup',
108
+        measurement: '15ml'
109
+      }
110
+    ]
111
+  },
112
+  {
113
+    id: '6',
114
+    name: 'French Martini',
115
+    image: require('../../img/cocktails/frenchMartini.jpg'),
116
+    ingredients: [
117
+      {
118
+        name: 'Vodka',
119
+        measurement: '60ml'
120
+      },
121
+      {
122
+        name: 'Pineapple Juice',
123
+        measurement: '50ml'
124
+      },
125
+      {
126
+        name: 'Chambrod',
127
+        measurement: '7.5ml'
128
+      }
129
+    ]
130
+  }
131
+]

+ 0
- 1
playground/src/screens/FlatListScreen.js View File

@@ -2,7 +2,6 @@ const React = require('react');
2 2
 const { Component } = require('react');
3 3
 const { SafeAreaView, FlatList, View, Text } = require('react-native');
4 4
 const { Navigation } = require('react-native-navigation');
5
-const testIDs = require('../testIDs');
6 5
 
7 6
 const FakeListData = require('../assets/FakeListData');
8 7
 

+ 2
- 0
playground/src/screens/NavigationScreen.js View File

@@ -39,6 +39,7 @@ class NavigationScreen  extends React.Component {
39 39
         <Button label='Static Events' testID={SHOW_STATIC_EVENTS_SCREEN} onPress={this.pushStaticEventsScreen} />
40 40
         <Button label='Orientation' testID={SHOW_ORIENTATION_SCREEN} onPress={this.orientation} />
41 41
         <Button label='React Context API' onPress={this.pushContextScreen} />
42
+        {false && <Button label='Shared Element' onPress={this.sharedElement} />}
42 43
         <Navigation.TouchablePreview
43 44
           touchableComponent={Button}
44 45
           onPressIn={this.preview}
@@ -54,6 +55,7 @@ class NavigationScreen  extends React.Component {
54 55
   pushStaticEventsScreen = () => Navigation.showModal(Screens.EventsScreen)
55 56
   orientation = () => Navigation.showModal(Screens.Orientation);
56 57
   pushContextScreen = () => Navigation.push(this, Screens.ContextScreen);
58
+  sharedElement = () => Navigation.showModal(Screens.CocktailsListScreen)
57 59
   preview = ({reactTag}) => {
58 60
     Navigation.push(this.props.componentId, {
59 61
       component: {

+ 6
- 5
playground/src/screens/Screens.js View File

@@ -6,15 +6,16 @@ const StatusBarOptions = 'StatusBarOptions';
6 6
 const StatusBarFirstTab = 'StatusBarFirstTab'
7 7
 
8 8
 module.exports = {
9
-  ExternalComponent: 'ExternalComponent',
9
+  Buttons: 'Buttons',
10
+  CocktailsListScreen: 'CocktailsListScreen',
10 11
   ContextScreen: 'ContextScreen',
11
-  Pushed: 'Pushed',
12
+  ExternalComponent: 'ExternalComponent',
13
+  FullScreenModal: 'FullScreenModal',
12 14
   Layouts: 'Layouts',
15
+  Modal: 'Modal',
13 16
   Options: 'Options',
14
-  Buttons: 'Buttons',
17
+  Pushed: 'Pushed',
15 18
   Stack: 'Stack',
16
-  Modal: 'Modal',
17
-  FullScreenModal: 'FullScreenModal',
18 19
   SetRoot: 'SetRoot',
19 20
   Overlay: 'Overlay',
20 21
   OverlayAlert: 'OverlayAlert',

+ 1
- 0
playground/src/screens/index.js View File

@@ -12,6 +12,7 @@ const Screens = require('./Screens');
12 12
 
13 13
 function registerScreens() {
14 14
   Navigation.registerComponent(Screens.Alert, () => require('./Alert'));
15
+  Navigation.registerComponent(Screens.CocktailsListScreen, () => require('./sharedElementTransition/CocktailsList'));
15 16
   Navigation.registerComponent(Screens.EventsOverlay, () => require('./StaticLifecycleOverlay'));
16 17
   Navigation.registerComponent(Screens.EventsScreen, () => require('./StaticEventsScreen'));
17 18
   Navigation.registerComponent(Screens.ExternalComponent, () => require('./ExternalComponentScreen'));

+ 89
- 0
playground/src/screens/sharedElementTransition/CocktailsList.js View File

@@ -0,0 +1,89 @@
1
+const React = require('react');
2
+const { Component } = require('react');
3
+const { SafeAreaView, FlatList, View, Image, Text, StyleSheet } = require('react-native');
4
+const { Navigation } = require('react-native-navigation');
5
+const { slice } = require('lodash');
6
+const data = require('../../assets/cocktails').default;
7
+
8
+class CocktailsList extends Component {
9
+  static options() {
10
+    return {
11
+      topBar: {
12
+        title: {
13
+          text: 'Cocktails'
14
+        }
15
+      }
16
+    }
17
+  }
18
+
19
+  constructor(props) {
20
+    super(props);
21
+  }
22
+
23
+  render() {
24
+    return (
25
+      <FlatList
26
+        style={styles.root}
27
+        data={data}
28
+        keyExtractor={this.keyExtractor}
29
+        ItemSeparatorComponent={this.separatorComponent}
30
+        renderItem={this.renderItem}
31
+      />
32
+    );
33
+  }
34
+
35
+  separatorComponent = () => <View style={styles.separator} />;
36
+
37
+  renderItem = ({ item }) => (
38
+    <View style={styles.itemContainer}>
39
+      <Image
40
+        source={item.image}
41
+        style={styles.image}
42
+        resizeMode={'contain'}
43
+      />
44
+      <View style={styles.textContainer}>
45
+        <Text style={styles.title}>{item.name}</Text>
46
+        <View style={{ flexDirection: 'row' }}>
47
+          <Text style={styles.ingredients}>{slice(item.ingredients, 0, 3).map(i => i.name).join(' • ')}</Text>
48
+        </View>
49
+      </View>
50
+    </View>
51
+  )
52
+
53
+  keyExtractor = item => item.id;
54
+}
55
+module.exports = CocktailsList;
56
+const SIZE = 150;
57
+const styles = StyleSheet.create({
58
+  root: {
59
+    paddingTop: 16
60
+  },
61
+  itemContainer: {
62
+    backgroundColor: 'white',
63
+    marginLeft: 16,
64
+    marginRight: 16,
65
+    height: SIZE,
66
+    flexDirection: 'row',
67
+    padding: 16,
68
+    elevation: 4
69
+  },
70
+  image: {
71
+    backgroundColor: 'white',
72
+    height: '100%',
73
+    width: 118,
74
+  },
75
+  textContainer: {
76
+    flex: 1,
77
+    marginLeft: 16,
78
+  },
79
+  title: {
80
+    fontSize: 22
81
+  },
82
+  ingredients: {
83
+    fontSize: 12,
84
+    marginTop: 8
85
+  },
86
+  separator: {
87
+    height: 16
88
+  }
89
+});