I've got a ScrollView from react-native-gesture-handler inside of an Animated.View from react-native-reanimated. However, the it's just not scrolling and I'm trying to figure out why. Here's my snippet:
{/* This is the drawer that's going to expand */}
<Animated.View style={{width: drawerWidth, height: '100%', flexDirection: 'column', alignItems: 'center', overflow: 'hidden'}}>
<View style={{width: '100%', flexDirection: 'row'}}>
<View style={{padding: 20, backgroundColor: 'lightgrey', flexWrap: 'nowrap', flex: 1, width: '50%', height: 72}}>
<Text style={{flexWrap: 'nowrap', flexShrink: 0, textAlign: 'center', minHeight: 72}} type='Body2'>Block</Text>
</View>
<View style={{padding: 20, backgroundColor: 'lightgrey', flexWrap: 'nowrap', width: '50%', minHeight: 72}}>
<Text style={{flexWrap: 'nowrap', flexShrink: 0, textAlign: 'center'}} type='Body2'>Borders</Text>
</View>
</View>
{/* This is the main content. Needs to be dynamic */}
<ScrollView style={{width: '100%'}}
contentContainerStyle={{flexDirection: 'column', borderWidth: 1, flexGrow: 1}}
>
<Design />
<DesignLibrary
onClose={(pattern: string | undefined) => {
setDesignModalVisible(false)
if (pattern !== undefined) {
props.setDesign(pattern)
}}}
/>
<Text style={{borderWidth: 1}}>Test</Text>
</ScrollView>
</Animated.View>
I've tried turning the Animated.View into a regular View with a fixed width, I've tried switching the scrollView to the one imported by react-native-gesture-handler and react-native, and I've tried giving the ScrollView different heights. I'm expecting the ScrollView to scroll the content inside of it, but it's acting like it's a regular view. I've also tried adding a ton of the Text tags to extend the height of the contained content past the height of the screen, but nothing's been working.
