1import { Modal, View, Text, Pressable, StyleSheet } from 'react-native'; 2import MaterialIcons from '@expo/vector-icons/MaterialIcons'; 3 4export default function EmojiPicker({ isVisible, children, onClose }) { 5 return ( 6 <Modal animationType="slide" transparent={true} visible={isVisible}> 7 <View style={styles.modalContent}> 8 <View style={styles.titleContainer}> 9 <Text style={styles.title}>Choose a sticker</Text> 10 <Pressable onPress={onClose}> 11 <MaterialIcons name="close" color="#fff" size={22} /> 12 </Pressable> 13 </View> 14 {children} 15 </View> 16 </Modal> 17 ); 18} 19 20const styles = StyleSheet.create({ 21 modalContent: { 22 height: '25%', 23 width: '100%', 24 backgroundColor: '#25292e', 25 borderTopRightRadius: 18, 26 borderTopLeftRadius: 18, 27 position: 'absolute', 28 bottom: 0, 29 }, 30 titleContainer: { 31 height: '16%', 32 backgroundColor: '#464C55', 33 borderTopRightRadius: 10, 34 borderTopLeftRadius: 10, 35 paddingHorizontal: 20, 36 flexDirection: 'row', 37 alignItems: 'center', 38 justifyContent: 'space-between', 39 }, 40 title: { 41 color: '#fff', 42 fontSize: 16, 43 }, 44}); 45