Created
September 29, 2024 19:05
-
-
Save 03balogun/c58576131adc7b775d24c88a22b5b21e to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { AppNavHookType } from '@navigation/navigators' | |
| import { useNavigation } from '@react-navigation/native' | |
| /** | |
| * AnimatedBox, Box, Text, TextInput | |
| * These UI components are extensions of styled-components + custom styles | |
| * e.g | |
| * export const Box = styled.View<BoxProps>`` | |
| * export const Text = styled.Text<TextProps>`` | |
| * export const AnimatedBox = Reanimated.createAnimatedComponent(Box) | |
| * | |
| */ | |
| import { AnimatedBox, Box, Text, TextInput } from '@ui' | |
| import { BlurView } from 'expo-blur' | |
| import { useCallback, useEffect, useState } from 'react' | |
| import { Keyboard, ScrollView, TouchableOpacity } from 'react-native' | |
| import Animated, { | |
| LinearTransition, | |
| useAnimatedKeyboard, | |
| useAnimatedProps, | |
| useAnimatedStyle, | |
| useSharedValue, | |
| withDelay, | |
| withSpring, | |
| withTiming | |
| } from 'react-native-reanimated' | |
| const AnimatedBlurView = Animated.createAnimatedComponent(BlurView) | |
| export const LinearModal = () => { | |
| const [value, setValue] = useState('') | |
| const navigation = useNavigation<AppNavHookType>() | |
| const keyboard = useAnimatedKeyboard() | |
| const blurIntensity = useSharedValue(0) | |
| const blurOpacity = useSharedValue(0) | |
| const blurScale = useSharedValue(0.8) | |
| const animatedModalKeyboardStyles = useAnimatedStyle(() => { | |
| return { | |
| height: withSpring(keyboard.height.value, { | |
| duration: 250 | |
| }) | |
| } | |
| }) | |
| const animatedBlurProps = useAnimatedProps(() => { | |
| return { | |
| intensity: blurIntensity.value | |
| } | |
| }) | |
| const animatedModalContainerStyle = useAnimatedStyle(() => { | |
| return { | |
| opacity: blurOpacity.value, | |
| transform: [ | |
| { | |
| scale: blurScale.value | |
| } | |
| ] | |
| } | |
| }) | |
| useEffect(() => { | |
| blurIntensity.value = withTiming(93, { | |
| duration: 300 | |
| }) | |
| blurOpacity.value = withDelay(100, withTiming(1)) | |
| blurScale.value = withDelay(100, withTiming(1, { duration: 320 })) | |
| }, [blurOpacity, blurIntensity, blurScale]) | |
| const closeModal = useCallback(() => { | |
| Keyboard.dismiss() | |
| blurIntensity.value = withDelay( | |
| 100, | |
| withTiming(0, { | |
| duration: 300 | |
| }) | |
| ) | |
| blurOpacity.value = withTiming(0, { | |
| duration: 150 | |
| }) | |
| blurScale.value = withTiming(0.6) | |
| setTimeout(() => { | |
| navigation.goBack() | |
| }, 300) | |
| }, [blurIntensity, blurOpacity, blurScale, navigation]) | |
| return ( | |
| <AnimatedBlurView | |
| animatedProps={animatedBlurProps} | |
| tint={'systemUltraThinMaterialDark'} | |
| experimentalBlurMethod={'dimezisBlurView'} | |
| style={[{ flex: 1 }]}> | |
| <AnimatedBox | |
| layout={LinearTransition} | |
| pt={'xxxl'} | |
| pb={'xl'} | |
| flex={1} | |
| bgColor={'transparent'}> | |
| <AnimatedBox | |
| layout={LinearTransition} | |
| bgColor={'transparent'} | |
| px={'md'}> | |
| <AnimatedBox | |
| borderRadius={12} | |
| style={[animatedModalContainerStyle, { height: '100%' }]} | |
| bgColor={'white'} | |
| pt={'md'} | |
| overflow={'hidden'}> | |
| <Box | |
| px={'md'} | |
| flexDirection={'row'} | |
| alignItems={'center'} | |
| justifyContent={'space-between'}> | |
| <Text type={'semiBold16'} color={'tertiary'}> | |
| Assignee | |
| </Text> | |
| <TouchableOpacity | |
| onPress={() => { | |
| closeModal() | |
| }}> | |
| <Text type={'medium14'} color={'tertiary'}> | |
| Close | |
| </Text> | |
| </TouchableOpacity> | |
| </Box> | |
| <TextInput | |
| value={value} | |
| onChangeText={v => setValue(v)} | |
| placeholder={'Search...'} | |
| showClear | |
| mt={'md'} | |
| px={'md'} | |
| autoFocus | |
| /> | |
| <ScrollView> | |
| {Array.from({ length: 50 }).map((_, i) => ( | |
| <Box bgColor={'transparent'} key={i} mt={'md'} px={'md'}> | |
| <Text type={'medium14'}>{`Item ${i + 1}`}</Text> | |
| </Box> | |
| ))} | |
| </ScrollView> | |
| </AnimatedBox> | |
| </AnimatedBox> | |
| </AnimatedBox> | |
| <AnimatedBox | |
| style={animatedModalKeyboardStyles} | |
| bgColor={'transparent'} | |
| width={'100%'} | |
| /> | |
| </AnimatedBlurView> | |
| ) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment