Why my button isnt in scrollview in code ( but it show it in phone ?)

<ScreenWapper bg="white">
            <Vie<ScreenWapper bg="white">
    <View styles={styles.container}>
        <Header title="Create Post" />
        <ScrollView contentContainerStyle={{gap: 20}} >
            
            {/* avatar */}
            <View style={styles.header}>
                <Avatar
                    uri={user?.image}
                    size={hp(6.5)}
                    rounded={theme.radius.xl}
                />
                <View styles={{gap: 2}}>
                    <Text style={styles.username}>
                        {
                            user && user.name
                        }
                    </Text>
                    <Text style={styles.publicText}>
                        Public
                    </Text>
                </View>
            </View>

            <View style={styles.textEditor}>
                <RichTextEditor editorRef={editorRef} onChange={body=> bodyRef.current = body}/>
            </View>
            {
                file && (
                    <View style={styles.file}>
                        {
                            getFileType(file) == 'video'? (
                                <Video
                                style={{flex: 1}}
                                source={{
                                    uri: getFileUri(file)
                                }}
                                useNativeControls
                                resizeMode='cover'
                                isLooping
                                />
                            ):(
                                <Image srouce={{uri: getFileUri(file)}} resizeMode='cover' style={{flex: 1}} />
                            )
                        }
                        <Pressable style={styles.closeIcon} onPress={()=>setFile(null)}>
                            <Icon name="delete" size={20} color="white" />
                        </Pressable>
                    </View>
                )
            }
            <View style={styles.media}>
                <Text style={styles.addImageText}>Add to your post</Text>
                <View style={styles.mediaIcons}>
                    <TouchableOpacity onPress={()=>onPick(true)}>
                        <Icon name="image" size={30} color={theme.colors.dark} />
                    </TouchableOpacity>
                    <TouchableOpacity onPress={()=>onPick(false)}>
                        <Icon name="video" size={33} color={theme.colors.dark} />
                    </TouchableOpacity>
                </View>
            </View> 
        </ScrollView>
        <Button
            buttonStyle={{height: hp(6.2)}}
            title="Post"
            loading={loading}
            hasShadow={false}
            onPress={onSubmit}
        />   
    </View>
</ScreenWapper>

I follow this tutorial: https://www.youtube.com/watch?v=YvODxoOTCGw in 25:33-26:03 his button is on the bottom of the screen. But for me, it show on the bottom of the add to your post. And the screen cant scrolling. enter image description here

This is the style of View.container

    container: {
        flex: 1,
        backgroundColor: 'red',
        marginBottom: 30,
        paddingHorizontal: wp(4), //FIX_HERE nhap lai
        gap: 15,
    },

1. I have tried put this code in scroll View to make the content inside is bigger

    {Array.from({ length: 20 }).map((_, index) => (
       <Text key={index}>Dòng {index + 1}</Text>
     ))}
   

   And the post button got push down enter image description here

2. I have tried keyboardShouldPersistTaps=”handled”but the result is the same