I have a monorepo with two apps: client and merchant. They share a common stack navigator - authentication, which is nested inside the root navigator.To set screen props for the authentication navigator, I need to use the root navigator, which is specific for each app.Also, to avoid duplicates, the authentication navigator, types, and screens are in a package.In one of the screens I have export const RequestEmailLinkScreen = ({ route, navigation }: Props) => {
But the question here is how to load the correct Props (clent vs merchant) based on the app used?I do have const appSlug = Constants.expoConfig?.slug;
So I was thinking to do something like this:
import { MyScreenProps as ClientMyScreenProps } from '../../../types/client';import { MyScreenProps as MerchantMyScreenProps} from '../../../types/merchant';const appSlug = Constants.expoConfig?.slug;type Props = appSlug === "client" ? ClientMyScreenProps : MerchantMyScreenProps;export const MyScreen = ({ route, navigation }: Props) => {
But this is not right.How do I do that and can you think of a better way?