reactjs - ScrollView not working inside HOC React Native

Question

I am trying to use HOC and inside HOC I am using a ScrollView but Scrollview is not working.

export default (Comp) => {
const networkStatus = store.getState().network.isConnected;
return ({
    header,
    spinner,
    children,
    onLeftIconPress,
    onHandleMenu,
    onHandleNotificationIcon,
    onHandleBagIcon,
    headerHamburg,
    headerLeft,
    handleLeftButton,
    handleBagIcon,
    headerTitle,
    bagVisible,
    headerTitleVisible,
    rightTextVisible,
    ...props
}) => (
            <View style={{ flex: 1 }}>
                <TouchableWithoutFeedback
                    style={{ flex: 1 }}
                    onPress={Keyboard.dismiss}>
                    <View style={{ flex: 1 }}>
                        <MyStatusBar />
                        {
                            (header) &&
                            <CustomHeaderCentered
                                onLeftIconPress={onLeftIconPress}
                                header={header}
                            />
                        }
                           <KeyboardAvoidingView
                            style={{
                                flex: 1,
                                flexDirection: 'column',
                                justifyContent: 'center',
                            }}
                            behavior="padding"
                            enabled
                            keyboardVerticalOffset={50}
                        >
                            <Comp {...props}>
                                {children}
                            </Comp>
                        </KeyboardAvoidingView>


                        {
                            spinner &&
                            <ProgressView
                                isProgress={spinner}
                            />
                        }
                    </View>

                </TouchableWithoutFeedback>
            </View> 
)

}

and where I am using after import I do:-

 const CustomHOC = HOC.HOCs(ScrollView)

and return of my usage is:-

retrun(
       <View style={{flex:1}}>
        <CustomHOC
            style={{ flex: 1 }}
            headerHamburg={true}
            // headerLeft={true}
            headerTitle={t('SweatShirts')}
            headerTitleVisible={true}
            bagVisible={true}
            // rightTextVisible={true}
            onHandleMenu={() => props.navigation.toggleDrawer()}
            onHandleNotificationIcon={() => console.log("onHandleNotificationIcon")}
            onHandleBagIcon={() => console.log("onHandleBagIcon===>")}
        >
            <ScrollView style={{flex:1}}>
                <Text>Anything here is not scrollable</Text>
            </ScrollView>
        </CustomHOC>
    </View >

)

If I change main View of HOC to ScrollView it works. But I do not want my header to be in scrollable part. I tried passing Children component inside ScrollView but it did not work for me.

Thanks!!!

question from:https://stackoverflow.com/questions/65914849/scrollview-not-working-inside-hoc-react-native

Answer 1

Waitting for answers