Feature/static keyboard (#2)

* fix: use container styles fix

* refactor: rename static modal

* refactor: let use EmojiStaticKeyboard outside modal

* chore: add static keyboard to readme

* fix: improve readme

* refactor: easier use of static keyboard and refactor contexts

* refactor: update readme example

README.md

@@ -61,6 +61,16 @@ export default function App() {
 | onCategoryChangeFailed | function | warn(info) | no | Callback on category change failed (info: {index, highestMeasuredFrameIndex, averageItemLength}) |
 | translation | CategoryTranslation | en | no | Translation object *see translation section* |
 | disabledCategory | CategoryTypes[] | [] | no | Hide categories by passing their slugs |
+## 🖼 Usage as static
+
+```js
+import { EmojiKeyboard } from 'rn-emoji-keyboard';
+
+// ...
+
+<EmojiKeyboard onEmojiSelected={handlePick} />
+```
+Example about serving as static keyboard [you can find here](/example/src/Dark/Dark.tsx).
 ## 🇺🇸 Internationalization
 ### Pre-defined
 Due to the limited translation possibilities, we only provide a few pre-defined translations into the following languages:
@@ -101,11 +111,13 @@ You can clone the repo and run `yarn example ios` or `yarn example android` to p
 ![Preview](/example/assets/translated-preview.jpg)
 ### [DisabledCategories](/example/src/DisabledCategories/DisabledCategories.tsx)
 ![Preview](/example/assets/categories-preview.jpg)
-### [Static (without knob)](/example/src/Static/Static.tsx)
+### [StaticModal (without knob)](/example/src/StaticModal/StaticModal.tsx)
+![Preview](/example/assets/static-modal-preview.jpg)
+### [Static](/example/src/Static/Static.tsx)
 ![Preview](/example/assets/static-preview.jpg)
 ## 📈 Future plans
 * Skin tone palette selector.
 * Search bar.
-* Hide forbidden emojis.
+* Write native module to display forbidden emojis on android.
 ## ⚖️ License
  **[MIT](/LICENSE)**

example/src/App.tsx

@@ -7,6 +7,7 @@ import Basic from './Basic/Basic';
 import Dark from './Dark/Dark';
 import Translated from './Translated/Translated';
 import DisabledCategories from './DisabledCategories/DisabledCategories';
+import StaticModal from './StaticModal/StaticModal';
 import Static from './Static/Static';
 
 const Stack = createStackNavigator();
@@ -22,6 +23,7 @@ export default () => {
           name="DisabledCategories"
           component={DisabledCategories}
         />
+        <Stack.Screen name="StaticModal" component={StaticModal} />
         <Stack.Screen name="Static" component={Static} />
       </Stack.Navigator>
     </NavigationContainer>

example/src/Basic/Basic.tsx

@@ -14,7 +14,7 @@ const Basic = () => {
     setIsModalOpen((prev) => !prev);
   };
   return (
-    <SafeAreaView>
+    <SafeAreaView style={styles.container}>
       <Text style={styles.text}>Result: {result}</Text>
       <TouchableOpacity onPress={() => setIsModalOpen(true)}>
         <Text style={styles.text}>Open</Text>

example/src/DisabledCategories/DisabledCategories.tsx

@@ -14,7 +14,7 @@ const DisabledCategories = () => {
     setIsModalOpen((prev) => !prev);
   };
   return (
-    <SafeAreaView>
+    <SafeAreaView style={styles.container}>
       <Text style={styles.text}>Result: {result}</Text>
       <TouchableOpacity onPress={() => setIsModalOpen(true)}>
         <Text style={styles.text}>Open</Text>

example/src/Examples/Examples.tsx

@@ -9,6 +9,7 @@ type RootStackParamList = {
   Dark: undefined;
   Translated: undefined;
   DisabledCategories: undefined;
+  StaticModal: undefined;
   Static: undefined;
 };
 
@@ -28,6 +29,10 @@ const Examples = ({ navigation }: Props) => {
           title="DisabledCategories"
           onPress={() => navigation.navigate('DisabledCategories')}
         />
+        <Button
+          title="StaticModal"
+          onPress={() => navigation.navigate('StaticModal')}
+        />
         <Button title="Static" onPress={() => navigation.navigate('Static')} />
       </View>
     </SafeAreaView>

example/src/Static/Static.tsx

@@ -1,32 +1,26 @@
 import * as React from 'react';
-import { StyleSheet, Text, TouchableOpacity } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import EmojiPicker from 'rn-emoji-keyboard';
+import { EmojiKeyboard } from 'rn-emoji-keyboard';
 import type { EmojiType } from 'src/types';
 
 const Static = () => {
   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>
+    <SafeAreaView style={styles.container}>
+      <View style={styles.container}>
         <Text style={styles.text}>Result: {result}</Text>
-      <TouchableOpacity onPress={() => setIsModalOpen(true)}>
-        <Text style={styles.text}>Open</Text>
-      </TouchableOpacity>
-
-      <EmojiPicker
+      </View>
+      <View style={styles.container}>
+        <EmojiKeyboard
           onEmojiSelected={handlePick}
-        open={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
-        expandable={false}
-        defaultHeight="65%"
+          containerStyles={styles.keyboardContainer}
         />
+      </View>
     </SafeAreaView>
   );
 };
@@ -40,6 +34,9 @@ const styles = StyleSheet.create({
     margin: 64,
     fontSize: 18,
   },
+  keyboardContainer: {
+    borderRadius: 0,
+  },
 });
 
 export default Static;

example/src/StaticModal/StaticModal.tsx

@@ -0,0 +1,45 @@
+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 StaticModal = () => {
+  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)}
+        expandable={false}
+        defaultHeight="65%"
+      />
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  text: {
+    textAlign: 'center',
+    margin: 64,
+    fontSize: 18,
+  },
+});
+
+export default StaticModal;

example/src/Translated/Translated.tsx

@@ -14,7 +14,7 @@ const Translated = () => {
     setIsModalOpen((prev) => !prev);
   };
   return (
-    <SafeAreaView>
+    <SafeAreaView style={styles.container}>
       <Text style={styles.text}>Emotka: {result}</Text>
       <TouchableOpacity onPress={() => setIsModalOpen(true)}>
         <Text style={styles.text}>Otwórz</Text>

src/EmojiKeyboard.tsx

@@ -1,90 +1,19 @@
 import * as React from 'react';
+import { EmojiStaticKeyboard } from './components/EmojiStaticKeyboard';
+import { KeyboardProvider } from './contexts/KeyboardProvider';
+import type {
+  KeyboardProps,
+  OnEmojiSelected,
+} from './contexts/KeyboardContext';
 
-import {
-  StyleSheet,
-  View,
-  FlatList,
-  useWindowDimensions,
-  Animated,
-} from 'react-native';
-import type { CategoryTypes, EmojisByCategory } from './types';
-import { EmojiCategory } from './components/EmojiCategory';
-import { KeyboardContext } from './KeyboardContext';
-import { Categories } from './components/Categories';
-import emojisByGroup from './assets/emojis.json';
-
-export const EmojiKeyboard = () => {
-  const { width } = useWindowDimensions();
-  const {
-    activeCategoryIndex,
-    containerStyles,
-    onCategoryChangeFailed,
-    disabledCategory,
-  } = React.useContext(KeyboardContext);
-
-  const flatListRef = React.useRef<FlatList>(null);
-
-  const scrollNav = React.useRef(new Animated.Value(0)).current;
-
-  const getItemLayout = (
-    _: CategoryTypes[] | null | undefined,
-    index: number
-  ) => ({
-    length: width,
-    offset: width * index,
-    index,
-  });
-
-  const renderItem = React.useCallback(
-    (props) => <EmojiCategory {...props} />,
-    []
-  );
-  React.useEffect(() => {
-    Animated.spring(scrollNav, {
-      toValue: activeCategoryIndex * (28 + 9),
-      useNativeDriver: true,
-    }).start();
-  }, [activeCategoryIndex, scrollNav]);
+type EmojiKeyboardProps = {
+  onEmojiSelected: OnEmojiSelected;
+} & Partial<KeyboardProps>;
 
+export const EmojiKeyboard = (props: EmojiKeyboardProps) => {
   return (
-    <View style={[styles.container, styles.containerShadow, containerStyles]}>
-      <Animated.FlatList
-        data={emojisByGroup.filter((category) => {
-          const title = category.title as CategoryTypes;
-          return !disabledCategory.includes(title);
-        })}
-        keyExtractor={(item: EmojisByCategory) => item.title}
-        renderItem={renderItem}
-        removeClippedSubviews={true}
-        ref={flatListRef}
-        onScrollToIndexFailed={onCategoryChangeFailed}
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        pagingEnabled
-        scrollEventThrottle={16}
-        getItemLayout={getItemLayout}
-        scrollEnabled={false}
-        initialNumToRender={1}
-        windowSize={2}
-        maxToRenderPerBatch={1}
-      />
-      <Categories flatListRef={flatListRef} scrollNav={scrollNav} />
-    </View>
+    <KeyboardProvider {...props}>
+      <EmojiStaticKeyboard />
+    </KeyboardProvider>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingTop: 16,
-    borderRadius: 16,
-    backgroundColor: '#fff',
-  },
-  containerShadow: {
-    shadowColor: 'black',
-    shadowOpacity: 0.15,
-    shadowOffset: { width: 0, height: 0 },
-    shadowRadius: 5,
-    elevation: 10,
-  },
-});

src/EmojiPicker.tsx

@@ -1,9 +1,12 @@
 import * as React from 'react';
 import { Animated, useWindowDimensions } from 'react-native';
-import { EmojiKeyboard } from './EmojiKeyboard';
+import { EmojiStaticKeyboard } from './components/EmojiStaticKeyboard';
 import { Knob } from './components/Knob';
-import { defaultKeyboardContext, KeyboardProvider } from './KeyboardProvider';
-import type { KeyboardProps } from './KeyboardContext';
+import {
+  defaultKeyboardContext,
+  KeyboardProvider,
+} from './contexts/KeyboardProvider';
+import type { KeyboardProps } from './contexts/KeyboardContext';
 import type { EmojiType } from './types';
 import { ModalWithBackdrop } from './components/ModalWithBackdrop';
 import { getHeight } from './utils';
@@ -61,7 +64,7 @@ export const EmojiPicker = ({
               },
             ]}
           >
-            <EmojiKeyboard />
+            <EmojiStaticKeyboard />
           </Animated.View>
         </>
       </ModalWithBackdrop>

src/components/Categories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View, Animated, StyleSheet, FlatList } from 'react-native';
-import { KeyboardContext } from '../KeyboardContext';
+import { KeyboardContext } from '../contexts/KeyboardContext';
 import {
   CATEGORIES,
   CATEGORIES_NAVIGATION,

src/components/CategoryItem.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { KeyboardContext } from '../KeyboardContext';
+import { KeyboardContext } from '../contexts/KeyboardContext';
 import type { CategoryNavigationItem, CategoryTypes } from '../types';
 import { Icon } from './Icon';
 

src/components/EmojiCategory.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { StyleSheet, View, Text, FlatList } from 'react-native';
 import type { EmojisByCategory, EmojiType, JsonEmoji } from '../types';
 import { SingleEmoji } from './SingleEmoji';
-import { KeyboardContext } from '../KeyboardContext';
+import { KeyboardContext } from '../contexts/KeyboardContext';
 
 const emptyEmoji = {
   emoji: '',

src/components/EmojiStaticKeyboard.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+
+import {
+  StyleSheet,
+  View,
+  FlatList,
+  useWindowDimensions,
+  Animated,
+} from 'react-native';
+import type { CategoryTypes, EmojisByCategory } from '../types';
+import { EmojiCategory } from './EmojiCategory';
+import { KeyboardContext } from '../contexts/KeyboardContext';
+import { Categories } from './Categories';
+import emojisByGroup from '../assets/emojis.json';
+
+export const EmojiStaticKeyboard = () => {
+  const { width } = useWindowDimensions();
+  const {
+    activeCategoryIndex,
+    containerStyles,
+    onCategoryChangeFailed,
+    disabledCategory,
+  } = React.useContext(KeyboardContext);
+
+  const flatListRef = React.useRef<FlatList>(null);
+
+  const scrollNav = React.useRef(new Animated.Value(0)).current;
+
+  const getItemLayout = (
+    _: CategoryTypes[] | null | undefined,
+    index: number
+  ) => ({
+    length: width,
+    offset: width * index,
+    index,
+  });
+
+  const renderItem = React.useCallback(
+    (props) => <EmojiCategory {...props} />,
+    []
+  );
+  React.useEffect(() => {
+    Animated.spring(scrollNav, {
+      toValue: activeCategoryIndex * (28 + 9),
+      useNativeDriver: true,
+    }).start();
+  }, [activeCategoryIndex, scrollNav]);
+
+  return (
+    <View style={[styles.container, styles.containerShadow, containerStyles]}>
+      <Animated.FlatList
+        data={emojisByGroup.filter((category) => {
+          const title = category.title as CategoryTypes;
+          return !disabledCategory.includes(title);
+        })}
+        keyExtractor={(item: EmojisByCategory) => item.title}
+        renderItem={renderItem}
+        removeClippedSubviews={true}
+        ref={flatListRef}
+        onScrollToIndexFailed={onCategoryChangeFailed}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        pagingEnabled
+        scrollEventThrottle={16}
+        getItemLayout={getItemLayout}
+        scrollEnabled={false}
+        initialNumToRender={1}
+        windowSize={2}
+        maxToRenderPerBatch={1}
+      />
+      <Categories flatListRef={flatListRef} scrollNav={scrollNav} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 16,
+    borderRadius: 16,
+    backgroundColor: '#fff',
+  },
+  containerShadow: {
+    shadowColor: 'black',
+    shadowOpacity: 0.15,
+    shadowOffset: { width: 0, height: 0 },
+    shadowRadius: 5,
+    elevation: 10,
+  },
+});

src/components/Knob.tsx

@@ -7,7 +7,7 @@ import {
   PanResponder,
 } from 'react-native';
 import { getHeight } from '../utils';
-import { KeyboardContext } from '../KeyboardContext';
+import { KeyboardContext } from '../contexts/KeyboardContext';
 
 type KnobProps = {
   offsetY: Animated.Value;

src/components/ModalWithBackdrop.tsx

@@ -8,7 +8,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { KeyboardContext } from '../KeyboardContext';
+import { KeyboardContext } from '../contexts/KeyboardContext';
 
 type ModalWithBackdropProps = {
   isOpen: boolean;

src/contexts/KeyboardContext.tsx

@@ -4,12 +4,14 @@ import {
   defaultKeyboardContext,
   defaultKeyboardValues,
 } from './KeyboardProvider';
-import type { CategoryTranslation, EmojiType, CategoryTypes } from './types';
+import type { CategoryTranslation, EmojiType, CategoryTypes } from '../types';
+
+export type OnEmojiSelected = (emoji: EmojiType) => void;
 
 export type KeyboardProps = {
   open: boolean;
   onClose: () => void;
-  onEmojiSelected: (emoji: EmojiType) => void;
+  onEmojiSelected: OnEmojiSelected;
   emojiSize?: number;
   containerStyles?: ViewStyle;
   knobStyles?: ViewStyle;

src/contexts/KeyboardProvider.tsx

@@ -4,12 +4,14 @@ import {
   KeyboardProps,
   ContextValues,
   KeyboardContext,
+  OnEmojiSelected,
 } from './KeyboardContext';
-import en from './translation/en';
-import type { EmojiType } from './types';
+import en from '../translation/en';
+import type { EmojiType } from '../types';
 
-type ProviderProps = KeyboardProps & {
+type ProviderProps = Partial<KeyboardProps> & {
   children: React.ReactNode;
+  onEmojiSelected: OnEmojiSelected;
 };
 
 export const defaultKeyboardContext: Required<KeyboardProps> = {

src/index.tsx

@@ -1,10 +1,9 @@
-import { EmojiKeyboard } from './EmojiKeyboard';
 import { EmojiPicker } from './EmojiPicker';
-import { KeyboardProvider } from './KeyboardProvider';
+import { EmojiKeyboard } from './EmojiKeyboard';
 import en from './translation/en';
 import pl from './translation/pl';
 
-export { EmojiKeyboard, KeyboardProvider };
+export { EmojiKeyboard };
 export { en, pl };
 
 export default EmojiPicker;