status-im/rn-emoji-keyboard
2
0
Fork 0
mirror of https://github.com/status-im/rn-emoji-keyboard.git synced 2025-02-16 18:16:38 +00:00
Code Issues Projects Releases Wiki Activity

build: add backdrop

Browse Source
This commit is contained in:
Jakub Grzywacz 2021-07-07 17:07:52 +02:00
parent a09ce61884
commit 8ec6a69d96
No known key found for this signature in database
GPG Key ID: 5BBB685871FF63C4
1 changed files with 31 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/EmojiPicker.tsx
View File

@ -5,6 +5,8 @@ import {
Animated, Animated,
useWindowDimensions, useWindowDimensions,
StyleSheet, StyleSheet,
TouchableOpacity,
View,
} from 'react-native'; } from 'react-native';
import type { EmojiKeyboardProps } from './types'; import type { EmojiKeyboardProps } from './types';
import { EmojiKeyboard } from './EmojiKeyboard'; import { EmojiKeyboard } from './EmojiKeyboard';
@ -26,20 +28,34 @@ export const EmojiPicker = ({
return ( return (
<Modal visible={isOpen} animationType="slide" transparent={true}> <Modal visible={isOpen} animationType="slide" transparent={true}>
<SafeAreaView style={styles.modalContainer}> <TouchableOpacity
<Knob height={height} offsetY={offsetY} onClose={onClose} /> style={styles.modalContainer}
<Animated.View style={{ height: Animated.subtract(height, offsetY) }}> activeOpacity={1}
<EmojiKeyboard onPress={onClose}
onEmojiSelected={(emoji) => { >
height.setValue(screenHeight * 0.4); <View style={[styles.modalContainer, styles.backdrop]}>
offsetY.setValue(0); <SafeAreaView style={styles.modalContainer}>
onEmojiSelected(emoji); <TouchableOpacity activeOpacity={1}>
onClose(); <>
}} <Knob height={height} offsetY={offsetY} onClose={onClose} />
containerStyles={styles.container} <Animated.View
/> style={{ height: Animated.subtract(height, offsetY) }}
</Animated.View> >
</SafeAreaView> <EmojiKeyboard
onEmojiSelected={(emoji) => {
height.setValue(screenHeight * 0.4);
offsetY.setValue(0);
onEmojiSelected(emoji);
onClose();
}}
containerStyles={styles.container}
/>
</Animated.View>
</>
</TouchableOpacity>
</SafeAreaView>
</View>
</TouchableOpacity>
</Modal> </Modal>
); );
}; };
@ -54,16 +70,5 @@ const styles = StyleSheet.create({
shadowOffset: { width: 0, height: 0 }, shadowOffset: { width: 0, height: 0 },
shadowRadius: 5, shadowRadius: 5,
}, },
knob: { backdrop: { backgroundColor: '#00000055' },
height: 8,
width: 50,
backgroundColor: '#fff',
marginBottom: 10,
alignSelf: 'center',
borderRadius: 4,
shadowColor: 'black',
shadowOpacity: 0.15,
shadowOffset: { width: 0, height: 0 },
shadowRadius: 5,
},
}); });