How to fix flex-1 is not working in react native? - react-native

Question

I'm new to react native and following the tutorial on youtube. When I'm developing the tutorial app there is a place to add flex-1 as a className. But after adding it nothing happened.
This is the tutorial:- https://youtu.be/AkEnidfZnCU
This is my code
import { useNavigation } from '#react-navigation/native';
import React, { useLayoutEffect } from 'react';
import { View, Text, Image, TextInput } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { UserIcon, ChevronDownIcon, MagnifyingGlassIcon, AdjustmentsHorizontalIcon } from "react-native-heroicons/outline";
const HomeScreen = () => {
const navigation = useNavigation();
useLayoutEffect(() => {
navigation.setOptions({
headerShown: false,
})
}, [])
return (
<SafeAreaView className="bg-white pt-5">
<Text className="text-red-500">
{/* Header */}
<View className="flex-row pb-3 items-center mx-4 space-x-2 px-4">
<Image
source={{
uri: 'https://links.papareact.com/wru',
}}
className="h-7 w-7 bg-gray-300 p-4 rounded-full"
/>
<View className="flex-1">
<Text className="font-bold text-gray-400 text-xs">Deliver Now!</Text>
<Text className="font-bold text-xl">Current Location
<ChevronDownIcon size={20} color="#00CCBB" />
</Text>
</View>
<UserIcon size={35} color="#00CCBB" />
</View>
{/* Search box */}
<View className="flex-row items-center space-x-2 pb-2 mx-4 px-4">
<View className="flex-row space-x-2 bg-gray-200 p-3">
<MagnifyingGlassIcon size={20} color="gray" />
<TextInput placeholder='Restaurant and cuisines' keyboardType='default' />
</View>
<AdjustmentsHorizontalIcon color="#00CCBB" />
</View>
</Text>
</SafeAreaView>
);
}
export default HomeScreen;
This is how it looks like
Please help me to solve this problem.

Answer 1

==> Try this may be it works. You have to add View with flex-1
return (
<SafeAreaView className="bg-white pt-5">
<View className="flex-1"> // here
<Text className="text-red-500">
{/* Header */}
<View className="flex-row pb-3 items-center mx-4 space-x-2 px-4">
<Image
source={{
uri: 'https://links.papareact.com/wru',
}}
className="h-7 w-7 bg-gray-300 p-4 rounded-full"
/>
<View className="flex-1">
<Text className="font-bold text-gray-400 text-xs">Deliver Now!</Text>
<Text className="font-bold text-xl">Current Location
<ChevronDownIcon size={20} color="#00CCBB" />
</Text>
</View>
<UserIcon size={35} color="#00CCBB" />
</View>
{/* Search box */}
<View className="flex-row items-center space-x-2 pb-2 mx-4 px-4">
<View className="flex-row space-x-2 bg-gray-200 p-3">
<MagnifyingGlassIcon size={20} color="gray" />
<TextInput placeholder='Restaurant and cuisines' keyboardType='default' />
</View>
<AdjustmentsHorizontalIcon color="#00CCBB" />
</View>
</Text>
</View>
</SafeAreaView>
);