feat: add animated example

Author: kirillzyusko

example/src/screens/Examples/KeyboardEffects/index.tsx

@@ -1,8 +1,19 @@
-import React, { useState } from "react";
-import { StyleSheet, TextInput, TouchableOpacity, View } from "react-native";
+import React, { useCallback, useMemo, useState } from "react";
+import {
+  Image,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import { KeyboardEffects } from "react-native-keyboard-controller";
 import { SafeAreaView } from "react-native-safe-area-context";
 
+const GIF_SOURCE = {
+  uri: "https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExbG1hdjU0bDBqZ3dha3NoNXF0YTY5ajNhNTdmMmV5azZsMHhlc21pMyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/dAWZiSMbMvObDWP3aA/giphy.gif",
+};
+
 const COLORS = [
   "#FF6B6B",
   "#4ECDC4",
@@ -12,34 +23,75 @@ const COLORS = [
   "#DDA0DD",
 ];
 
+type ColorButtonProps = {
+  color: string;
+  index: number;
+  selectedIndex: number;
+  onSelect: (index: number) => void;
+};
+
+const ColorButton = ({
+  color,
+  index,
+  selectedIndex,
+  onSelect,
+}: ColorButtonProps) => {
+  const onPress = useCallback(() => onSelect(index), [index, onSelect]);
+  const buttonStyle = useMemo(
+    () => [
+      styles.colorButton,
+      { backgroundColor: color },
+      index === selectedIndex && styles.selectedColor,
+    ],
+    [color, index, selectedIndex],
+  );
+
+  return <TouchableOpacity style={buttonStyle} onPress={onPress} />;
+};
+
 const KeyboardEffectsExample = () => {
   const [colorIndex, setColorIndex] = useState(0);
+  const [showGif, setShowGif] = useState(false);
+
+  const toggleGif = useCallback(() => setShowGif((v) => !v), []);
+
+  const colorEffectStyle = useMemo(
+    () => [styles.fill, { backgroundColor: COLORS[colorIndex] }],
+    [colorIndex],
+  );
 
   return (
     <>
       <SafeAreaView style={styles.container}>
-        <View style={styles.colorPicker}>
-          {COLORS.map((color, index) => (
-            <TouchableOpacity
-              key={color}
-              style={[
-                styles.colorButton,
-                { backgroundColor: color },
-                index === colorIndex && styles.selectedColor,
-              ]}
-              onPress={() => setColorIndex(index)}
-            />
-          ))}
+        <View style={styles.controls}>
+          <View style={styles.colorPicker}>
+            {COLORS.map((color, index) => (
+              <ColorButton
+                key={color}
+                color={color}
+                index={index}
+                selectedIndex={colorIndex}
+                onSelect={setColorIndex}
+              />
+            ))}
+          </View>
+          <TouchableOpacity style={styles.toggleButton} onPress={toggleGif}>
+            <Text style={styles.toggleButtonText}>
+              {showGif ? "GIF" : "Color"}
+            </Text>
+          </TouchableOpacity>
         </View>
         <TextInput
           placeholder="Tap to open keyboard..."
           style={styles.textInput}
         />
       </SafeAreaView>
       <KeyboardEffects>
-        <View
-          style={[styles.effect, { backgroundColor: COLORS[colorIndex] }]}
-        />
+        {showGif ? (
+          <Image source={GIF_SOURCE} style={styles.fill} />
+        ) : (
+          <View style={colorEffectStyle} />
+        )}
       </KeyboardEffects>
     </>
   );
@@ -50,12 +102,17 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "space-between",
   },
-  colorPicker: {
+  controls: {
     flexDirection: "row",
+    alignItems: "center",
     justifyContent: "center",
     gap: 12,
     padding: 16,
   },
+  colorPicker: {
+    flexDirection: "row",
+    gap: 12,
+  },
   colorButton: {
     width: 40,
     height: 40,
@@ -65,6 +122,17 @@ const styles = StyleSheet.create({
     borderWidth: 3,
     borderColor: "#333",
   },
+  toggleButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 20,
+    borderWidth: 2,
+    borderColor: "#ccc",
+  },
+  toggleButtonText: {
+    fontWeight: "600",
+    color: "#333",
+  },
   textInput: {
     height: 50,
     paddingHorizontal: 16,
@@ -74,7 +142,7 @@ const styles = StyleSheet.create({
     borderColor: "#ccc",
     borderRadius: 8,
   },
-  effect: {
+  fill: {
     flex: 1,
   },
 });