useAutoScrollToElement

Description

Hook to autoscroll to an element

Params and Return

Param / Return	Description
returns	ref to the scrollView and the element to scroll to and the function to call the manual scroll

Example

How to use the useAutoScrollToElement component

const [scrollRef, messageRef, scrollToSelectedMessage] = useAutoScrollToElement()

useEffect(() => {
    if (!loading && isTransitionComplete) {
      scrollToSelectedMessage()
    }
}, [loading, isTransitionComplete, scrollToSelectedMessage])

export const renderMessages = (message: SecureMessagingMessageAttributes, messagesById: SecureMessagingMessageMap, thread: Array<number>, messageRef?: Ref<View>): ReactNode => {
  const threadMessages = thread.map((messageID) => messagesById[messageID]).sort((message1, message2) => (message1.sentDate < message2.sentDate ? -1 : 1))
  return threadMessages.map(
    (m) =>
      m &&
      m.messageId && (
        <CollapsibleMessage
          key={m.messageId}
          message={m}
          isInitialMessage={m.messageId === message.messageId}
          collapsibleMessageRef={m.messageId === message.messageId ? messageRef : undefined}
        />
      ),
  )
}

return (
<>
    <VAScrollView {...testIdProps('ViewMessage-page')} scrollViewRef={scrollRef}>
    <Box mt={theme.dimensions.standardMarginBetween} mb={theme.dimensions.condensedMarginBetween}>
        <Box borderColor={'primary'} borderBottomWidth={'default'} p={theme.dimensions.cardPadding}>
        <TextView variant="BitterBoldHeading" accessibilityRole={'header'}>
            {formatSubject(category, subject, t)}
        </TextView>
        </Box>
        {renderMessages(message, messagesById, thread, messageRef)}
    </Box>
    {replyExpired && (
        <Box mt={theme.dimensions.standardMarginBetween} mx={theme.dimensions.gutter} mb={theme.dimensions.contentMarginBottom}>
        <AlertWithHaptics variant={'warning'} header={t('secureMessaging.reply.youCanNoLonger')} description={t('secureMessaging.reply.olderThan45Days')}>
            <Box mt={theme.dimensions.standardMarginBetween}>
            <Button
                label={t('secureMessaging.startNewMessage.new')}
                onPress={onPressCompose}
                a11yHint={t('secureMessaging.startNewMessage.new.a11yHint')}
            />
            </Box>
        </AlertWithHaptics>
        </Box>
    )}
    </VAScrollView>
    {!replyExpired && <ReplyMessageButton messageID={messageID} />}
</>
)