Flatlist inside ParallaxScroll is not working

seonoh commented 3 years ago

Issue details

Steps to reproduce

I hope inset Flatlist in ParallaxScroll renderParallaxBackground but, that is not scroll. how to solve this problem?

Please specify which versions of the RN and ParallaxScroll

react-native 0.61.5
react-native-parallax-scroll 1.8.0

Affected platforms

Both

Screenshots / Screencast / Code Snippets (Optional)

<ParallaxScroll
        // scrollableComponent={()=>}
        // renderHeader={(animatedValue : any) => <Header animatedValue={animatedValue} />}
        headerHeight={50}
        isHeaderFixed={false}
        parallaxHeight={250}
        renderParallaxBackground={(value: any) => (
          <FlatList
            scrollEnabled={true}
            bounces={false}
            horizontal={true}
            data={this.state.imageList}
            renderItem={this.renderImageItem}
            keyExtractor={(item, index) => index.toString()}
            decelerationRate={'fast'}
            style={{
              width: Dimensions.get('screen').width,
            }}
            snapToAlignment={'start'}
            directionalLockEnabled={false}
            disableIntervalMomentum={true}
            snapToEnd={false}
            snapToInterval={Dimensions.get('screen').width}
            onViewableItemsChanged={this._onViewableItemsChanged}
            viewabilityConfig={this._viewabilityConfig}
            onScroll={Animated.event(
              [
                {
                  nativeEvent: {contentOffset: {y: this.state.imageAnimationValue}},
                },
              ],
              {useNativeDriver: false}, // <-- Add this
            )}
          />
        )}
        // renderParallaxForeground={({animatedValue}) => <Foreground animatedValue={animatedValue} />}
        parallaxBackgroundScrollSpeed={5}
        parallaxForegroundScrollSpeed={2.5}></ParallaxScroll>

Flatlist inside ParallaxScroll is not working how to solve this problem?

ebarahona commented 3 years ago

Have you tried creating a standalone component/view for your flatlist and loading that component? Test the flatlist without the parallaxscroll then apply the scroll using the standalone component ie;
<ParallaxScroll style={styles.myStyle} parallaxHeight={height} renderParallaxBackground={({ animatedValue }) => <MyComponent animatedValue={animatedValue} media={data} .../>

seonoh commented 3 years ago

thank you reply. um... I tried that, but horizontal scroll in flatlist is not work

monterosalondon / react-native-parallax-scroll