add smooth fade-in/out of scroll to bottom element

Author: kesha-antonov

README.md

@@ -417,7 +417,7 @@ interface QuickReplies {
 - **`minComposerHeight`** _(Object)_ - Custom min-height of the composer.
 - **`maxComposerHeight`** _(Object)_ - Custom max height of the composer.
 
-* **`scrollToBottom`** _(Bool)_ - Enables the scroll to bottom Component (Default is false)
+* **`isScrollToBottomEnabled`** _(Bool)_ - Enables the scroll to bottom Component (Default is false)
 * **`scrollToBottomComponent`** _(Function)_ - Custom Scroll To Bottom Component container
 * **`scrollToBottomOffset`** _(Integer)_ - Custom Height Offset upon which to begin showing Scroll To Bottom Component (Default is 200)
 * **`scrollToBottomStyle`** _(Object)_ - Custom style for Bottom Component container

example/App.tsx

@@ -275,7 +275,7 @@ const App = () => {
           isLoadingEarlier={state.isLoadingEarlier}
           parsePatterns={parsePatterns}
           user={user}
-          scrollToBottom
+          isScrollToBottomEnabled
           onPressAvatar={onPressAvatar}
           onLongPressAvatar={onLongPressAvatar}
           onLongPress={handleLongPress}

example/example-gifted-chat/src/Chats.js

@@ -36,7 +36,7 @@ const Chats = () => {
       }}
       alignTop
       alwaysShowSend
-      scrollToBottom
+      isScrollToBottomEnabled
       // showUserAvatar
       renderAvatarOnTop
       renderUsernameOnMessage

src/GiftedChat/index.tsx

@@ -420,8 +420,6 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     ]
   )
 
-  console.log('!')
-
   return (
     <GiftedChatContext.Provider value={contextValues}>
       <ActionSheetProvider ref={actionSheetRef}>

src/GiftedChat/types.ts

@@ -33,7 +33,7 @@ import { TimeProps } from '../Time'
 import MessageContainer, { AnimatedList, ListViewProps } from '../MessageContainer'
 import Bubble from '../Bubble'
 
-export interface GiftedChatProps<TMessage extends IMessage = IMessage> extends Partial<Omit<typeof MessageContainer<TMessage>, 'scrollToBottom'>> {
+export interface GiftedChatProps<TMessage extends IMessage = IMessage> extends Partial<Omit<typeof MessageContainer<TMessage>, 'isScrollToBottomEnabled'>> {
   /* Message container ref */
   messageContainerRef?: RefObject<AnimatedList>
   /* text input ref */
@@ -50,8 +50,8 @@ export interface GiftedChatProps<TMessage extends IMessage = IMessage> extends P
   text?: string
   /* Controls whether or not the message bubbles appear at the top of the chat */
   alignTop?: boolean
-  /* enables the scrollToBottom Component */
-  scrollToBottom?: boolean
+  /* enables the isScrollToBottomEnabled Component */
+  isScrollToBottomEnabled?: boolean
   /* Scroll to bottom wrapper style */
   scrollToBottomStyle?: StyleProp<ViewStyle>
   initialText?: string

src/MessageContainer/index.tsx

@@ -7,7 +7,7 @@ import {
   LayoutChangeEvent,
 } from 'react-native'
 import { FlashList, ListRenderItemInfo } from '@shopify/flash-list'
-import Animated, { runOnJS, useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated'
+import Animated, { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
 import { ReanimatedScrollEvent } from 'react-native-reanimated/lib/typescript/hook/commonTypes'
 import DayAnimated from './components/DayAnimated'
 import Item from './components/Item'
@@ -38,7 +38,7 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     listViewProps,
     invertibleScrollViewProps,
     extraData = null,
-    scrollToBottom = false,
+    isScrollToBottomEnabled = false,
     scrollToBottomOffset = 200,
     alignTop = false,
     scrollToBottomStyle,
@@ -52,7 +52,12 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     scrollToBottomComponent: scrollToBottomComponentProp,
   } = props
 
+  const scrollToBottomOpacity = useSharedValue(0)
   const [isScrollToBottomVisible, setIsScrollToBottomVisible] = useState(false)
+  const scrollToBottomStyleAnim = useAnimatedStyle(() => ({
+    opacity: scrollToBottomOpacity.value,
+  }), [scrollToBottomOpacity])
+
   const [hasScrolled, setHasScrolled] = useState(false)
 
   const daysPositions = useSharedValue<DaysPositions>({})
@@ -105,21 +110,33 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
       layoutMeasurement: { height: layoutMeasurementHeight },
     } = event
 
-    if (inverted)
-      if (contentOffsetY > scrollToBottomOffset!)
+    const duration = 250
+
+    if (inverted) {
+      if (contentOffsetY > scrollToBottomOffset!) {
         setIsScrollToBottomVisible(true)
-      else
-        setIsScrollToBottomVisible(false)
-    else if (
+        scrollToBottomOpacity.value = withTiming(1, { duration })
+      } else {
+        scrollToBottomOpacity.value = withTiming(0, { duration }, isFinished => {
+          if (isFinished)
+            runOnJS(setIsScrollToBottomVisible)(false)
+        })
+      }
+    } else if (
       contentOffsetY < scrollToBottomOffset! &&
       contentSizeHeight - layoutMeasurementHeight > scrollToBottomOffset!
-    )
+    ) {
       setIsScrollToBottomVisible(true)
-    else
-      setIsScrollToBottomVisible(false)
+      scrollToBottomOpacity.value = withTiming(1, { duration })
+    } else {
+      scrollToBottomOpacity.value = withTiming(0, { duration }, isFinished => {
+        if (isFinished)
+          runOnJS(setIsScrollToBottomVisible)(false)
+      })
+    }
 
     setHasScrolled(true)
-  }, [handleOnScrollProp, inverted, scrollToBottomOffset])
+  }, [handleOnScrollProp, inverted, scrollToBottomOffset, scrollToBottomOpacity])
 
   const handleLayoutDayWrapper = useCallback((ref: unknown, id: string | number, createdAt: number) => {
     setTimeout(() => { // do not delete "setTimeout". It's necessary for get correct layout.
@@ -219,17 +236,27 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
   }, [scrollToBottomComponentProp])
 
   const renderScrollToBottomWrapper = useCallback(() => {
+    if (!isScrollToBottomVisible)
+      return null
+
     return (
-      <View style={[stylesCommon.centerItems, styles.scrollToBottomStyle, scrollToBottomStyle]}>
+      <Animated.View
+        style={[
+          stylesCommon.centerItems,
+          styles.scrollToBottomStyle,
+          scrollToBottomStyle,
+          scrollToBottomStyleAnim,
+        ]}
+      >
         <TouchableOpacity
           onPress={() => doScrollToBottom()}
           hitSlop={{ top: 5, left: 5, right: 5, bottom: 5 }}
         >
           {renderScrollBottomComponent()}
         </TouchableOpacity>
-      </View>
+      </Animated.View>
     )
-  }, [scrollToBottomStyle, renderScrollBottomComponent, doScrollToBottom])
+  }, [scrollToBottomStyle, renderScrollBottomComponent, doScrollToBottom, scrollToBottomStyleAnim, isScrollToBottomVisible])
 
   const onLayoutList = useCallback((event: LayoutChangeEvent) => {
     listHeight.value = event.nativeEvent.layout.height
@@ -299,7 +326,7 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
         {...listViewProps}
         onLayout={onLayoutList}
       />
-      {isScrollToBottomVisible && scrollToBottom
+      {isScrollToBottomEnabled
         ? renderScrollToBottomWrapper()
         : null}
       <DayAnimated

src/MessageContainer/types.ts

@@ -27,7 +27,7 @@ export interface MessageContainerProps<TMessage extends IMessage> {
   inverted?: boolean
   loadEarlier?: boolean
   alignTop?: boolean
-  scrollToBottom?: boolean
+  isScrollToBottomEnabled?: boolean
   scrollToBottomStyle?: StyleProp<ViewStyle>
   invertibleScrollViewProps?: object
   extraData?: object