docs: add example

example/src/App.tsx

@@ -11,6 +11,7 @@ import StaticModal from './StaticModal/StaticModal';
 import Static from './Static/Static';
 import TopCategory from './TopCategory/TopCategory';
 import BottomCategory from './BottomCategory/BottomCategory';
+import SearchBar from './SearchBar/SearchBar';
 
 const Stack = createStackNavigator();
 export default () => {
@@ -29,6 +30,7 @@ export default () => {
         <Stack.Screen name="Static" component={Static} />
         <Stack.Screen name="TopCategory" component={TopCategory} />
         <Stack.Screen name="BottomCategory" component={BottomCategory} />
+        <Stack.Screen name="SearchBar" component={SearchBar} />
       </Stack.Navigator>
     </NavigationContainer>
   );

example/src/Examples/Examples.tsx

@@ -13,6 +13,7 @@ type RootStackParamList = {
   Static: undefined;
   TopCategory: undefined;
   BottomCategory: undefined;
+  SearchBar: undefined;
 };
 
 type Props = StackScreenProps<RootStackParamList, 'Examples'>;
@@ -47,6 +48,10 @@ const Examples = ({ navigation }: Props) => {
           title="Category Bottom"
           onPress={() => navigation.navigate('BottomCategory')}
         />
+        <Button
+          title="Search Bar"
+          onPress={() => navigation.navigate('SearchBar')}
+        />
       </View>
     </SafeAreaView>
   );

example/src/SearchBar/SearchBar.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { StyleSheet, Text, TouchableOpacity } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import EmojiPicker from 'rn-emoji-keyboard';
+import type { EmojiType } from 'src/types';
+
+const SearchBar = () => {
+  const [result, setResult] = React.useState<string>();
+  const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false);
+
+  const handlePick = (emoji: EmojiType) => {
+    console.log(emoji);
+    setResult(emoji.emoji);
+    setIsModalOpen((prev) => !prev);
+  };
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text style={styles.text}>Result: {result}</Text>
+      <TouchableOpacity onPress={() => setIsModalOpen(true)}>
+        <Text style={styles.text}>Open</Text>
+      </TouchableOpacity>
+
+      <EmojiPicker
+        onEmojiSelected={handlePick}
+        open={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        enableSearchBar
+      />
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  text: {
+    textAlign: 'center',
+    margin: 64,
+    fontSize: 18,
+  },
+});
+
+export default SearchBar;