The ScrollView component has an accessibility issue as it prevents the user navigating to the back button

Question

We use react-navigation to open a modal with a back button. There is an accessibility problem with this setup as users can't "swipe" left from the title (within the ScrollView) to the back button. After a lot of investigation we pinned it down to the ScrollView component. If we change it to a regular View then there is no problem at all. However obviously this is not desired a the user should be able to scroll.

This is the problematic code.

import React, { FC, memo } from 'react'
import Animated, { useAnimatedScrollHandler } from 'react-native-reanimated'
import { useSafeAreaInsets } from 'react-native-safe-area-context'

import { useThemedStyle } from '@mylib/ui'

import { stylesCreator } from './styles'
import type { AnimatedScrollViewProps } from './types'

const AnimatedScrollViewComponent: FC<AnimatedScrollViewProps> = ({
  scrollOffset,
  children
}) => {
  const scrollHandler = useAnimatedScrollHandler(event => {
    scrollOffset.value = event.contentOffset.y
  })
  const { bottom: bottomInset } = useSafeAreaInsets()

  const styles = useThemedStyle(stylesCreator, bottomInset)

  return (
    <Animated.ScrollView
      style={styles.scrollContainer}
      contentContainerStyle={styles.contentContainer}
      scrollEventThrottle={50}
      onScroll={scrollHandler}
      overScrollMode="never"
    >
      {children}
    </Animated.ScrollView>
  )
}

export const AnimatedScrollView = memo(AnimatedScrollViewComponent)

We are kind of out options what to investigate next. So I'm hoping anyone has experience with this and can help us out in some way.