Merge branch 'master' of https://github.com/TheWidlarzGroup/rn-emoji-…

…keyboard into feat/optional-search-clear-icon

docs/docs/documentation/Examples/selected_emojis.md

@@ -13,7 +13,7 @@ To use this feature you have to pass a [selectedEmojis](/docs/api/modal#selected
 When you provide selectedEmojis array, `onEmojiSelected` callback will also return `alreadySelected` boolean indicating whether pressed emoji was already selected or not.
 
 ```jsx
-import EmojiPicker from 'rn-emoji-keyboard'
+import EmojiPicker, { EmojiType } from 'rn-emoji-keyboard';
 
 const ExampleComponent = () => {
   // ...

docs/docs/documentation/internationalization.md

@@ -25,6 +25,7 @@ Due to the limited translation possibilities, we only provide a few pre-defined
 - `no` - Norwegian 🇳🇴
 - `ro` - Romanian 🇷🇴
 - `np` - Nepali 🇳🇵
+- `se` - Swedish 🇸🇪
 
 First import lang and use it as `translation` prop.
 

src/components/Categories.tsx

@@ -6,12 +6,13 @@ import { CategoryItem } from './CategoryItem'
 import { exhaustiveTypeCheck } from '../utils/exhaustiveTypeCheck'
 import { defaultTheme } from '../contexts/KeyboardContext'
 
-const CATEGORY_ELEMENT_WIDTH = 37
+export const CATEGORY_ELEMENT_WIDTH = 37
 
 const Separator = () => <View style={styles.separator} />
 
 type Props = {
   scrollNav?: Animated.Value
+  scrollEmojiCategoryListToIndex: (index: number) => void
 }
 
 export const Categories = (p: Props) => {
@@ -27,9 +28,13 @@ export const Categories = (p: Props) => {
   } = React.useContext(KeyboardContext)
 
   const scrollNav = React.useRef(new Animated.Value(0)).current
-  const handleScrollToCategory = React.useCallback(() => {
-    setShouldAnimateScroll(enableCategoryChangeAnimation)
-  }, [setShouldAnimateScroll, enableCategoryChangeAnimation])
+  const handleScrollToCategory = React.useCallback(
+    (index: number) => {
+      setShouldAnimateScroll(enableCategoryChangeAnimation)
+      p.scrollEmojiCategoryListToIndex(index)
+    },
+    [setShouldAnimateScroll, enableCategoryChangeAnimation, p],
+  )
 
   const renderItem = React.useCallback(
     ({ item, index }: { item: CategoryNavigationItem; index: number }) => (

src/components/CategoryItem.tsx

@@ -1,20 +1,20 @@
 import * as React from 'react'
 import { View, StyleSheet, TouchableOpacity } from 'react-native'
 import { KeyboardContext } from '../contexts/KeyboardContext'
-import type { CategoryNavigationItem, CategoryTypes } from '../types'
+import type { CategoryNavigationItem } from '../types'
 import { Icon } from './Icon'
 
 type CategoryItemProps = {
   item: CategoryNavigationItem
   index: number
-  handleScrollToCategory: (category: CategoryTypes) => void
+  handleScrollToCategory: (index: number) => void
 }
 
 export const CategoryItem = ({ item, index, handleScrollToCategory }: CategoryItemProps) => {
   const { activeCategoryIndex, theme, setActiveCategoryIndex } = React.useContext(KeyboardContext)
 
   const handleSelect = () => {
-    handleScrollToCategory(item.category)
+    handleScrollToCategory(index)
     setActiveCategoryIndex(index)
   }
 

src/components/EmojiStaticKeyboard.tsx

@@ -13,13 +13,12 @@ import {
 import { type EmojisByCategory } from '../types'
 import { EmojiCategory } from './EmojiCategory'
 import { KeyboardContext } from '../contexts/KeyboardContext'
-import { Categories } from './Categories'
+import { Categories, CATEGORY_ELEMENT_WIDTH } from './Categories'
 import { SearchBar } from './SearchBar'
 import { useKeyboardStore } from '../store/useKeyboardStore'
 import { ConditionalContainer } from './ConditionalContainer'
 import { SkinTones } from './SkinTones'
 
-const CATEGORY_ELEMENT_WIDTH = 37
 const isAndroid = Platform.OS === 'android'
 
 export const EmojiStaticKeyboard = React.memo(
@@ -85,13 +84,19 @@ export const EmojiStaticKeyboard = React.memo(
       [activeCategoryIndex],
     )
 
+    const scrollEmojiCategoryListToIndex = React.useCallback(
+      (index: number) => {
+        flatListRef.current?.scrollToIndex({
+          index,
+          animated: shouldAnimateScroll && enableCategoryChangeAnimation,
+        })
+      },
+      [enableCategoryChangeAnimation, shouldAnimateScroll],
+    )
+
     React.useEffect(() => {
-      flatListRef.current?.scrollToIndex({
-        index: activeCategoryIndex,
-        animated: shouldAnimateScroll && enableCategoryChangeAnimation,
-      })
       setKeyboardScrollOffsetY(0)
-    }, [activeCategoryIndex, enableCategoryChangeAnimation, shouldAnimateScroll])
+    }, [activeCategoryIndex])
 
     const keyExtractor = React.useCallback((item: EmojisByCategory) => item.title, [])
     const scrollNav = React.useRef(new Animated.Value(0)).current
@@ -134,7 +139,9 @@ export const EmojiStaticKeyboard = React.memo(
           )}
         >
           <>
-            {enableSearchBar && <SearchBar />}
+            {enableSearchBar && (
+              <SearchBar scrollEmojiCategoryListToIndex={scrollEmojiCategoryListToIndex} />
+            )}
             <Animated.FlatList<EmojisByCategory>
               extraData={[keyboardState.recentlyUsed.length, searchPhrase]}
               data={renderList}
@@ -155,7 +162,10 @@ export const EmojiStaticKeyboard = React.memo(
               keyboardShouldPersistTaps="handled"
               onMomentumScrollEnd={onScrollEnd}
             />
-            <Categories scrollNav={enableCategoryChangeGesture ? scrollNav : undefined} />
+            <Categories
+              scrollEmojiCategoryListToIndex={scrollEmojiCategoryListToIndex}
+              scrollNav={enableCategoryChangeGesture ? scrollNav : undefined}
+            />
             <SkinTones keyboardScrollOffsetY={keyboardScrollOffsetY} />
           </>
         </ConditionalContainer>

src/components/SearchBar.tsx

@@ -3,7 +3,11 @@ import { View, StyleSheet, TextInput, TouchableOpacity } from 'react-native'
 import { KeyboardContext } from '../contexts/KeyboardContext'
 import { Icon } from './Icon'
 
-export const SearchBar = () => {
+type SearchBarProps = {
+  scrollEmojiCategoryListToIndex: (index: number) => void
+}
+
+export const SearchBar = ({ scrollEmojiCategoryListToIndex }: SearchBarProps) => {
   const {
     searchPhrase,
     setSearchPhrase,
@@ -25,6 +29,7 @@ export const SearchBar = () => {
 
     if (text === '') {
       setActiveCategoryIndex(0)
+      scrollEmojiCategoryListToIndex(0)
       setShouldAnimateScroll(enableCategoryChangeAnimation)
 
       return
@@ -33,6 +38,7 @@ export const SearchBar = () => {
     const searchIndex = renderList.findIndex((cat) => cat.title === 'search')
     if (searchIndex !== -1) {
       setActiveCategoryIndex(searchIndex)
+      scrollEmojiCategoryListToIndex(searchIndex)
       setShouldAnimateScroll(enableSearchAnimation)
     }
   }
@@ -43,6 +49,7 @@ export const SearchBar = () => {
     setTimeout(() => {
       inputRef.current?.blur()
     }, 0)
+    scrollEmojiCategoryListToIndex(0)
   }
 
   return (

src/index.tsx

@@ -19,12 +19,13 @@ import tr from './translation/tr'
 import no from './translation/no'
 import ro from './translation/ro'
 import np from './translation/np'
+import se from './translation/se'
 import EmojisData from './assets/emojis.json'
 import type { EmojisByCategory } from './types'
 
 export { EmojiKeyboard }
 export { useRecentPicksPersistence }
-export { en, pl, ko, it, fr, id, es, de, pt, ru, ua, vi, cs, ja, tr, no, ro, np }
+export { en, pl, ko, it, fr, id, es, de, pt, ru, ua, vi, cs, ja, tr, no, ro, np, se }
 export type { EmojisByCategory, EmojiType } from './types'
 export const emojisByCategory = EmojisData as EmojisByCategory[]
 

src/translation/se.ts

@@ -0,0 +1,17 @@
+import type { CategoryTranslation } from '../types'
+
+const se: CategoryTranslation = {
+  recently_used: 'Senast använda',
+  smileys_emotion: 'Smileys & Känslouttryck',
+  people_body: 'Människa & Kropp',
+  animals_nature: 'Djur & Natur',
+  food_drink: 'Mat & Dryck',
+  travel_places: 'Resa & Platser',
+  activities: 'Aktiviteter',
+  objects: 'Objekt',
+  symbols: 'Symboler',
+  flags: 'Flaggor',
+  search: 'Sök',
+}
+
+export default se