Images show fine in the iOS simulator but when I open the android simulator.. everything gets mixed up.. what should I do to solve this issue? I honestly don't know how to fix this. so please if there's anyone that can solve this.. would really appreciate it.

So this is the Android emulator. I don't know why the image is like this.

this is on iOS simulator, and how it must be.

Home.js

import React from "react";
import {
  View,
  Text,
  Button,
  SafeAreaView,
  TextInput,
  StatusBar,
  Platform,
  ScrollView,
  Image,
  imageUri,
  StyleSheet,
} from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import ProductsList from "../../components/productsList/ProductsList";
import Icon from "react-native-vector-icons/Ionicons";
import { fontSize } from "styled-system";
import Location from "../components/Location";

export default function Search({ navigation }) {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1 }}>
        <View
          style={{
            height: 80,
            backgroundColor: "white",
            borderBottomWidth: 1,
            borderBottomColor: "#dddddd",
          }}
        >
          <View
            style={{
              flexDirection: "row",
              padding: 10,
              backgroundColor: "white",
              marginHorizontal: 20,
              shadowOffset: { width: 0, height: 0 },
              shadowColor: "black",
              shadowOpacity: 0.2,
              borderRadius: 50,
              elevation: 1,
            }}
          >
            <Icon name="ios-search" size={20} style={{ marginRight: 10 }} />
            <TextInput
              underlineColorAndroid="transparent"
              placeholder="City, airport, adrerss, or hotel"
              placeholderTextColor="grey"
              style={{ flex: 1, fontWeight: "700", backgroundColor: "white" }}
            />
          </View>
        </View>

        <ScrollView
          horizontal={true}
          showsHorizontalScrollIndicator={false}
          scrollEventThrottle={16}
        >
          <View style={{ height: 180, width: 50 }}>
            <Image source={require("../home/homepage.jpeg")} />
          </View>
        </ScrollView>
        <ScrollView scrollEventThrottle={16}>
          <View style={{ flex: 1, backgroundColor: "white", paddingTop: 20 }}>
            <Text
              style={{
                alignItems: "center",
                fontSize: 24,
                fontWeight: "700",
                paddingHorizontal: 20,
                marginLeft: 100,
                borderColor: "grey",
                height: 50,
                width: 230,
                shadowOpacity: 0.5,
                borderWidth: 0.5,
                paddingTop: 10,
                backgroundColor: "lightblue",
              }}
            >
              FIND YOUR RIDE
            </Text>
            <View style={{ height: 130, marginTop: 20 }}>
              <ScrollView
                horizontal={true}
                showsHorizontalScrollIndicator={false}
              >
                <Location
                  imageUri={require("../home/nicosia.jpg")}
                  name="Nicosia"
                />

                <Location
                  imageUri={require("../home/kyrenia.jpg")}
                  name="Kyrenia"
                />

                <Location
                  imageUri={require("../home/famagusta.jpg")}
                  name="Famagusta"
                />

                <Location
                  imageUri={require("../home/lefke.png")}
                  name="Lefke"
                />
              </ScrollView>
            </View>
            <View style={{ marginTop: 40, paddingHorizontal: 20 }}>
              <View>
                <Text
                  style={{
                    fontSize: 24,
                    fontWeight: "700",
                    paddingLeft: 40,
                  }}
                >
                  <View>
                    <MaterialCommunityIcons
                      name="face-agent"
                      size={30}
                      style={{ paddingLeft: 10, color: "lightblue" }}
                    />
                  </View>
                  24/7 customer support
                </Text>
                <Text
                  style={{ paddingLeft: 80, marginTop: 20, marginBottom: 25 }}
                >
                  {
                    "Rest easy knowing that everyone in \nthe Rent in cars community is screened, \nand 24/7 customer support and \nroadside assistant are just a tap away."
                  }
                </Text>
              </View>

              <View>
                <Text
                  style={{
                    fontSize: 24,
                    fontWeight: "700",
                    paddingLeft: 40,
                  }}
                >
                  <View>
                    <MaterialCommunityIcons
                      name="car"
                      size={30}
                      style={{
                        paddingLeft: 10,
                        color: "lightblue",
                        marginTop: 20,
                      }}
                    />
                  </View>
                  Endless options
                </Text>
                <Text
                  style={{ paddingLeft: 80, marginTop: 20, marginBottom: 25 }}
                >
                  {
                    "Choose from hundreds of models\nyou won't find anywhere else. Pick it \nup or get it delivered where you \nwant it."
                  }
                </Text>
              </View>

              <View>
                <Text
                  style={{
                    fontSize: 24,
                    fontWeight: "700",
                    paddingLeft: 40,
                  }}
                >
                  <View>
                    <MaterialCommunityIcons
                      name="security"
                      size={30}
                      style={{ paddingLeft: 10, color: "lightblue" }}
                    />
                  </View>
                  Drive confidently
                </Text>
                <Text style={{ paddingLeft: 80, marginTop: 20 }}>
                  {
                    "Drive confidently with your choice \nof protection plans - all plans \ninclude varying levels of third party \nliability insurance from Liberty \nMutual and physical damage \nprotection from Rent in Car that caps\nyour out of pocket responsibility for \ndamage to your host's car during \nyour trip."
                  }
                </Text>
              </View>
            </View>
          </View>
        </ScrollView>
      </View>
    </SafeAreaView>
  );
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: "center",
      justifyContent: "center",
    },
    red: {
      color: "red",
    },
  });
}

CodePudding user response：

Define width and height and resizeMode :

<View style={{width:"100%", height:180}}>
    <Image
        style={{
        width: "100%",
        height: 180
        }}
        resizeMode="cover"
        source={require("../home/homepage.jpeg")}
    />
/>