Browse Source

Added Toast component to playground

While it's not used at the moment, we can use it at some point in Overlay e2e or for debugging purposes.
Guy Carmeli 4 years ago
parent
commit
4e0d6be997

+ 2
- 1
playground/src/commons/Colors.js View File

1
 module.exports = {
1
 module.exports = {
2
   background: '#e8e8e8',
2
   background: '#e8e8e8',
3
   primary: '#5847ff',
3
   primary: '#5847ff',
4
-  secondary: '#FFC249'
4
+  secondary: '#FFC249',
5
+  accent: '#65C888'
5
 }
6
 }

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

33
   },
33
   },
34
   title: {
34
   title: {
35
     fontSize: 18,
35
     fontSize: 18,
36
+    alignSelf: 'flex-start'
36
   },
37
   },
37
   message: {
38
   message: {
38
     marginVertical: 8
39
     marginVertical: 8

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

104
   StatusBarOptions,
104
   StatusBarOptions,
105
   StatusBarFirstTab,
105
   StatusBarFirstTab,
106
   TopBarBackground: 'TopBarBackground',
106
   TopBarBackground: 'TopBarBackground',
107
+  Toast: 'Toast',
107
   FlatListScreen: 'FlatListScreen',
108
   FlatListScreen: 'FlatListScreen',
108
   Alert: 'Alert',
109
   Alert: 'Alert',
109
   Orientation: 'Orientation',
110
   Orientation: 'Orientation',

+ 65
- 0
playground/src/screens/Toast.js View File

1
+const React = require('react');
2
+const { View, Text, StyleSheet, TouchableOpacity } = require('react-native');
3
+const Colors = require('../commons/Colors');
4
+const Navigation = require('../services/Navigation');
5
+
6
+const Toast = function ({componentId}) {
7
+  return (
8
+    <View style={styles.root}>
9
+      <View style={styles.toast}>
10
+        <Text style={styles.text}>This a very important message!</Text>
11
+        <TouchableOpacity style={styles.button} onPress={() => Navigation.dismissOverlay(componentId)}>
12
+          <Text style={styles.buttonText}>OK</Text>
13
+        </TouchableOpacity>
14
+      </View>
15
+    </View>
16
+  )
17
+}
18
+
19
+const styles = StyleSheet.create({
20
+  root: {
21
+    flex: 1,
22
+    flexDirection: 'column-reverse',
23
+    backgroundColor: 0x3e434aa1
24
+    // backgroundColor: 'red'
25
+  },
26
+  toast: {
27
+    elevation: 2,
28
+    flexDirection: 'row',
29
+    height: 40,
30
+    margin: 16,
31
+    borderRadius: 20,
32
+    backgroundColor: Colors.accent,
33
+    alignItems: 'center',
34
+    justifyContent: 'space-between'
35
+  },
36
+  text: {
37
+    color: 'white',
38
+    fontSize: 16,
39
+    marginLeft: 16
40
+  },
41
+  button: {
42
+    marginRight: 16
43
+  },
44
+  buttonText: {
45
+    color: 'white',
46
+    fontSize: 16,
47
+    fontWeight: 'bold'
48
+  }
49
+});
50
+
51
+Toast.options = {
52
+  statusBar: {
53
+    drawBehind: true,
54
+    backgroundColor: 0x3e434aa1,
55
+    style: 'light'
56
+  },
57
+  layout: {
58
+    componentBackgroundColor: 'transparent'
59
+  },
60
+  overlay: {
61
+    interceptTouchOutside: false
62
+  }
63
+}
64
+
65
+module.exports = Toast;

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

44
   Navigation.registerComponent(Screens.StatusBarOptions, () => require('./StatusBarOptionsScreen'));
44
   Navigation.registerComponent(Screens.StatusBarOptions, () => require('./StatusBarOptionsScreen'));
45
   Navigation.registerComponent(Screens.StatusBarFirstTab, () => require('./StatusBarFirstTab'));
45
   Navigation.registerComponent(Screens.StatusBarFirstTab, () => require('./StatusBarFirstTab'));
46
   Navigation.registerComponent(Screens.TopBarBackground, () => require('../components/TopBarBackground'));
46
   Navigation.registerComponent(Screens.TopBarBackground, () => require('../components/TopBarBackground'));
47
+  Navigation.registerComponent(Screens.Toast, () => require('./Toast'));
47
 
48
 
48
   const { ContextProvider } = require('../context');
49
   const { ContextProvider } = require('../context');
49
   const ContextScreen = require('./ContextScreen');
50
   const ContextScreen = require('./ContextScreen');