From 4cbe3e2dbbc636827ae0766bdd5eb86e617b3781 Mon Sep 17 00:00:00 2001
From: Andrzej Zaborski <48238310+AnMiZa@users.noreply.github.com>
Date: Mon, 25 Mar 2024 12:39:10 +0100
Subject: [PATCH 1/3] fix: infinite loop on category swipe (#168)
---
src/components/Categories.tsx | 13 ++++++++----
src/components/CategoryItem.tsx | 6 +++---
src/components/EmojiStaticKeyboard.tsx | 28 +++++++++++++++++---------
src/components/SearchBar.tsx | 9 ++++++++-
4 files changed, 39 insertions(+), 17 deletions(-)
diff --git a/src/components/Categories.tsx b/src/components/Categories.tsx
index 7b513479..f6f5df8b 100644
--- a/src/components/Categories.tsx
+++ b/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 = () =>
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 }) => (
diff --git a/src/components/CategoryItem.tsx b/src/components/CategoryItem.tsx
index d46d865b..cfef1317 100644
--- a/src/components/CategoryItem.tsx
+++ b/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)
}
diff --git a/src/components/EmojiStaticKeyboard.tsx b/src/components/EmojiStaticKeyboard.tsx
index d1934c92..b8194e76 100644
--- a/src/components/EmojiStaticKeyboard.tsx
+++ b/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 && }
+ {enableSearchBar && (
+
+ )}
extraData={[keyboardState.recentlyUsed.length, searchPhrase]}
data={renderList}
@@ -155,7 +162,10 @@ export const EmojiStaticKeyboard = React.memo(
keyboardShouldPersistTaps="handled"
onMomentumScrollEnd={onScrollEnd}
/>
-
+
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index e52381cf..cf2cec21 100644
--- a/src/components/SearchBar.tsx
+++ b/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,
@@ -24,6 +28,7 @@ export const SearchBar = () => {
if (text === '') {
await setActiveCategoryIndex(0)
+ scrollEmojiCategoryListToIndex(0)
setShouldAnimateScroll(enableCategoryChangeAnimation)
return
@@ -32,6 +37,7 @@ export const SearchBar = () => {
const searchIndex = renderList.findIndex((cat) => cat.title === 'search')
if (searchIndex !== -1) {
setActiveCategoryIndex(searchIndex)
+ scrollEmojiCategoryListToIndex(searchIndex)
setShouldAnimateScroll(enableSearchAnimation)
}
}
@@ -40,6 +46,7 @@ export const SearchBar = () => {
clearEmojiTonesData()
inputRef.current?.blur()
setActiveCategoryIndex(0)
+ scrollEmojiCategoryListToIndex(0)
}
return (
From 6a267891aeb1f5799efb2eaddde95ce3100c7bd2 Mon Sep 17 00:00:00 2001
From: Dominik Danielewicz
Date: Mon, 25 Mar 2024 12:39:32 +0100
Subject: [PATCH 2/3] feat: add swedish translations (#170)
---
docs/docs/documentation/internationalization.md | 1 +
src/index.tsx | 3 ++-
src/translation/se.ts | 17 +++++++++++++++++
3 files changed, 20 insertions(+), 1 deletion(-)
create mode 100644 src/translation/se.ts
diff --git a/docs/docs/documentation/internationalization.md b/docs/docs/documentation/internationalization.md
index b281a7aa..7d9ee5b3 100644
--- a/docs/docs/documentation/internationalization.md
+++ b/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.
diff --git a/src/index.tsx b/src/index.tsx
index 1782c280..1e49cd4a 100644
--- a/src/index.tsx
+++ b/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[]
diff --git a/src/translation/se.ts b/src/translation/se.ts
new file mode 100644
index 00000000..0cb28f1a
--- /dev/null
+++ b/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
From a010d3a721c565d445328dc7be2b8d98598640d5 Mon Sep 17 00:00:00 2001
From: Fnwk <86932087+fnwk@users.noreply.github.com>
Date: Mon, 25 Mar 2024 12:40:06 +0100
Subject: [PATCH 3/3] fix: update selected_emojis.md (docs) (#171)
---
docs/docs/documentation/Examples/selected_emojis.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/docs/documentation/Examples/selected_emojis.md b/docs/docs/documentation/Examples/selected_emojis.md
index 642e7d61..47322bfa 100644
--- a/docs/docs/documentation/Examples/selected_emojis.md
+++ b/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 = () => {
// ...