'React Native project won't build on android with Stack Navigation plugin

I created a react native project according to the docs. When I run $npx react-native run-ios or run-android, both work fine.

I then followed the instructions here for how to install react-navigation following the "bare react native" path (as opposed to expo): https://reactnative.dev/docs/navigation

App.js

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import Homescreen from './src/Homescreen/Homescreen'

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
        <Stack.Navigator
            initialRouteName="Home"
          >
            <Stack.Screen
              name="Home"
              component={Homescreen}
              options={{
                headerShown: false,
                title: 'Enter the metaverse.',
              }}
            />
        </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Homescreen.js

import React from "react";
import { ImageBackground, StyleSheet, View, Image } from "react-native";

const image = require('../../assets/img/homescreen.jpg');
const logo = require('../../assets/img/LogoStacked.png');

const styles = StyleSheet.create({
    container: {
      flex: 1
    },
    image: {
      flex: 1,
      justifyContent: "center"
    },
    logo: {
        width: 140,
        height: 90
    },
    tagline: {
      fontSize: 25,
      fontWeight: '500',
      color: '#FF1472',
      fontFamily: 'Poppins'
    }
  });

export default function Homescreen() {
    return (
      <View style={styles.container}>
        <ImageBackground source={image} resizeMode="cover" style={styles.image}>
            <Image
              style={styles.logo}
              source={logo}
            />
          {/* <Text style={styles.tagline}>Size me up, Scotty</Text> */}
        </ImageBackground>
      </View>
    );
}

My project builds and says the following in terminal:

BUILD SUCCESSFUL in 14s
141 actionable tasks: 2 executed, 139 up-to-date
info Connecting to the development server...
info Starting the app on "emulator-5554"...
Starting: Intent { cmp=com.shockbloxwallet/.MainActivity }

When I open ios simulator, it works perfectly. When I open android emulator, its just a white screen. I have tried changing my gradle version and even installing a supposedly compatible kotlin version with brew, but no success.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source