diff options
| -rw-r--r-- | src/components/common/TaggPopup.tsx | 71 | ||||
| -rw-r--r-- | src/routes/onboarding/OnboardingStackScreen.tsx | 8 |
2 files changed, 38 insertions, 41 deletions
diff --git a/src/components/common/TaggPopup.tsx b/src/components/common/TaggPopup.tsx index 86a472b1..b5ac32ec 100644 --- a/src/components/common/TaggPopup.tsx +++ b/src/components/common/TaggPopup.tsx @@ -7,6 +7,7 @@ import {ArrowButton} from '..'; import {OnboardingStackParams} from '../../routes'; import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; import CloseIcon from '../../assets/ionicons/close-outline.svg'; +import {BlurView} from '@react-native-community/blur'; type TaggPopupRouteProps = RouteProp<OnboardingStackParams, 'TaggPopup'>; type TaggPopupNavigationProps = StackNavigationProp< @@ -31,41 +32,43 @@ const TaggPopup: React.FC<TaggPopupProps> = ({route, navigation}) => { const {messageHeader, messageBody, next} = route.params.popupProps; return ( - <TouchableOpacity - style={styles.container} - onPressOut={() => { - navigation.goBack(); - }}> - <View style={styles.popup}> - <Image - style={styles.icon} - source={require('../../assets/icons/plus-logo.png')} - /> - <View style={styles.textContainer}> - <Text style={styles.header}>{messageHeader}</Text> - <Text style={styles.subtext}>{messageBody}</Text> - </View> - {!next && ( - <TouchableOpacity - style={styles.closeButton} - onPress={() => { - navigation.goBack(); - }}> - <CloseIcon height={'50%'} width={'50%'} color={'white'} /> - </TouchableOpacity> - )} - </View> - {next && ( - <View style={styles.footer}> - <ArrowButton - direction="forward" - onPress={() => { - navigation.navigate('TaggPopup', {popupProps: next}); - }} + <BlurView blurType="light" blurAmount={2} style={styles.container}> + <TouchableOpacity + style={styles.container} + onPressOut={() => { + navigation.goBack(); + }}> + <View style={styles.popup}> + <Image + style={styles.icon} + source={require('../../assets/icons/plus-logo.png')} /> + <View style={styles.textContainer}> + <Text style={styles.header}>{messageHeader}</Text> + <Text style={styles.subtext}>{messageBody}</Text> + </View> + {!next && ( + <TouchableOpacity + style={styles.closeButton} + onPress={() => { + navigation.goBack(); + }}> + <CloseIcon height={'50%'} width={'50%'} color={'white'} /> + </TouchableOpacity> + )} </View> - )} - </TouchableOpacity> + {next && ( + <View style={styles.footer}> + <ArrowButton + direction="forward" + onPress={() => { + navigation.navigate('TaggPopup', {popupProps: next}); + }} + /> + </View> + )} + </TouchableOpacity> + </BlurView> ); }; @@ -75,6 +78,8 @@ const styles = StyleSheet.create({ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', + width: '100%', + height: '100%', }, whiteColor: { color: 'white', diff --git a/src/routes/onboarding/OnboardingStackScreen.tsx b/src/routes/onboarding/OnboardingStackScreen.tsx index afc5be99..78f113cc 100644 --- a/src/routes/onboarding/OnboardingStackScreen.tsx +++ b/src/routes/onboarding/OnboardingStackScreen.tsx @@ -76,14 +76,6 @@ const Onboarding: React.FC = () => { outputRange: [0, 0.25, 0.7, 1], }), }, - overlayStyle: { - backgroundColor: '#505050', - opacity: progress.interpolate({ - inputRange: [0, 1], - outputRange: [0, 0.9], - extrapolate: 'clamp', - }), - }, }), }} /> |