123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- const React = require('react');
- const { View, Text, StyleSheet, TouchableOpacity } = require('react-native');
- const Colors = require('../commons/Colors');
- const Navigation = require('../services/Navigation');
- const {
- TOAST_OK_BTN_INNER,
- TOAST_OK_BTN_OUTER
- } = require('../testIDs');
-
- const Toast = function ({componentId}) {
- const dismiss = (txt) => {
- alert(txt)
- Navigation.dismissOverlay(componentId);
- }
-
- return (
- <View style={styles.root}>
- <TouchableOpacity testID={TOAST_OK_BTN_OUTER} onPress={() => dismiss('Outer button clicked')}>
- <View style={styles.toast}>
- <Text style={styles.text}>This a very important message!</Text>
- <TouchableOpacity testID={TOAST_OK_BTN_INNER} style={styles.button} onPress={() => dismiss('Inner button clicked')}>
- <Text style={styles.buttonText}>OK</Text>
- </TouchableOpacity>
- </View>
- </TouchableOpacity>
- </View>
- )
- }
-
- const styles = StyleSheet.create({
- root: {
- flex: 1,
- flexDirection: 'column-reverse',
- backgroundColor: 0x3e434aa1
- },
- 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;
|