@replyke/ui-core-react-native
Version:
Replyke: Build interactive apps with social features like comments, votes, feeds, user lists, notifications, and more.
59 lines • 2.71 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_native_1 = require("react-native");
const emojiGroup1 = ["😂", "❤️", "🤣", "😍", "🙏"];
const emojiGroup2 = ["🥰", "😊", "😭", "👍", "😅"];
const emojiGroup3 = ["😢", "👏", "💕", "🥺", "😘"];
const emojiGroup4 = ["🤔", "🤗", "🙌", "😎", "✨"];
const EmojiSuggestions = ({ onEmojiClick, }) => {
const [clickedEmoji, setClickedEmoji] = (0, react_1.useState)(null);
const [scaleAnim] = (0, react_1.useState)(new react_native_1.Animated.Value(1));
const [emojiSubset, setEmojiSubset] = (0, react_1.useState)([]);
(0, react_1.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
react_native_1.Animated.sequence([
react_native_1.Animated.timing(scaleAnim, {
toValue: 0.8,
duration: 100,
useNativeDriver: true,
}),
react_native_1.Animated.timing(scaleAnim, {
toValue: 1,
duration: 100,
useNativeDriver: true,
}),
]).start(() => {
setClickedEmoji(null);
});
onEmojiClick(emoji);
};
return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
borderBottomWidth: 0.5,
borderBottomColor: "#e6e6e6",
padding: 8,
flexDirection: "row",
justifyContent: "space-around", // Distribute emojis evenly
alignItems: "center",
}, children: emojiSubset.map((emoji) => ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: () => handleEmojiClick(emoji), activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: {
transform: [
{
scale: clickedEmoji === emoji ? scaleAnim : 1,
},
],
justifyContent: "center",
alignItems: "center",
}, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
fontSize: 24,
}, children: emoji }) }) }, emoji))) }));
};
exports.default = EmojiSuggestions;
//# sourceMappingURL=EmojiSuggestions.js.map