render Fixed Foreground problem

[abduldeveloper]

I used Flat list in the render fixed foreground and in the flat list image scrolling animation is working

<ImageHeaderScrollView
maxHeight={MAX_HEIGHT}
minHeight={MIN_HEIGHT}
minOverlayOpacity={0.4}
maxOverlayOpacity={0.8}
showsVerticalScrollIndicator={false}
renderFixedForeground={() => (

<FlatList
horizontal={true}
showsHorizontalScrollIndicator={false}
data={Service}
style={{

                        }}
                        renderItem={({ item, index }) => _renderService(item, index)}
                        decelerationRate={0.8}
                        bounce={false}
                        snapToInterval={width}
                        onScroll={Animated.event(
                            [{ nativeEvent: { contentOffset: { x: scrollX } } }],
                            { useNativeDriver: false },
                        )}
                    />
                    <View
                        style={{
                            flexDirection: 'row',
                            flex: 1,
                            justifyContent: 'center',
                            alignItems: 'center',
                        }}>
                        {Service
                            ? Service.map((Service, index) => {
                                let opacity = position.interpolate({
                                    inputRange: [index - 1, index, index + 1],
                                    outputRange: [0.2, 1, 0.2],
                                    extrapolate: 'clamp',
                                });
                                return (
                                    <Animated.View
                                        style={[
                                            {
                                                width: '10%',
                                                borderRadius: 100,
                                                shadowColor: '#171717',
                                                shadowOffset: { width: -2, height: 4 },
                                                shadowOpacity: 0.2,
                                                shadowRadius: 3,
                                                marginHorizontal: 5,
                                                bottom: 18,
                                                left: 8,
                                                height: 4.4,
                                                backgroundColor: Color.white,
                                                opacity,
                                            },
                                        ]}>

                                    </Animated.View>
                                );
                            })
                            : null}
                    </View>
                </View>


            )}
  
        >

[Shahfaisal-0304]

Solution:
We needed to replace the legacy context. I used React.createContext in the ImageHeaderScrollView.js file, exported it, and then imported it into the TrigerringView file, using it as static contentType as suggested by the RN logs. (fixed)

Archive.zip