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.

playground/src/commons/Colors.js

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

playground/src/screens/Alert.js

@@ -33,6 +33,7 @@ const styles = {
   },
   title: {
     fontSize: 18,
+    alignSelf: 'flex-start'
   },
   message: {
     marginVertical: 8

playground/src/screens/Screens.js

@@ -104,6 +104,7 @@ module.exports = {
   StatusBarOptions,
   StatusBarFirstTab,
   TopBarBackground: 'TopBarBackground',
+  Toast: 'Toast',
   FlatListScreen: 'FlatListScreen',
   Alert: 'Alert',
   Orientation: 'Orientation',

playground/src/screens/Toast.js

@@ -0,0 +1,65 @@
+const React = require('react');
+const { View, Text, StyleSheet, TouchableOpacity } = require('react-native');
+const Colors = require('../commons/Colors');
+const Navigation = require('../services/Navigation');
+
+const Toast = function ({componentId}) {
+  return (
+    <View style={styles.root}>
+      <View style={styles.toast}>
+        <Text style={styles.text}>This a very important message!</Text>
+        <TouchableOpacity style={styles.button} onPress={() => Navigation.dismissOverlay(componentId)}>
+          <Text style={styles.buttonText}>OK</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    flexDirection: 'column-reverse',
+    backgroundColor: 0x3e434aa1
+    // backgroundColor: 'red'
+  },
+  toast: {
+    elevation: 2,
+    flexDirection: 'row',
+    height: 40,
+    margin: 16,
+    borderRadius: 20,
+    backgroundColor: Colors.accent,
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  text: {
+    color: 'white',
+    fontSize: 16,
+    marginLeft: 16
+  },
+  button: {
+    marginRight: 16
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold'
+  }
+});
+
+Toast.options = {
+  statusBar: {
+    drawBehind: true,
+    backgroundColor: 0x3e434aa1,
+    style: 'light'
+  },
+  layout: {
+    componentBackgroundColor: 'transparent'
+  },
+  overlay: {
+    interceptTouchOutside: false
+  }
+}
+
+module.exports = Toast;

playground/src/screens/index.js

@@ -44,6 +44,7 @@ function registerScreens() {
   Navigation.registerComponent(Screens.StatusBarOptions, () => require('./StatusBarOptionsScreen'));
   Navigation.registerComponent(Screens.StatusBarFirstTab, () => require('./StatusBarFirstTab'));
   Navigation.registerComponent(Screens.TopBarBackground, () => require('../components/TopBarBackground'));
+  Navigation.registerComponent(Screens.Toast, () => require('./Toast'));
 
   const { ContextProvider } = require('../context');
   const ContextScreen = require('./ContextScreen');