Stack Navigation for React Native Snack.expo.dev

Question

Got some starter code and proceeded to make my app in snack.expo.dev.

There is a minified error if I pick a device, surly the main part of it has to do with package.json. When using the web part, there is also an error and it is indescernable. Running the expo install locally does give some errors and warnings but they are host related and package.json can only be done in some ways on the local host.

Need a package.json for a React Native App with Stack Navigation. See code sample below.

package.json

{
  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "react-native-image": "*",
    "react-native-paper": "4.9.2",
    "react-native-screens": "~3.20.0",
    "@react-navigation/native": "6.0.0",
    "react-native-gesture-handler": "~2.9.0",
    "@react-navigation/native-stack": "*",
    "react-native-safe-area-context": "4.5.0"
  }
}

../screens/SubscribeScreen.js

import { Alert, StyleSheet, Button, View, Image, TextInput } from 'react-native';
//import * as React from 'react';

function SubscribeScreen ( navigation )  {
  // Add subscribe screen code here
  return (<View style={styleSheet.container}>
    <View style={styleSheet.topFiller} />
    <View style={styleSheet.logoWithControlsContainer}> 
        <Image
        style = {styleSheet.img}
        source = {require("../assets/little-lemon-logo-grey.png")}
       />      
       <TextInput placeholder="[email protected]" />
       <Button title="Subscribe" 
          style={styleSheet.button}
          onPress={() => {NewsletterPopup(navigation)}} />
    </View>
  </View>);
}

let stylesheet = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column",
    alignSelf: 'center',
    alignItems: 'center',
  },
  topFiller: {
    flex: 3,
    selfJustify: 'space-between',
  },
  logoWithControlsContainer: {
    flex: 13,
    alignSelf: 'center',
    alignItems: 'center',
  },
  img: {
    flex: 10,
    height: 140,
    width: 140,
    resizeMode: "stretch",
    alignSelf: "center",
    selfJustify: "flex-start",
  },
  button: {
    flex: 10,
    color: "white",
    alignSelf: 'center',
    backgroundColor: "blue",
    //selfJustify: "flex-end",
  },
  textInput: {
    flex: 10,
    fontSize: 40,
    fontFamily: "monospace",
    keyboardType: "email-address",
  },
});

function NewsletterPopup(navigation){
  Alert.alert('Subscribed', 'Little Lemon newsletter.', 
      [{text: 'OK', 
        onPress: () => {navigation.popToTop()}},
        ]
  );
}

export default SubscribeScreen;

./navigators/RootNavigator.js

//import * as React from "react";
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import WelcomeScreen from '../screens/WelcomeScreen';
import SubscribeScreen from "../screens/SubscribeScreen";

const Stack = createNativeStackNavigator();

const RootNavigator = () => {
  return (
    <Stack.Navigator initialRouteName="Welcome">
      <Stack.Screen name="Welcome" component={WelcomeScreen} />
      <Stack.Screen name="Subscribe" component={SubscribeScreen} />
    </Stack.Navigator>
  );
};

export default RootNavigator;

App.js

import { NavigationContainer } from "@react-navigation/native";
import {RootNavigator} from "./navigators/RootNavigator";

// App.js is already setup by wrapping NavigationContainer around Root Navigator
export default function App() {
  return (
    <NavigationContainer>
      <RootNavigator />
    </NavigationContainer>
  );
}