Fix FlatList not working properly in ActionSheet

This commit is contained in:
Danish Ahmed Mirza 2022-07-26 02:37:10 +05:30 committed by Danish
parent 7d64b262cf
commit 086b98f8fb
4 changed files with 3 additions and 16 deletions

View File

@ -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} />

View File

@ -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

View File

@ -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

View File

@ -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;