diff --git a/app/screens/snack_bar/index.tsx b/app/screens/snack_bar/index.tsx index 88a2d7436b..c8b63c9583 100644 --- a/app/screens/snack_bar/index.tsx +++ b/app/screens/snack_bar/index.tsx @@ -3,7 +3,7 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {useIntl} from 'react-intl'; -import {DeviceEventEmitter, Text, TouchableOpacity, useWindowDimensions, ViewStyle} from 'react-native'; +import {DeviceEventEmitter, StyleSheet, Text, TouchableOpacity, useWindowDimensions, ViewStyle} from 'react-native'; import {Gesture, GestureDetector, GestureHandlerRootView} from 'react-native-gesture-handler'; import {Navigation} from 'react-native-navigation'; import Animated, { @@ -35,6 +35,13 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => { color: theme.centerChannelBg, ...typography('Body', 100, 'SemiBold'), }, + gestureRoot: { + flex: 1, + height: 80, + width: '100%', + position: 'absolute', + bottom: 100, + }, }; }); @@ -100,13 +107,17 @@ const SnackBar = ({barType, componentId, onUndoPress, sourceScreen}: SnackBarPro }; } - return [ + return StyleSheet.flatten([ { backgroundColor: theme[config.themeColor], width: '96%', + opacity: 1, + height: TOAST_HEIGHT, + alignSelf: 'center' as const, + borderRadius: 9, }, isTablet && tabletStyle, - ]; + ]); }, [theme, barType]); const animatedMotion = useAnimatedStyle(() => { @@ -190,14 +201,14 @@ const SnackBar = ({barType, componentId, onUndoPress, sourceScreen}: SnackBarPro }, []); return ( - +