stream-chat-react-native-core 9.0.0-beta.3 → 9.0.0-beta.31

package/src/components/ChannelPreview/__tests__/ChannelSwipableWrapper.test.tsx

@@ -0,0 +1,204 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { act, render } from '@testing-library/react-native';
+import type { Channel } from 'stream-chat';
+
+import type { ChannelActionItem } from '../../ChannelList/hooks/useChannelActionItems';
+import * as ChannelActionItemsModule from '../../ChannelList/hooks/useChannelActionItems';
+import * as ChannelActionsModule from '../../ChannelList/hooks/useChannelActions';
+import { ChannelSwipableWrapper } from '../ChannelSwipableWrapper';
+import * as UseIsChannelMutedModule from '../hooks/useIsChannelMuted';
+
+const rightActionsProbe = {
+  items: [] as Array<{ action: () => void; id: string }>,
+};
+
+const mockSwipableWrapper = jest.fn(
+  ({
+    children,
+    swipableProps,
+  }: React.PropsWithChildren<{
+    swipableProps?: { renderRightActions?: (...args: never[]) => void };
+  }>) => {
+    const rightActions = swipableProps?.renderRightActions?.({} as never, {} as never);
+    return (
+      <>
+        {children}
+        {rightActions}
+      </>
+    );
+  },
+);
+
+jest.mock('../../../contexts/themeContext/ThemeContext', () => ({
+  useTheme: () => ({
+    theme: {
+      semantics: {
+        accentPrimary: '#00f',
+        backgroundCoreSurfaceDefault: '#fff',
+        textOnAccent: '#000',
+        textPrimary: '#111',
+      },
+    },
+  }),
+}));
+
+jest.mock('../../../contexts/swipeableContext/SwipeRegistryContext', () => ({
+  useSwipeRegistryContext: () => ({
+    closeAll: jest.fn(),
+  }),
+}));
+
+jest.mock('../../UIComponents/BottomSheetModal', () => ({
+  BottomSheetModal: ({ children }: React.PropsWithChildren) => <>{children}</>,
+}));
+
+jest.mock('../../UIComponents/SwipableWrapper', () => ({
+  RightActions: ({ items }: { items: Array<{ action: () => void; id: string }> }) => {
+    rightActionsProbe.items = items;
+    return null;
+  },
+  SwipableWrapper: (...args: unknown[]) => mockSwipableWrapper(...args),
+}));
+
+describe('ChannelSwipableWrapper', () => {
+  const channel = { cid: 'messaging:test-channel', id: 'test-channel' } as Channel;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    rightActionsProbe.items = [];
+  });
+
+  it('uses channel mute for direct-channel swipe actions and keeps mute user in the sheet', () => {
+    const muteChannel = jest.fn();
+    const unmuteChannel = jest.fn();
+    const customBottomSheet = jest.fn(() => null);
+    const items: ChannelActionItem[] = [
+      {
+        Icon: () => null,
+        action: jest.fn(),
+        id: 'mute',
+        label: 'Mute User',
+        placement: 'sheet',
+        type: 'standard',
+      },
+      {
+        Icon: () => null,
+        action: jest.fn(),
+        id: 'archive',
+        label: 'Archive Chat',
+        placement: 'sheet',
+        type: 'standard',
+      },
+    ];
+
+    jest.spyOn(ChannelActionsModule, 'useChannelActions').mockReturnValue({
+      archive: jest.fn(),
+      blockUser: jest.fn(),
+      deleteChannel: jest.fn(),
+      leave: jest.fn(),
+      muteChannel,
+      muteUser: jest.fn(),
+      pin: jest.fn(),
+      unarchive: jest.fn(),
+      unblockUser: jest.fn(),
+      unmuteChannel,
+      unmuteUser: jest.fn(),
+      unpin: jest.fn(),
+    });
+    jest.spyOn(ChannelActionItemsModule, 'useChannelActionItems').mockReturnValue(items);
+    jest.spyOn(UseIsChannelMutedModule, 'useIsChannelMuted').mockReturnValue({
+      createdAt: null,
+      expiresAt: null,
+      muted: false,
+    });
+
+    render(
+      <ChannelSwipableWrapper channel={channel} ChannelDetailsBottomSheet={customBottomSheet}>
+        <Text>child</Text>
+      </ChannelSwipableWrapper>,
+    );
+
+    expect(customBottomSheet).toHaveBeenCalledWith(
+      expect.objectContaining({
+        channel,
+        items,
+      }),
+      undefined,
+    );
+    expect(rightActionsProbe.items.map((item) => item.id)).toEqual(['openSheet', 'mute']);
+
+    act(() => {
+      rightActionsProbe.items[1].action();
+    });
+
+    expect(muteChannel).toHaveBeenCalledTimes(1);
+    expect(unmuteChannel).not.toHaveBeenCalled();
+  });
+
+  it('removes mute group from the sheet while keeping mute as the quick swipe action', () => {
+    const muteChannel = jest.fn();
+    const customBottomSheet = jest.fn(() => null);
+    const muteItem = {
+      Icon: () => null,
+      action: jest.fn(),
+      id: 'mute',
+      label: 'Mute Group',
+      placement: 'swipe',
+      type: 'standard',
+    } as const satisfies ChannelActionItem;
+    const archiveItem = {
+      Icon: () => null,
+      action: jest.fn(),
+      id: 'archive',
+      label: 'Archive Group',
+      placement: 'both',
+      type: 'standard',
+    } as const satisfies ChannelActionItem;
+
+    jest.spyOn(ChannelActionsModule, 'useChannelActions').mockReturnValue({
+      archive: jest.fn(),
+      blockUser: jest.fn(),
+      deleteChannel: jest.fn(),
+      leave: jest.fn(),
+      muteChannel,
+      muteUser: jest.fn(),
+      pin: jest.fn(),
+      unarchive: jest.fn(),
+      unblockUser: jest.fn(),
+      unmuteChannel: jest.fn(),
+      unmuteUser: jest.fn(),
+      unpin: jest.fn(),
+    });
+    jest
+      .spyOn(ChannelActionItemsModule, 'useChannelActionItems')
+      .mockReturnValue([muteItem, archiveItem]);
+    jest.spyOn(UseIsChannelMutedModule, 'useIsChannelMuted').mockReturnValue({
+      createdAt: null,
+      expiresAt: null,
+      muted: false,
+    });
+
+    render(
+      <ChannelSwipableWrapper channel={channel} ChannelDetailsBottomSheet={customBottomSheet}>
+        <Text>child</Text>
+      </ChannelSwipableWrapper>,
+    );
+
+    expect(customBottomSheet).toHaveBeenCalledWith(
+      expect.objectContaining({
+        channel,
+        items: [archiveItem],
+      }),
+      undefined,
+    );
+    expect(rightActionsProbe.items.map((item) => item.id)).toEqual(['openSheet', 'mute']);
+
+    act(() => {
+      rightActionsProbe.items[1].action();
+    });
+
+    expect(muteChannel).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/ChannelPreview/hooks/useChannelPreviewData.ts

@@ -23,7 +23,7 @@ export const useChannelPreviewData = (
 ) => {
   const [forceUpdate, setForceUpdate] = useState(0);
   const [lastMessage, setLastMessageInner] = useState<LastMessageType>(
-    () => channel.state.messages[channel.state.messages.length - 1],
+    () => channel.state.latestMessages[channel.state.latestMessages.length - 1],
   );
   const throttledSetLastMessage = useMemo(
     () =>
@@ -42,7 +42,7 @@ export const useChannelPreviewData = (
   const { forceUpdate: contextForceUpdate } = useChannelsContext();
   const channelListForceUpdate = forceUpdateOverride ?? contextForceUpdate;
 
-  const channelLastMessage = channel.lastMessage();
+  const channelLastMessage = channel.state.latestMessages[channel.state.latestMessages.length - 1];
   const channelLastMessageString = `${channelLastMessage?.id}${channelLastMessage?.updated_at}`;
 
   const refreshUnreadCount = useMemo(

package/src/components/ImageGallery/ImageGallery.tsx

@@ -279,12 +279,15 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
     <Animated.View
       accessibilityLabel='Image Gallery'
       pointerEvents={'auto'}
-      style={[StyleSheet.absoluteFillObject, showScreenStyle]}
+      style={[StyleSheet.absoluteFill, showScreenStyle]}
     >
-      <Animated.View style={[StyleSheet.absoluteFillObject, containerBackground]} />
+      <Animated.View style={[StyleSheet.absoluteFill, containerBackground]} />
       <GestureDetector gesture={Gesture.Simultaneous(singleTap, doubleTap, pinch, pan)}>
-        <Animated.View style={StyleSheet.absoluteFillObject}>
-          <Animated.View style={[styles.animatedContainer, pagerStyle, pager]}>
+        <Animated.View style={StyleSheet.absoluteFill}>
+          <Animated.View
+            testID='image-gallery-pager'
+            style={[styles.animatedContainer, pagerStyle, pager]}
+          >
             {assets.map((photo, i) =>
               photo.type === FileTypes.Video ? (
                 <AnimatedGalleryVideo
@@ -399,6 +402,7 @@ export const clamp = (value: number, lowerBound: number, upperBound: number) =>
 const styles = StyleSheet.create({
   animatedContainer: {
     alignItems: 'center',
+    direction: 'ltr',
     flexDirection: 'row',
   },
 });

package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { I18nManager, StyleSheet } from 'react-native';
 
 import type { SharedValue } from 'react-native-reanimated';
 
@@ -79,6 +80,19 @@ const ImageGalleryComponent = (props: ImageGalleryProps & { message: LocalMessag
 };
 
 describe('ImageGallery', () => {
+  const originalIsRTL = I18nManager.isRTL;
+
+  const setRTL = (value: boolean) => {
+    Object.defineProperty(I18nManager, 'isRTL', {
+      configurable: true,
+      value,
+    });
+  };
+
+  afterEach(() => {
+    setRTL(originalIsRTL);
+  });
+
   it('render image gallery component', async () => {
     render(
       <ImageGalleryComponent
@@ -99,4 +113,23 @@ describe('ImageGallery', () => {
       expect(screen.queryAllByLabelText('Image Gallery Video')).toHaveLength(1);
     });
   });
+
+  it('keeps the pager in ltr coordinates when rtl is enabled', async () => {
+    setRTL(true);
+
+    render(
+      <ImageGalleryComponent
+        message={
+          generateMessage({
+            attachments: [generateImageAttachment()],
+          }) as unknown as LocalMessage
+        }
+      />,
+    );
+
+    await waitFor(() => {
+      const pagerStyle = StyleSheet.flatten(screen.getByTestId('image-gallery-pager').props.style);
+      expect(pagerStyle.direction).toBe('ltr');
+    });
+  });
 });

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -1,21 +1,15 @@
 import React, { useMemo, useRef, useState } from 'react';
 import { ActivityIndicator, StyleSheet, Text, View, ViewStyle } from 'react-native';
-import Animated, {
-  Extrapolation,
-  interpolate,
-  SharedValue,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
+import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
 
-import {
-  ImageGalleryProviderProps,
-  useImageGalleryContext,
-} from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import type { ImageGalleryFooterProps, ImageGalleryVideoControlProps } from './types';
+
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../../hooks/useStateStore';
 import { Share as ShareIconDefault } from '../../../icons';
-import { ImageGrid } from '../../../icons/ImageGrid';
+import { ImageGrid } from '../../../icons/gallery';
 import { isFileSystemAvailable, isShareImageAvailable, NativeHandlers } from '../../../native';
 
 import { ImageGalleryState } from '../../../state-store/image-gallery-state-store';
@@ -38,24 +32,10 @@ export type ImageGalleryFooterCustomComponent = ({
   shareMenuOpen: boolean;
 }) => React.ReactElement | null;
 
-export type ImageGalleryVideoControlProps = {
-  attachmentId: string;
-};
-
 export type ImageGalleryVideoControlComponent = ({
   attachmentId,
 }: ImageGalleryVideoControlProps) => React.ReactElement | null;
 
-export type ImageGalleryFooterProps = Pick<
-  ImageGalleryProviderProps,
-  'ImageGalleryVideoControls'
-> & {
-  accessibilityLabel: string;
-  opacity: SharedValue<number>;
-  openGridView: () => void;
-  visible: SharedValue<number>;
-};
-
 const imageGallerySelector = (state: ImageGalleryState) => ({
   asset: state.assets[state.currentIndex],
   currentIndex: state.currentIndex,

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -2,19 +2,16 @@ import React, { useEffect, useMemo, useState } from 'react';
 
 import { StyleSheet, Text, View, ViewStyle } from 'react-native';
 
-import Animated, {
-  Extrapolation,
-  interpolate,
-  SharedValue,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
+import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
 
-import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import type { ImageGalleryHeaderProps } from './types';
+
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../../hooks/useStateStore';
-import { ChevronLeft } from '../../../icons/ChevronLeft';
+import { ChevronLeft } from '../../../icons/chevron-left';
 
 import { ImageGalleryState } from '../../../state-store/image-gallery-state-store';
 import { primitives } from '../../../theme';
@@ -26,11 +23,6 @@ const ReanimatedSafeAreaView = Animated.createAnimatedComponent
   ? Animated.createAnimatedComponent(SafeAreaView)
   : SafeAreaView;
 
-export type ImageGalleryHeaderProps = {
-  opacity: SharedValue<number>;
-  visible: SharedValue<number>;
-};
-
 const imageGallerySelector = (state: ImageGalleryState) => ({
   asset: state.assets[state.currentIndex],
 });

package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx

@@ -1,13 +1,13 @@
 import React, { useCallback, useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { ImageGalleryVideoControlProps } from './ImageGalleryFooter';
+import type { ImageGalleryVideoControlProps } from './types';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
 import { useStateStore } from '../../../hooks/useStateStore';
-import { Pause } from '../../../icons/Pause';
-import { Play } from '../../../icons/Play';
+import { Pause } from '../../../icons/pause-fill';
+import { Play } from '../../../icons/play-fill';
 import { IconProps } from '../../../icons/utils/base';
 import { VideoPlayerState } from '../../../state-store/video-player';
 import { primitives } from '../../../theme';

package/src/components/ImageGallery/components/ImageGrid.tsx

@@ -1,8 +1,10 @@
 import React, { useMemo } from 'react';
 import { Image, Pressable, StyleSheet, View } from 'react-native';
 
+import type { ImageGalleryGridProps } from './types';
+
 import { VideoThumbnail } from '../../../components/Attachment/VideoThumbnail';
-import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../../hooks/useStateStore';
 import { useViewport } from '../../../hooks/useViewport';
@@ -10,8 +12,9 @@ import type {
   ImageGalleryAsset,
   ImageGalleryState,
 } from '../../../state-store/image-gallery-state-store';
+import { primitives } from '../../../theme';
 import { FileTypes } from '../../../types/types';
-import { StreamBottomSheetModalFlatList } from '../../UIComponents';
+import { StreamBottomSheetModalFlatList } from '../../UIComponents/StreamBottomSheetModalFlatList';
 
 export type ImageGalleryGridImageComponent = ({
   item,
@@ -51,11 +54,6 @@ const GridImage = ({ item }: { item: GridImageItem }) => {
 
 const renderItem = ({ item }: { item: GridImageItem }) => <GridImage item={item} />;
 
-export type ImageGalleryGridProps = {
-  closeGridView: () => void;
-  numberOfImageGalleryGridColumns?: number;
-};
-
 const imageGallerySelector = (state: ImageGalleryState) => ({
   assets: state.assets,
 });
@@ -111,8 +109,9 @@ const useStyles = () => {
     return StyleSheet.create({
       contentContainer: {
         flexGrow: 1,
-        ...contentContainer,
         backgroundColor: semantics.backgroundCoreApp,
+        marginTop: primitives.spacingSm,
+        ...contentContainer,
       },
       image: { margin: 1, ...gridImage },
     });

package/src/components/ImageGallery/components/types.ts

@@ -0,0 +1,25 @@
+import type React from 'react';
+
+import type { SharedValue } from 'react-native-reanimated';
+
+export type ImageGalleryVideoControlProps = {
+  attachmentId: string;
+};
+
+export type ImageGalleryHeaderProps = {
+  opacity: SharedValue<number>;
+  visible: SharedValue<number>;
+};
+
+export type ImageGalleryFooterProps = {
+  accessibilityLabel: string;
+  ImageGalleryVideoControls?: React.ComponentType<ImageGalleryVideoControlProps>;
+  opacity: SharedValue<number>;
+  openGridView: () => void;
+  visible: SharedValue<number>;
+};
+
+export type ImageGalleryGridProps = {
+  closeGridView: () => void;
+  numberOfImageGalleryGridColumns?: number;
+};

package/src/components/ImageGallery/hooks/useImageGalleryVideoPlayer.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { VideoPlayerOptions } from '../../../state-store/video-player';
 
 export type UseImageGalleryVideoPlayerProps = VideoPlayerOptions;

package/src/components/Indicators/LoadingIndicator.tsx

@@ -6,7 +6,7 @@ import { useTranslationContext } from '../../contexts/translationContext/Transla
 import { primitives } from '../../theme';
 import { Spinner } from '../UIComponents/Spinner';
 
-type LoadingIndicatorWrapperProps = { text: string };
+type LoadingIndicatorWrapperProps = { text: string | undefined };
 
 const LoadingIndicatorWrapper = ({ text }: LoadingIndicatorWrapperProps) => {
   const styles = useStyles();
@@ -14,9 +14,11 @@ const LoadingIndicatorWrapper = ({ text }: LoadingIndicatorWrapperProps) => {
   return (
     <View style={styles.container}>
       <Spinner height={20} width={20} />
-      <Text style={styles.loadingText} testID='loading'>
-        {text}
-      </Text>
+      {text ? (
+        <Text style={styles.loadingText} testID='loading'>
+          {text}
+        </Text>
+      ) : null}
     </View>
   );
 };
@@ -44,7 +46,7 @@ export const LoadingIndicator = (props: LoadingProps) => {
     case 'message':
       return <LoadingIndicatorWrapper text={t('Loading messages...')} />;
     case 'threads':
-      return <LoadingIndicatorWrapper text={t('Loading threads...')} />;
+      return <LoadingIndicatorWrapper text={undefined} />;
     default:
       return <LoadingIndicatorWrapper text={t('Loading...')} />;
   }

package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {
+  AccessibilityInfo,
   AppState,
   AppStateStatus,
   Dimensions,
@@ -39,7 +40,7 @@ export class KeyboardCompatibleView extends React.Component<
     KeyboardAvoidingViewProps,
     'behavior' | 'enabled' | 'keyboardVerticalOffset'
   > = {
-    behavior: Platform.OS === 'ios' ? 'padding' : 'position',
+    behavior: 'padding',
     enabled: true,
     keyboardVerticalOffset: Platform.OS === 'ios' ? 86.5 : -300, // default MessageComposer height
   };
@@ -62,35 +63,40 @@ export class KeyboardCompatibleView extends React.Component<
     this.viewRef = React.createRef();
   }
 
-  _relativeKeyboardHeight(keyboardFrame: KeyboardMetrics) {
+  async _relativeKeyboardHeight(keyboardFrame: KeyboardMetrics): Promise<number> {
     const frame = this._frame;
-    /**
-     * With iOS 14 & Reduce Motion > Prefer Cross-Fade Transitions enabled, the keyboard position
-     * height is reported differently (0 instead of Y position value) which caused the view to take full height
-     * of the screen.
-     */
-    if (!frame || !keyboardFrame || keyboardFrame.screenY === 0) {
+    if (!frame || !keyboardFrame) {
+      return 0;
+    }
+
+    if (
+      Platform.OS === 'ios' &&
+      keyboardFrame.screenY === 0 &&
+      (await AccessibilityInfo.prefersCrossFadeTransitions())
+    ) {
       return 0;
     }
 
     const keyboardY = keyboardFrame.screenY - (this.props.keyboardVerticalOffset ?? 0);
-    const relativeHeight = frame.y + frame.height - keyboardY;
 
-    /**
-     * When the StatusBar is translucent there is an issue
-     * where the relative keyboard height is returned incorrectly
-     * instead of 0 when closed.
-     */
+    if (this.props.behavior === 'height') {
+      return Math.max(this.state.bottom + frame.y + frame.height - keyboardY, 0);
+    }
+
+    // Calculate the displacement needed for the view such that it
+    // no longer overlaps with the keyboard
+    const relativeHeight = Math.max(frame.y + frame.height - keyboardY, 0);
+
     if (Platform.OS === 'android') {
       const barHeights = Dimensions.get('screen').height - Dimensions.get('window').height;
-      if (relativeHeight <= Math.max(barHeights, StatusBar.currentHeight ?? 0)) {
+      const systemInsetFloor = Math.max(barHeights, StatusBar.currentHeight ?? 0);
+
+      if (relativeHeight <= systemInsetFloor) {
         return 0;
       }
     }
 
-    // Calculate the displacement needed for the view such that it
-    // no longer overlaps with the keyboard
-    return Math.max(relativeHeight, 0);
+    return relativeHeight;
   }
 
   _onKeyboardChange: KeyboardEventListener = (event) => {
@@ -98,7 +104,12 @@ export class KeyboardCompatibleView extends React.Component<
     this._updateBottomIfNecessary();
   };
 
-  _onLayout: (event: LayoutChangeEvent) => void = (event) => {
+  _onKeyboardHide: KeyboardEventListener = () => {
+    this._keyboardEvent = null;
+    this._updateBottomIfNecessary();
+  };
+
+  _onLayout: (event: LayoutChangeEvent) => void = async (event) => {
     event.persist();
 
     const oldFrame = this._frame;
@@ -110,7 +121,7 @@ export class KeyboardCompatibleView extends React.Component<
 
     // update bottom height for the first time or when the height is changed
     if (!oldFrame || oldFrame.height !== this._frame.height) {
-      this._updateBottomIfNecessary();
+      await this._updateBottomIfNecessary();
     }
 
     if (this.props.onLayout) {
@@ -127,14 +138,14 @@ export class KeyboardCompatibleView extends React.Component<
     }
   };
 
-  _updateBottomIfNecessary = () => {
+  _updateBottomIfNecessary = async () => {
     if (this._keyboardEvent == null) {
       this._setBottom(0);
       return;
     }
 
     const { duration, easing, endCoordinates } = this._keyboardEvent;
-    const height = this._relativeKeyboardHeight(endCoordinates);
+    const height = await this._relativeKeyboardHeight(endCoordinates);
 
     if (this._bottom === height) {
       return;
@@ -142,7 +153,8 @@ export class KeyboardCompatibleView extends React.Component<
 
     this._setBottom(height);
 
-    if (duration && easing) {
+    const enabled = this.props.enabled ?? true;
+    if (enabled && duration && easing) {
       LayoutAnimation.configureNext({
         // We have to pass the duration equal to minimal accepted duration defined here: RCTLayoutAnimation.m
         duration: duration > 10 ? duration : 10,
@@ -169,11 +181,12 @@ export class KeyboardCompatibleView extends React.Component<
   setKeyboardListeners = () => {
     if (Platform.OS === 'ios') {
       this._subscriptions = [
-        Keyboard.addListener('keyboardWillChangeFrame', this._onKeyboardChange),
+        Keyboard.addListener('keyboardWillHide', this._onKeyboardHide),
+        Keyboard.addListener('keyboardWillShow', this._onKeyboardChange),
       ];
     } else {
       this._subscriptions = [
-        Keyboard.addListener('keyboardDidHide', this._onKeyboardChange),
+        Keyboard.addListener('keyboardDidHide', this._onKeyboardHide),
         Keyboard.addListener('keyboardDidShow', this._onKeyboardChange),
       ];
     }
@@ -218,6 +231,11 @@ export class KeyboardCompatibleView extends React.Component<
   }
 
   componentDidMount() {
+    if (!Keyboard.isVisible()) {
+      this._keyboardEvent = null;
+      this._setBottom(0);
+    }
+
     this._appStateSubscription = AppState.addEventListener('change', this._handleAppStateChange);
     this.setKeyboardListeners();
   }