detected two or more react native external displays to render the same screen id 1

[Hassaan68]

I am having this issue, using External Display on first Screen and Second Screen. When I navigate to Second Screen from First Screen by using the navigation.replace method of react-navigation then I get the error "detected two or more react native external displays to render the same screen id 1". I am using the same code in both the screens.
<ExternalDisplay
mainScreenStyle={{ flex: 1 }}
fallbackInMainScreen
screen={Object.keys(screens)[0]}
>

[PopBot]

I encountered the same issue. I had created multiple instances of ExternalDisplay.

<ExternalDisplay mainScreenStyle={{ flex: 1 }} fallbackInMainScreen={true} screen={Object.keys(screens)[0]}>

This gave the same id of 1 for each of the instances, and JS is pass-by-value so this won't work.

Instead, you can create a single instance of the ExternalDisplay (with one singular screen passed) and conditionally render your other "screens" as child components.

const ExternalDisplayContent = ({screenToRender)) => {
    switch (screenToRender) {
        case 'SCREEN_1':
            return <Screen1 />
        case 'SCREEN_2':
            return <Screen2 />
        case 'SCREEN_3':
            return <Screen3 />
        default:
            return null
    }
}

return (
    <ExternalDisplay mainScreenStyle={{ flex: 1 }} fallbackInMainScreen={true} screen={Object.keys(screens)[0]}>
        <ExternalDisplayContent screenToRender={null} />
    </ExternalDisplay>
)