CODEWITHSUNDEEP
react-nativereact-native-reanimatedreact-native-gesture-handler
sakarzac000
sakarzac000

Reputation: 1

ScrollView from react-native-gesture-handler not working inside of Animated.View from react-native-reanimated

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.

Upvotes: 0

Views: 162

Answers (1)

sakarzac000
sakarzac000

Reputation: 1

Turns out, for whatever reason, the react-native-gesture-handler wasn't working. Replacing it with the react-native implementation of ScrollView and tweaking the styling got it to work.

Upvotes: 0

Related Questions