horizontal scrollview inside react native drawer - react-native

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>