Components display perfectly on web view but aren't being displayed on android view in React Native

I'm building an instagram clone using React Native with Homescreen consisting of custom Header and Imagepost components,but it isn't showing up properly on android although it displays perfectly on web view(images below).

I only added the Text and the Test Button for testing purposes

HomeScreen.js:

import React, { useEffect, useState } from "react";
import { View, Text, TouchableOpacity, Button } from "react-native";
import axios from "axios";
import ImagePost from "../../components/ImagePost";
import Header from "../../components/Header";
import Ionicons from "react-native-vector-icons/Ionicons";

import useStore from "../../store";

const HomeScreen = ({ navigation }) => {
  const [posts, setposts] = useState([]);
  const [current, setcurrent] = useState(null);
  const user = useStore((state) => state.currentUser);
  const setcurrentUser = useStore((state) => state.setcurrentUser);

  useEffect(() => {
    axios.get("http://localhost:5000/posts").then((response) => {
      console.log(response.data.posts);
      setposts(response.data.posts);
    });
  }, []);

  return (
    <View>
      <Header navigation={navigation} />
      <Text>huidhoasodhiohdp</Text>
      <Button title="test" />

      {console.log("now user", user)}
      {console.log("posts", posts)}
      {posts &&
        posts.map((post) => {
          return (
            <View key={post._id}>
              <ImagePost post={post} navigation={navigation} />
              {console.log("This post is", post)}
            </View>
          );
        })}
    </View>
  );
};

export default HomeScreen;

Header.js:

import React from "react";
import { View, TouchableOpacity, Text } from "react-native";
import Ionicons from "react-native-vector-icons/Ionicons";
import useStore from "../store";

const Header = ({ navigation }) => {
  console.log("header navigation", navigation);

  const user = useStore((state) => state.currentUser);
  return (
    <View
      style={{
        flex: 1,
        flexDirection: "row",
        justifyContent: "space-between",
        backgroundColor: "white",
      }}
    >
      <TouchableOpacity
        onPress={() => navigation.navigate("AddScreen")}
        style={{ margin: "5%" }}
      >
        <Ionicons name="add-outline" size={25} color="black" />
      </TouchableOpacity>
      {user && <Text>{user.username}</Text>}
      {user && console.log(user.username)}
      <TouchableOpacity style={{ margin: "5%" }}>
        <Ionicons name="chatbubble-ellipses-outline" size={25} color="black" />
      </TouchableOpacity>
    </View>
  );
};

export default Header;

ImagePost.js :

import React from "react";
import { View, Text, Image, TouchableOpacity, Button } from "react-native";
import Ionicons from "react-native-vector-icons/Ionicons";

const ImagePost = ({ post, navigation }) => {
  return (
    <View>
      <View style={{ flex: 1, flexDirection: "row", alignItems: "center" }}>
        <Image
          style={{
            width: 50,
            height: 50,
            borderRadius: 50,
            marginRight: "3%",
          }}
          source={post.creator.pic}
        />
        <Text style={{ fontWeight: "bold" }}>User</Text>
      </View>
      <View style={{ width: "100%", height: 450 }}>
        <Image
          style={{ resizeMode: "cover", height: "100%" }}
          source={post.file}
        />
        <View style={{ flex: 1, flexDirection: "row", marginBottom: "6%" }}>
          <TouchableOpacity style={{ marginRight: "1%" }}>
            <Ionicons name="heart-outline" size={25} color="black" />
          </TouchableOpacity>
          <TouchableOpacity
            style={{ marginRight: "1%" }}
            onPress={() =>
              navigation.navigate("CommentsScreen", { postId: post._id })
            }
          >
            <Ionicons name="chatbubble-outline" size={25} color="black" />
          </TouchableOpacity>
        </View>
        <Text>
          <Text style={{ fontWeight: "bold", marginRight: "5%" }}>
            {post.creator.userName}
          </Text>
          {post.description}
        </Text>
      </View>
    </View>
  );
};

export default ImagePost;

Android view

Web view