I am following a yt tutorial and i just simply can’t get this to work. I don’t think i have tried making something work so much, honestly you’d expect something like react native to have working components right out of the box, not only does it not work, it’s also not trivial at all to get this working, i saw multiple posts about this from years and some just recently and i believe it’s still an open issue on github, please tell me if this is just absolutely unfixable so i can maybe use an external library. (this problem is particularly on android after using the expo go app to scan the qr code i don’t know if it works on iOS or not):

index.jsx:

import { View, Text, Image, ScrollView } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { images } from '@/constants'
import CustomButton from '../components/CustomButton'
import { StatusBar } from 'expo-status-bar'
import { router, Redirect } from 'expo-router'

const index = () => {
  return (
    <SafeAreaView
      className='bg-primary h-full border border-red-600'
      style={{ flexGrow: 1 }}
    >
      <ScrollView
        contentContainerStyle={{
          height: '100%',
        }}
      >
        <View className='w-full justify-center items-center min-h-[85vh] px-4'>
          <Image
            source={images.logo}
            className='w-[130px] h-[84px]'
            resizeMode='contain'
          />
          <Image
            source={images.cards}
            className='max-w-[380px] w-full h-[300px]'
            resizeMode='contain'
          />
          <View className='relative mt-5'>
            <Text className='text-3xl text-white font-bold text-center'>
              Discover Endless Possibilities with{' '}
              <Text className='text-secondary-200'>Aora</Text>
            </Text>
            <Image
              source={images.path}
              className='w-[136px] h-[15px] absolute -bottom-2 -right-8'
              resizeMode='contain'
            />
          </View>
          <Text className='text-sm font-pregular text-gray-100 mt-7 text-center'>
            Where creativity meets innovation: embark on a journey of limitless
            exploration with Aora
          </Text>
          <CustomButton
            title='Continue with Email'
            handlePress={() => router.push('/sign-in')}
            containerStyles='w-full mt-7'
          />
        </View>
      </ScrollView>
      <StatusBar backgroundColor='#161622' style='light' />
    </SafeAreaView>
  )
}

export default index

package.json:

  "dependencies": {
    "@expo/ngrok": "^2.5.0",
    "@expo/vector-icons": "^14.0.2",
    "@react-navigation/native": "^6.0.2",
    "expo": "~51.0.28",
    "expo-constants": "~16.0.2",
    "expo-dev-client": "~4.0.25",
    "expo-font": "~12.0.9",
    "expo-linking": "~6.3.1",
    "expo-router": "~3.5.23",
    "expo-splash-screen": "~0.27.5",
    "expo-status-bar": "~1.12.1",
    "expo-system-ui": "~3.0.7",
    "expo-web-browser": "~13.0.3",
    "nativewind": "^2.0.11",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.5",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "4.10.5",
    "react-native-screens": "3.31.1",
    "react-native-web": "~0.19.10"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@expo/ngrok": "^4.1.0",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.2.45",
    "@types/react-test-renderer": "^18.0.7",
    "jest": "^29.2.1",
    "jest-expo": "~51.0.3",
    "react-test-renderer": "18.2.0",
    "tailwindcss": "^3.3.2",
    "typescript": "~5.3.3"
  }