@replyke/ui-core-react-native/dist/esm/components/EmojiSuggestions.js

Replyke: Build interactive apps with social features like comments, votes, feeds, user lists, notifications, and more.

import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import { View, Text, TouchableOpacity, Animated } from "react-native";
const emojiGroup1 = ["😂", "❤️", "🤣", "😍", "🙏"];
const emojiGroup2 = ["🥰", "😊", "😭", "👍", "😅"];
const emojiGroup3 = ["😢", "👏", "💕", "🥺", "😘"];
const emojiGroup4 = ["🤔", "🤗", "🙌", "😎", "✨"];
const EmojiSuggestions = ({ onEmojiClick, }) => {
    const [clickedEmoji, setClickedEmoji] = useState(null);
    const [scaleAnim] = useState(new Animated.Value(1));
    const [emojiSubset, setEmojiSubset] = useState([]);
    useEffect(() => {
        // Pick 8 random emojis from the array
        const combinedEmojis = [...emojiGroup1, ...emojiGroup2, ...emojiGroup3];
        const shuffled = combinedEmojis.sort(() => 0.5 - Math.random());
        setEmojiSubset(shuffled.slice(0, 8));
    }, []);
    const handleEmojiClick = (emoji) => {
        setClickedEmoji(emoji);
        // Shrink animation
        Animated.sequence([
            Animated.timing(scaleAnim, {
                toValue: 0.8,
                duration: 100,
                useNativeDriver: true,
            }),
            Animated.timing(scaleAnim, {
                toValue: 1,
                duration: 100,
                useNativeDriver: true,
            }),
        ]).start(() => {
            setClickedEmoji(null);
        });
        onEmojiClick(emoji);
    };
    return (_jsx(View, { style: {
            borderBottomWidth: 0.5,
            borderBottomColor: "#e6e6e6",
            padding: 8,
            flexDirection: "row",
            justifyContent: "space-around", // Distribute emojis evenly
            alignItems: "center",
        }, children: emojiSubset.map((emoji) => (_jsx(TouchableOpacity, { onPress: () => handleEmojiClick(emoji), activeOpacity: 0.7, children: _jsx(Animated.View, { style: {
                    transform: [
                        {
                            scale: clickedEmoji === emoji ? scaleAnim : 1,
                        },
                    ],
                    justifyContent: "center",
                    alignItems: "center",
                }, children: _jsx(Text, { style: {
                        fontSize: 24,
                    }, children: emoji }) }) }, emoji))) }));
};
export default EmojiSuggestions;
//# sourceMappingURL=EmojiSuggestions.js.map