Rendering flat list on screen along with another component

Question

More of a styling question. I am making an Instagram clone. I have a HomeScreen screen that displays Header Stories and Post Component. I want the Post to be displayed right below the Stories Component. When I map over the stories and display the result, It works as expected but I want to use a fat list and it takes over the entire screen, and as the post component grows the flat list component shrinks and eventually displays over the stories component. I solved it using flex:34 to get the styling that I want but is there even a flex 34? it works but wanted to ask if there is a better way to approach this problem.

Home Screen

const HomeScreen = () => {
    return (
        <SafeAreaView style={styles.container}>
            <Header />
            <Stories />
            <Post />
        </SafeAreaView>
    );
};

styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "black",
    },
});

Stories.js

const Stories = () => {
    const renderItem = ({ item }) => {
        return (
            <View style={styles.flatListContainer}>
                <Image source={item.image} style={styles.image} />
                <Text style={{ color: "white", alignSelf: "center" }}>
                    {item.user.length > 10
                        ? item.user.slice(0, 10).toLowerCase() + "..."
                        : item.user.toLowerCase()}
                </Text>
            </View>
        );
    };

    // console.log(users);
    // useEffect(() => {});
    return (
        <View style={{ flex: 6 }}>
            <FlatList
                data={users}
                renderItem={renderItem}
                keyExtractor={(item) => item.id}
                horizontal={true}
                style={styles.storiesContainer}
            />
        </View>
       
    );
};

const styles = StyleSheet.create({
    storiesContainer: {
        marginTop: 12,
        borderWidth: 1,
        borderColor: "white",
    },

    image: {
        height: 70,
        width: 70,
        resizeMode: "cover",
        borderRadius: 35,
        marginHorizontal: 8,
        borderColor: "red",
        borderWidth: 2,
        backgroundColor: "black",
        padding: 4,
    },
});

Post.js

const Post = () => {
    return (
        <View style={{ flex: 34 }}>
            <Text style={{ color: "white" }}>Post</Text>
            <Text style={{ color: "white" }}>Post</Text>
            <Text style={{ color: "white" }}>Post</Text>
            <Text style={{ color: "white" }}>Post</Text>
            <Text style={{ color: "white" }}>Post</Text>
            <Text style={{ color: "white" }}>Post</Text>
            <Text style={{ color: "white" }}>Post</Text>
            <Text style={{ color: "white" }}>Post</Text>
            <Text style={{ color: "white" }}>Post</Text>
            <Text style={{ color: "white" }}>Post</Text>
            <Text style={{ color: "white" }}>Post</Text>
            <Text style={{ color: "white" }}>Post</Text>
            <Text style={{ color: "white" }}>Post</Text>
            <Text style={{ color: "white" }}>Post</Text>
            <Text style={{ color: "white" }}>Post</Text>
        </View>
    );
};

enter image description here