I've just finished building an Expo app along with TypeScript. Everything seems to be okay in the live testing mode, but, after compiling the app into a standalone app (for Android at least, haven't tried for ios), the navigation between the screens seems to be broken. I cannot even go past the first screen (when I press on the next button, the app just crashes immediately), although I know all screens are doing just fine in isolation. I am using Expo version 4.4.1, under the managed workflow.
This is my NavigationStack.tsx:
import { createStackNavigator } from 'react-navigation-stack';import { createAppContainer } from 'react-navigation';import EntireMapScreen from '../app/screens/EntireMapScreen';import CardFormScreen from '../app/screens/CardFormScreen';import ChooseOfferScreen from '../app/screens/ChooseOfferScreen';import DecisionScreen from '../app/screens/DecisionScreen';const screens = {Decision: {screen: DecisionScreen },ChooseOffer: {screen: ChooseOfferScreen },Payment: {screen: CardFormScreen },EntireMap: {screen: EntireMapScreen }}const navigationStack = createStackNavigator(screens, {defaultNavigationOptions: {headerShown: false }});export default createAppContainer(navigationStack);The way one file generally looks like is this (DecisionScreen.tsx):
import React from "react";import { NavigationStackProp, NavigationStackScreenProps } from "react-navigation-stack";import AsyncStorage from '@react-native-async-storage/async-storage';import { NavigationInjectedProps, withNavigation } from "react-navigation";/** * An extremly simple non-GUI screen, which decides if the user should pay again for the app * or if the app can simply be used. */class DecisionScreen extends React.Component<NavigationInjectedProps, {form: {status: {cvc: string,expiry: string,name: string,number: string },valid: boolean,values: {cvc: string,expiry: string,name: string,number: string,type: string } },fontsLoaded: boolean,waitingServerResponse: boolean,showError: boolean // if true, we know something went wrong billing the user with // the currently inserted details}> {keyboardDidHideListener: any;constructor(props: any) {super(props);this.state = {form: {status: {cvc: "incomplete",expiry: "incomplete",name: "incomplete",number: "incomplete" },valid: false,values: {cvc: "",expiry: "",name: "",number: "",type: "" } },fontsLoaded: false,waitingServerResponse: false,showError: false }; }makeDecision = async (trial: number) => {... }render = () => <></>;componentDidMount = () => {this.makeDecision(1); }}export default withNavigation(DecisionScreen);I've lost the last 6 hours or so in finding a similar situation on the internet. The best I could find was this article: https://dev.to/andreasbergqvist/react-navigation-with-typescript-29ka, which did not solve the issue. Does anybody know how I could be solving this issue?