horizontal scrollview inside react native drawer

Question

I was asked to add an horizontal scrollview inside of a drawer. (Think Instagram stories but in a drawer.) The animation works very inconsistent. The most annoying is swiping to the left, the scrollview often doesn't scroll and the drawer starts the closing animation instead.

The drawer already exists for awhile, so setup issues are not the problem.
Here is my code:

// Drawer.navigator
  const DrawerContent = () => {
    // UI of the drawer
    return <Drawer activeRoute={activeRoute} />;
  };

  return (
    <DrawerNav.Navigator
      drawerContent={DrawerContent}
      drawerStyle={{ width: 320 }}
      initialRouteName="Home"
      drawerContentOptions={{
        someColor: theme.someColor,
      }}
    >
       // other screens
    </DrawerNav.Navigator>

import { ScrollView } from 'react-native';

const Container = styled.View`
  height: 62.5px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
`;


const ThingWrapper = styled(Flex)`
  height: 62.5px;
  align-items: center;
  justify-content: center;
  .lastBubble {
    margin-right: 16px;
  }
`;

...

<Container>
  <ScrollView
     horizontal
     vertical={false}
     directionalLockEnabled
     nestedScrollEnabled
     showsHorizontalScrollIndicator={false}
     pinchGestureEnabled={false}
     contentContainerStyle={{
       zIndex: 9999,
     }}
  >
     {thingsToRender.map((thing, index) => {
       return (
          <ThingWrapper>
            <AnyThing thingId={thing.id} />
          </ThingWrapper>
        );
      })}
  </ScrollView>
</Container>

I think element focus might be the main problem here, but I don't know how to fix this. Any help is greatly appreciated. Thanks!

Answer 1

I fixed it by creating this object and giving it as a param to every screen. As a con this disable the drawer swipe open/close.

const drawerScreenOptions = {
  gestureEnabled: true,
  swipeEnabled: false,
};

// Drawer.navigator
  const DrawerContent = () => {
    // UI of the drawer
    return <Drawer activeRoute={activeRoute} />;
  };

  return (
    <DrawerNav.Navigator
      drawerContent={DrawerContent}
      drawerStyle={{ width: 320 }}
      initialRouteName="Home"
    >
       // !! Give options to all screens
        <DrawerNav.Screen
          name="screenX"
          component={ScreenXNavigator}
          options={drawerScreenOptions}
        />
    </DrawerNav.Navigator>