Fix FlatList not working properly in ActionSheet
This commit is contained in:
parent
7d64b262cf
commit
086b98f8fb
|
@ -140,8 +140,7 @@ const ActionSheet = React.memo(
|
||||||
style={{ ...styles.container, ...bottomSheet }}
|
style={{ ...styles.container, ...bottomSheet }}
|
||||||
backgroundStyle={{ backgroundColor: colors.focusedBackground }}
|
backgroundStyle={{ backgroundColor: colors.focusedBackground }}
|
||||||
onChange={index => index === -1 && onClose()}
|
onChange={index => index === -1 && onClose()}
|
||||||
activeOffsetY={[-5, 5]}
|
enableContentPanningGesture={false}
|
||||||
failOffsetX={[-5, 5]}
|
|
||||||
{...androidTablet}
|
{...androidTablet}
|
||||||
>
|
>
|
||||||
<BottomSheetContent options={data?.options} hide={hide} children={data?.children} hasCancel={data?.hasCancel} />
|
<BottomSheetContent options={data?.options} hide={hide} children={data?.children} hasCancel={data?.hasCancel} />
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Text, Pressable } from 'react-native';
|
import { Text, Pressable } from 'react-native';
|
||||||
import { BottomSheetFlatList } from '@gorhom/bottom-sheet';
|
import { FlatList } from 'react-native-gesture-handler';
|
||||||
import { FlatList as GHFlatList } from 'react-native-gesture-handler';
|
|
||||||
|
|
||||||
import shortnameToUnicode from '../../lib/methods/helpers/shortnameToUnicode';
|
import shortnameToUnicode from '../../lib/methods/helpers/shortnameToUnicode';
|
||||||
import styles from './styles';
|
import styles from './styles';
|
||||||
|
@ -36,18 +35,10 @@ const Emoji = React.memo(({ emoji, size, baseUrl }: IEmojiProps) => {
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
const EmojiCategory = ({
|
const EmojiCategory = ({ baseUrl, onEmojiSelected, emojis, width, tabsCount }: IEmojiCategory): React.ReactElement | null => {
|
||||||
baseUrl,
|
|
||||||
onEmojiSelected,
|
|
||||||
emojis,
|
|
||||||
width,
|
|
||||||
tabsCount,
|
|
||||||
isBottomSheet
|
|
||||||
}: IEmojiCategory): React.ReactElement | null => {
|
|
||||||
const emojiSize = width ? Math.min(width / tabsCount, MAX_EMOJI_SIZE) : MAX_EMOJI_SIZE;
|
const emojiSize = width ? Math.min(width / tabsCount, MAX_EMOJI_SIZE) : MAX_EMOJI_SIZE;
|
||||||
const numColumns = Math.trunc(width ? width / emojiSize : tabsCount);
|
const numColumns = Math.trunc(width ? width / emojiSize : tabsCount);
|
||||||
const { colors } = useTheme();
|
const { colors } = useTheme();
|
||||||
const FlatList = isBottomSheet ? BottomSheetFlatList : GHFlatList;
|
|
||||||
|
|
||||||
const renderItem = (emoji: IEmoji) => (
|
const renderItem = (emoji: IEmoji) => (
|
||||||
<Pressable
|
<Pressable
|
||||||
|
|
|
@ -137,7 +137,6 @@ const EmojiPicker = ({
|
||||||
baseUrl={baseUrl}
|
baseUrl={baseUrl}
|
||||||
tabLabel={label}
|
tabLabel={label}
|
||||||
tabsCount={tabsCount}
|
tabsCount={tabsCount}
|
||||||
isBottomSheet={!isEmojiKeyboard}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -159,7 +158,6 @@ const EmojiPicker = ({
|
||||||
baseUrl={baseUrl}
|
baseUrl={baseUrl}
|
||||||
tabLabel={'searching'}
|
tabLabel={'searching'}
|
||||||
tabsCount={tabsCount}
|
tabsCount={tabsCount}
|
||||||
isBottomSheet={!isEmojiKeyboard}
|
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<ScrollableTabView
|
<ScrollableTabView
|
||||||
|
|
|
@ -36,7 +36,6 @@ export interface IEmojiCategory {
|
||||||
style: StyleProp<ImageStyle>;
|
style: StyleProp<ImageStyle>;
|
||||||
tabLabel: string;
|
tabLabel: string;
|
||||||
tabsCount: number;
|
tabsCount: number;
|
||||||
isBottomSheet: boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export type TGetCustomEmoji = (name: string) => any;
|
export type TGetCustomEmoji = (name: string) => any;
|
||||||
|
|
Loading…
Reference in New Issue