status-im/rn-emoji-keyboard
2
0
Fork 0
mirror of https://github.com/status-im/rn-emoji-keyboard.git synced 2025-02-09 14:53:30 +00:00
Code Issues Projects Releases Wiki Activity

fix: android

Browse Source
This commit is contained in:
Jakub Grzywacz 2021-07-08 22:38:40 +02:00
parent 9b91d392b7
commit 0ebdb18b0e
No known key found for this signature in database
GPG Key ID: 5BBB685871FF63C4
3 changed files with 38 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/EmojiKeyboard.tsx
View File

@ -79,7 +79,7 @@ export const EmojiKeyboard = () => {
scrollEnabled={false} scrollEnabled={false}
// onScroll={onScroll} // onScroll={onScroll}
initialNumToRender={1} initialNumToRender={1}
windowSize={7} windowSize={1}
maxToRenderPerBatch={1} maxToRenderPerBatch={1}
/> />
<Categories flatListRef={flatListRef} scrollNav={scrollNav} /> <Categories flatListRef={flatListRef} scrollNav={scrollNav} />

18
src/components/EmojiCategory.tsx
View File

@ -25,7 +25,7 @@ export const EmojiCategory = ({ item }: { item: CategoryTypes }) => {
const { width } = useWindowDimensions(); const { width } = useWindowDimensions();
const ctx = React.useContext(KeyboardContext); const ctx = React.useContext(KeyboardContext);
const numberOfColumns = React.useRef<number>( const numberOfColumns = React.useRef<number>(
Math.floor(width / (ctx.emojiSize + 20)) Math.floor(width / (ctx.emojiSize * 2))
); );
const [empty, setEmpty] = React.useState<EmojiType[]>([]); const [empty, setEmpty] = React.useState<EmojiType[]>([]);
@ -48,22 +48,6 @@ export const EmojiCategory = ({ item }: { item: CategoryTypes }) => {
}); });
const renderItem = React.useCallback( const renderItem = React.useCallback(
// (props) => {
// if (props.item.slug === 'blank_emoji')
// return (
// <View
// {...props}
// style={{ backgroundColor: 'blue', width: 10, height: 10 }}
// />
// );
// else
// return (
// <View
// {...props}
// style={{ backgroundColor: 'red', width: 10, height: 10 }}
// />
// );
// },
(props) => ( (props) => (
<SingleEmoji <SingleEmoji
{...props} {...props}

48
src/components/SingleEmoji.tsx
View File

@ -2,25 +2,49 @@ import * as React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'; import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import type { EmojiType } from '../types'; import type { EmojiType } from '../types';
export const SingleEmoji = ({ export class SingleEmoji extends React.Component<{
item,
onPress,
emojiSize,
}: {
item: EmojiType; item: EmojiType;
onPress: (emojiObject: EmojiType) => void; onPress: (emojiObject: EmojiType) => void;
emojiSize: number; emojiSize: number;
}) => { }> {
if (item.slug !== 'blank_emoji') shouldComponentUpdate() {
return false;
}
render() {
return ( return (
<TouchableOpacity onPress={() => onPress(item)} style={styles.container}> <TouchableOpacity
<View> onPress={() => this.props.onPress(this.props.item)}
<Text style={{ fontSize: emojiSize }}>{item.emoji}</Text> style={styles.container}
>
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: this.props.emojiSize }}>
{this.props.item.emoji}
</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
); );
else return <View style={styles.container} />; }
}; }
// export const SingleEmoji = ({
// item,
// onPress,
// emojiSize,
// }: {
// item: EmojiType;
// onPress: (emojiObject: EmojiType) => void;
// emojiSize: number;
// }) => {
// if (item.slug !== 'blank_emoji')
// return (
// <TouchableOpacity onPress={() => onPress(item)} style={styles.container}>
// <View>
// <Text style={{ fontSize: emojiSize }}>{item.emoji}</Text>
// </View>
// </TouchableOpacity>
// );
// else return <View style={styles.container} />;
// };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { flex: 1, padding: 8 }, container: { flex: 1, padding: 8 },