react-native-gifted-chat 3.0.0-alpha.1 → 3.0.1

package/src/Composer.tsx

@@ -1,120 +1,100 @@
-import React, { useCallback, useRef } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import {
   Platform,
   StyleSheet,
   TextInput,
+  TextInputChangeEvent,
+  TextInputContentSizeChangeEvent,
   TextInputProps,
-  NativeSyntheticEvent,
-  TextInputContentSizeChangeEventData,
   useColorScheme,
+  View,
 } from 'react-native'
 import { Color } from './Color'
-import { MIN_COMPOSER_HEIGHT } from './Constant'
-import stylesCommon from './styles'
+import stylesCommon, { getColorSchemeStyle } from './styles'
 
 export interface ComposerProps {
   composerHeight?: number
   text?: string
   textInputProps?: Partial<TextInputProps>
-  onInputSizeChanged?(layout: { width: number, height: number }): void
 }
 
 export function Composer ({
-  composerHeight = MIN_COMPOSER_HEIGHT,
-  onInputSizeChanged,
   text = '',
   textInputProps,
 }: ComposerProps): React.ReactElement {
-  const dimensionsRef = useRef<{ width: number, height: number }>(null)
   const colorScheme = useColorScheme()
   const isDark = colorScheme === 'dark'
 
-  const determineInputSizeChange = useCallback(
-    (dimensions: { width: number, height: number }) => {
-      // Support earlier versions of React Native on Android.
-      if (!dimensions)
-        return
+  const placeholder = textInputProps?.placeholder ?? 'Type a message...'
+
+  const minHeight = useMemo(() =>
+    Platform.select({
+      web: styles.textInput.lineHeight + styles.textInput.paddingTop + styles.textInput.paddingBottom,
+      default: undefined,
+    })
+  , [])
+
+  const [height, setHeight] = useState<number | undefined>(minHeight)
 
-      if (
-        !dimensionsRef.current ||
-        (dimensionsRef.current &&
-          (dimensionsRef.current.width !== dimensions.width ||
-            dimensionsRef.current.height !== dimensions.height))
-      ) {
-        dimensionsRef.current = dimensions
-        onInputSizeChanged?.(dimensions)
+  const handleContentSizeChange = useMemo(() => {
+    if (Platform.OS === 'web')
+      return (e: TextInputContentSizeChangeEvent) => {
+        const contentHeight = e.nativeEvent.contentSize.height
+        setHeight(Math.max(minHeight ?? 0, contentHeight))
       }
-    },
-    [onInputSizeChanged]
-  )
 
-  const handleContentSizeChange = useCallback(
-    ({
-      nativeEvent: { contentSize },
-    }: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) =>
-      determineInputSizeChange(contentSize),
-    [determineInputSizeChange]
-  )
+    return undefined
+  }, [minHeight])
 
-  const placeholder = textInputProps?.placeholder ?? 'Type a message...'
+  const handleChange = useCallback((event: TextInputChangeEvent) => {
+    if (Platform.OS === 'web')
+      // Reset height to 0 to get the correct scrollHeight
+      // @ts-expect-error - web-specific code
+      window.requestAnimationFrame(() => {
+        // @ts-expect-error - web-specific code
+        event.nativeEvent.target.style.height = '0px'
+        // @ts-expect-error - web-specific code
+        event.nativeEvent.target.style.height = `${event.nativeEvent.target.scrollHeight}px`
+      })
+  }, [])
 
   return (
-    <TextInput
-      testID={placeholder}
-      accessible
-      accessibilityLabel={placeholder}
-      placeholderTextColor={textInputProps?.placeholderTextColor ?? (isDark ? '#888' : Color.defaultColor)}
-      onContentSizeChange={handleContentSizeChange}
-      value={text}
-      enablesReturnKeyAutomatically
-      underlineColorAndroid='transparent'
-      keyboardAppearance={isDark ? 'dark' : 'default'}
-      multiline
-      placeholder={placeholder}
-      {...textInputProps}
-      style={[
-        stylesCommon.fill,
-        styles.textInput,
-        styles[`textInput_${colorScheme}`],
-        textInputProps?.style,
-        {
-          height: composerHeight,
-          ...Platform.select({
-            web: {
-              outlineWidth: 0,
-              outlineColor: 'transparent',
-              outlineOffset: 0,
-            },
-          }),
-        },
-      ]}
-    />
+    <View style={stylesCommon.fill}>
+      <TextInput
+        testID={placeholder}
+        accessible
+        accessibilityLabel={placeholder}
+        placeholderTextColor={textInputProps?.placeholderTextColor ?? (isDark ? '#888' : Color.defaultColor)}
+        value={text}
+        enablesReturnKeyAutomatically
+        underlineColorAndroid='transparent'
+        keyboardAppearance={isDark ? 'dark' : 'default'}
+        multiline
+        placeholder={placeholder}
+        onContentSizeChange={handleContentSizeChange}
+        onChange={handleChange}
+        {...textInputProps}
+        style={[getColorSchemeStyle(styles, 'textInput', colorScheme), stylesWeb.textInput, { height }, textInputProps?.style]}
+      />
+    </View>
   )
 }
 
 const styles = StyleSheet.create({
   textInput: {
-    marginLeft: 10,
     fontSize: 16,
     lineHeight: 22,
-    ...Platform.select({
-      web: {
-        paddingTop: 6,
-        paddingLeft: 4,
-      },
-    }),
-    marginTop: Platform.select({
-      ios: 6,
-      android: 0,
-      web: 6,
-    }),
-    marginBottom: Platform.select({
-      ios: 5,
-      android: 3,
-      web: 4,
-    }),
+    paddingTop: 8,
+    paddingBottom: 10,
   },
   textInput_dark: {
     color: '#fff',
   },
 })
+
+const stylesWeb = StyleSheet.create({
+  textInput: {
+    /* @ts-expect-error - web-specific styles */
+    outlineStyle: 'none',
+  },
+})

package/src/Constant.ts

@@ -1,12 +1,3 @@
-import { Platform } from 'react-native'
-
-export const MIN_COMPOSER_HEIGHT = Platform.select({
-  ios: 33,
-  android: 41,
-  web: 34,
-  windows: 34,
-})
-export const MAX_COMPOSER_HEIGHT = 200
 export const DATE_FORMAT = 'D MMMM'
 export const TIME_FORMAT = 'LT'
 

package/src/GiftedChat/index.tsx

@@ -21,10 +21,10 @@ import localizedFormat from 'dayjs/plugin/localizedFormat'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import { KeyboardAvoidingView, KeyboardProvider } from 'react-native-keyboard-controller'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
-import { MAX_COMPOSER_HEIGHT, MIN_COMPOSER_HEIGHT, TEST_ID } from '../Constant'
+import { TEST_ID } from '../Constant'
 import { GiftedChatContext } from '../GiftedChatContext'
 import { InputToolbar } from '../InputToolbar'
-import { MessageContainer, AnimatedList } from '../MessageContainer'
+import { MessagesContainer, AnimatedList } from '../MessagesContainer'
 import { IMessage } from '../Models'
 import stylesCommon from '../styles'
 import { renderComponentOrElement } from '../utils'
@@ -55,15 +55,13 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     renderChatFooter,
     renderInputToolbar,
     isInverted = true,
-    minComposerHeight = MIN_COMPOSER_HEIGHT,
-    maxComposerHeight = MAX_COMPOSER_HEIGHT,
   } = props
 
   const actionSheetRef = useRef<ActionSheetProviderRef>(null)
 
-  const messageContainerRef = useMemo(
-    () => props.messageContainerRef || createRef<AnimatedList<TMessage>>(),
-    [props.messageContainerRef]
+  const messagesContainerRef = useMemo(
+    () => props.messagesContainerRef || createRef<AnimatedList<TMessage>>(),
+    [props.messagesContainerRef]
   ) as RefObject<AnimatedList<TMessage>>
 
   const textInputRef = useMemo(
@@ -72,9 +70,6 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
   )
 
   const [isInitialized, setIsInitialized] = useState<boolean>(false)
-  const [composerHeight, setComposerHeight] = useState<number>(
-    minComposerHeight!
-  )
   const [text, setText] = useState<string | undefined>(() => props.text || '')
 
   const getTextFromProp = useCallback(
@@ -89,20 +84,20 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 
   const scrollToBottom = useCallback(
     (isAnimated = true) => {
-      if (!messageContainerRef?.current)
+      if (!messagesContainerRef?.current)
         return
 
       if (isInverted) {
-        messageContainerRef.current.scrollToOffset({
+        messagesContainerRef.current.scrollToOffset({
           offset: 0,
           animated: isAnimated,
         })
         return
       }
 
-      messageContainerRef.current.scrollToEnd({ animated: isAnimated })
+      messagesContainerRef.current.scrollToEnd({ animated: isAnimated })
     },
-    [isInverted, messageContainerRef]
+    [isInverted, messagesContainerRef]
   )
 
   const renderMessages = useMemo(() => {
@@ -113,11 +108,11 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 
     return (
       <View style={[stylesCommon.fill, messagesContainerStyle]}>
-        <MessageContainer<TMessage>
+        <MessagesContainer<TMessage>
           {...messagesContainerProps}
           isInverted={isInverted}
           messages={messages}
-          forwardRef={messageContainerRef}
+          forwardRef={messagesContainerRef}
           isTyping={isTyping}
         />
         {renderComponentOrElement(renderChatFooter, {})}
@@ -129,7 +124,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     messages,
     props,
     isInverted,
-    messageContainerRef,
+    messagesContainerRef,
     renderChatFooter,
   ])
 
@@ -142,10 +137,8 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 
     notifyInputTextReset()
 
-    setComposerHeight(minComposerHeight!)
     setText(getTextFromProp(''))
   }, [
-    minComposerHeight,
     getTextFromProp,
     textInputRef,
     notifyInputTextReset,
@@ -175,18 +168,6 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     [messageIdGenerator, onSend, user, resetInputToolbar, scrollToBottom]
   )
 
-  const onInputSizeChanged = useCallback(
-    (size: { height: number }) => {
-      const newComposerHeight = Math.max(
-        minComposerHeight!,
-        Math.min(maxComposerHeight!, size.height)
-      )
-
-      setComposerHeight(newComposerHeight)
-    },
-    [maxComposerHeight, minComposerHeight]
-  )
-
   const _onChangeText = useCallback(
     (text: string) => {
       props.textInputProps?.onChangeText?.(text)
@@ -211,10 +192,9 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       notifyInputTextReset()
 
       setIsInitialized(true)
-      setComposerHeight(minComposerHeight!)
       setText(getTextFromProp(initialText))
     },
-    [isInitialized, initialText, minComposerHeight, notifyInputTextReset, getTextFromProp]
+    [isInitialized, initialText, notifyInputTextReset, getTextFromProp]
   )
 
   const inputToolbarFragment = useMemo(() => {
@@ -224,9 +204,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     const inputToolbarProps = {
       ...props,
       text: getTextFromProp(text!),
-      composerHeight: Math.max(minComposerHeight!, composerHeight),
       onSend: _onSend,
-      onInputSizeChanged,
       textInputProps: {
         ...textInputProps,
         onChangeText: _onChangeText,
@@ -242,12 +220,9 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     isInitialized,
     _onSend,
     getTextFromProp,
-    minComposerHeight,
-    onInputSizeChanged,
     props,
     text,
     renderInputToolbar,
-    composerHeight,
     textInputRef,
     textInputProps,
     _onChangeText,

package/src/GiftedChat/types.ts

@@ -14,8 +14,8 @@ import { AvatarProps } from '../Avatar'
 import { BubbleProps } from '../Bubble'
 import { ComposerProps } from '../Composer'
 import { InputToolbarProps } from '../InputToolbar'
-import { AnimatedList, MessageContainerProps } from '../MessageContainer'
 import { MessageImageProps } from '../MessageImage'
+import { AnimatedList, MessagesContainerProps } from '../MessagesContainer'
 import { MessageTextProps } from '../MessageText'
 import {
   IMessage,
@@ -29,9 +29,9 @@ import { SendProps } from '../Send'
 import { SystemMessageProps } from '../SystemMessage'
 import { TimeProps } from '../Time'
 
-export interface GiftedChatProps<TMessage extends IMessage> extends Partial<MessageContainerProps<TMessage>> {
-  /* Message container ref */
-  messageContainerRef?: RefObject<AnimatedList<TMessage>>
+export interface GiftedChatProps<TMessage extends IMessage> extends Partial<MessagesContainerProps<TMessage>> {
+  /* Messages container ref */
+  messagesContainerRef?: RefObject<AnimatedList<TMessage>>
   /* text input ref */
   textInputRef?: RefObject<TextInput>
   /* Controls whether or not to show user.name property in the message bubble */
@@ -115,13 +115,13 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   renderMessageImage?: (props: MessageImageProps<TMessage>) => React.ReactNode
   /* Custom message video */
   renderMessageVideo?: (props: MessageVideoProps<TMessage>) => React.ReactNode
-  /* Custom message video */
+  /* Custom message audio */
   renderMessageAudio?: (props: MessageAudioProps<TMessage>) => React.ReactNode
   /* Custom view inside the bubble */
   renderCustomView?: (props: BubbleProps<TMessage>) => React.ReactNode
   /* Custom time inside a message */
   renderTime?: (props: TimeProps<TMessage>) => React.ReactNode
-  /* Custom component to render below the MessageContainer (separate from the ListView) */
+  /* Custom component to render below the MessagesContainer */
   renderChatFooter?: () => React.ReactNode
   /* Custom message composer container. Can be a component, element, render function, or null */
   renderInputToolbar?: React.ComponentType<InputToolbarProps<TMessage>> | React.ReactElement | ((props: InputToolbarProps<TMessage>) => React.ReactNode) | null
@@ -143,4 +143,6 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   renderQuickReplySend?: () => React.ReactNode
   keyboardProviderProps?: React.ComponentProps<typeof KeyboardProvider>
   keyboardAvoidingViewProps?: KeyboardAvoidingViewProps
+  /** Enable animated day label that appears on scroll; default is true */
+  isDayAnimationEnabled?: boolean
 }

package/src/InputToolbar.tsx

@@ -6,6 +6,7 @@ import { Color } from './Color'
 import { Composer, ComposerProps } from './Composer'
 import { IMessage } from './Models'
 import { Send, SendProps } from './Send'
+import { getColorSchemeStyle } from './styles'
 import { renderComponentOrElement } from './utils'
 
 export interface InputToolbarProps<TMessage extends IMessage> {
@@ -13,7 +14,6 @@ export interface InputToolbarProps<TMessage extends IMessage> {
   actionSheetOptionTintColor?: string
   containerStyle?: StyleProp<ViewStyle>
   primaryStyle?: StyleProp<ViewStyle>
-  accessoryStyle?: StyleProp<ViewStyle>
   renderAccessory?: (props: InputToolbarProps<TMessage>) => React.ReactNode
   renderActions?: (props: ActionsProps) => React.ReactNode
   renderSend?: (props: SendProps<TMessage>) => React.ReactNode
@@ -88,16 +88,14 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
     if (!renderAccessory)
       return null
 
-    return (
-      <View style={[styles.accessory, props.accessoryStyle]}>
-        {renderComponentOrElement(renderAccessory, props)}
-      </View>
-    )
+    return renderComponentOrElement(renderAccessory, props)
   }, [renderAccessory, props])
 
   return (
-    <View style={[styles.container, colorScheme === 'dark' && styles.container_dark, containerStyle]}>
-      <View style={[styles.primary, props.primaryStyle]}>
+    <View
+      style={[getColorSchemeStyle(styles, 'container', colorScheme), containerStyle]}
+    >
+      <View style={[getColorSchemeStyle(styles, 'primary', colorScheme), props.primaryStyle]}>
         {actionsFragment}
         {composerFragment}
         {sendFragment}
@@ -121,7 +119,4 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'flex-end',
   },
-  accessory: {
-    height: 44,
-  },
 })

package/src/MessageImage.tsx

@@ -19,14 +19,91 @@ import Animated, {
   useAnimatedStyle,
   useSharedValue,
   withTiming,
-  runOnJS,
   Easing,
+  runOnJS,
 } from 'react-native-reanimated'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
 import Zoom from 'react-native-zoom-reanimated'
 import { IMessage } from './Models'
 import commonStyles from './styles'
 
+interface ModalContentProps {
+  isVisible: boolean
+  imageSource: ImageURISource
+  modalImageDimensions: { width: number, height: number } | undefined
+  imageProps?: Partial<ImageProps>
+  onClose: () => void
+}
+
+function ModalContent({ isVisible, imageSource, modalImageDimensions, imageProps, onClose }: ModalContentProps) {
+  const insets = useSafeAreaInsets()
+
+  // Animation values
+  const modalOpacity = useSharedValue(0)
+  const modalScale = useSharedValue(0.9)
+  const modalBorderRadius = useSharedValue(40)
+
+  const handleModalClose = useCallback(() => {
+    modalOpacity.value = withTiming(0, { duration: 200, easing: Easing.in(Easing.ease) })
+    modalScale.value = withTiming(0.9, { duration: 200, easing: Easing.in(Easing.ease) }, () => {
+      runOnJS(onClose)()
+    })
+    modalBorderRadius.value = withTiming(40, { duration: 200, easing: Easing.in(Easing.ease) })
+  }, [onClose, modalOpacity, modalScale, modalBorderRadius])
+
+  // Animate on visibility change
+  useEffect(() => {
+    if (isVisible) {
+      modalOpacity.value = withTiming(1, { duration: 300, easing: Easing.out(Easing.ease) })
+      modalScale.value = withTiming(1, { duration: 300, easing: Easing.out(Easing.ease) })
+      modalBorderRadius.value = withTiming(0, { duration: 300, easing: Easing.out(Easing.ease) })
+    }
+  }, [isVisible, modalOpacity, modalScale, modalBorderRadius])
+
+  const modalAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: modalOpacity.value,
+    transform: [{ scale: modalScale.value }],
+  }), [modalOpacity, modalScale])
+
+  const modalBorderRadiusStyle = useAnimatedStyle(() => ({
+    borderRadius: modalBorderRadius.value,
+  }), [modalBorderRadius])
+
+  return (
+    <>
+      <StatusBar animated barStyle='dark-content' />
+      <Animated.View style={[styles.modalOverlay, modalAnimatedStyle, modalBorderRadiusStyle]}>
+        <GestureHandlerRootView style={commonStyles.fill}>
+          <Animated.View style={[commonStyles.fill, styles.modalContent, modalBorderRadiusStyle, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
+
+            {/* close button */}
+            <View style={styles.closeButtonContainer}>
+              <BaseButton onPress={handleModalClose}>
+                <View style={styles.closeButtonContent}>
+                  <Text style={styles.closeButtonIcon}>
+                    {'X'}
+                  </Text>
+                </View>
+              </BaseButton>
+            </View>
+
+            <View style={[commonStyles.fill, commonStyles.centerItems]}>
+              <Zoom>
+                <Image
+                  style={modalImageDimensions}
+                  source={imageSource}
+                  resizeMode='contain'
+                  {...imageProps}
+                />
+              </Zoom>
+            </View>
+          </Animated.View>
+        </GestureHandlerRootView>
+      </Animated.View>
+    </>
+  )
+}
+
 export interface MessageImageProps<TMessage extends IMessage> {
   currentMessage: TMessage
   containerStyle?: StyleProp<ViewStyle>
@@ -46,12 +123,6 @@ export function MessageImage<TMessage extends IMessage = IMessage> ({
   const [imageDimensions, setImageDimensions] = useState<{ width: number, height: number }>()
   const windowDimensions = useWindowDimensions()
 
-  const insets = useSafeAreaInsets()
-
-  // Animation values
-  const modalOpacity = useSharedValue(0)
-  const modalScale = useSharedValue(0.9)
-
   const imageSource = useMemo(() => ({
     ...imageSourceProps,
     uri: currentMessage?.image,
@@ -70,23 +141,15 @@ export function MessageImage<TMessage extends IMessage = IMessage> ({
 
     setIsModalVisible(true)
 
-    // Animate modal entrance
-    modalOpacity.value = withTiming(1, { duration: 300, easing: Easing.out(Easing.ease) })
-    modalScale.value = withTiming(1, { duration: 300, easing: Easing.out(Easing.ease) })
-
     if (isImageSourceChanged.current || !imageDimensions)
       Image.getSize(imageSource.uri, (width, height) => {
         setImageDimensions({ width, height })
       })
-  }, [imageSource.uri, imageDimensions, modalOpacity, modalScale])
+  }, [imageSource.uri, imageDimensions])
 
   const handleModalClose = useCallback(() => {
-    // Animate modal exit
-    modalOpacity.value = withTiming(0, { duration: 200, easing: Easing.in(Easing.ease) })
-    modalScale.value = withTiming(0.9, { duration: 200, easing: Easing.in(Easing.ease) }, () => {
-      runOnJS(setIsModalVisible)(false)
-    })
-  }, [modalOpacity, modalScale])
+    setIsModalVisible(false)
+  }, [])
 
   const handleImageLayout = useCallback((e: LayoutChangeEvent) => {
     setImageDimensions({
@@ -115,11 +178,6 @@ export function MessageImage<TMessage extends IMessage = IMessage> ({
     }
   }, [imageDimensions, windowDimensions.height, windowDimensions.width])
 
-  const modalAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: modalOpacity.value,
-    transform: [{ scale: modalScale.value }],
-  }), [modalOpacity, modalScale])
-
   useEffect(() => {
     isImageSourceChanged.current = true
   }, [imageSource.uri])
@@ -139,39 +197,17 @@ export function MessageImage<TMessage extends IMessage = IMessage> ({
         />
       </TouchableOpacity>
 
-      {isModalVisible && (
-        <OverKeyboardView visible={isModalVisible}>
-          <StatusBar animated barStyle='dark-content' />
-          <Animated.View style={[styles.modalOverlay, modalAnimatedStyle]}>
-            <GestureHandlerRootView style={commonStyles.fill}>
-              <View style={[commonStyles.fill, styles.modalContent, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
-
-                {/* close button */}
-                <View style={styles.closeButtonContainer}>
-                  <BaseButton onPress={handleModalClose}>
-                    <View style={styles.closeButtonContent}>
-                      <Text style={styles.closeButtonIcon}>
-                        {'X'}
-                      </Text>
-                    </View>
-                  </BaseButton>
-                </View>
-
-                <View style={[commonStyles.fill, commonStyles.centerItems]}>
-                  <Zoom>
-                    <Image
-                      style={modalImageDimensions}
-                      source={imageSource}
-                      resizeMode='contain'
-                      {...imageProps}
-                    />
-                  </Zoom>
-                </View>
-              </View>
-            </GestureHandlerRootView>
-          </Animated.View>
-        </OverKeyboardView>
-      )}
+      <OverKeyboardView visible={isModalVisible}>
+        <SafeAreaProvider>
+          <ModalContent
+            isVisible={isModalVisible}
+            imageSource={imageSource}
+            modalImageDimensions={modalImageDimensions}
+            imageProps={imageProps}
+            onClose={handleModalClose}
+          />
+        </SafeAreaProvider>
+      </OverKeyboardView>
     </View>
   )
 }
@@ -193,6 +229,7 @@ const styles = StyleSheet.create({
   },
   modalContent: {
     backgroundColor: '#000',
+    overflow: 'hidden',
   },
   modalImageContainer: {
     width: '100%',