Key error when more than one portal

[bakerac4]

Im getting a duplicate key error when I have more than one portal. It seems that the key for both is 0.

[jeremybarbet]

Hey!

Do you have a reproduction code, I did that and didn't get any errors/warnings

<Host style={styles.container}>
  <Text>Open up App.js to start working on your app!</Text>

  <Portal>
    <Text>A portal on top of the rest</Text>
  </Portal>

  <Portal>
    <Text>A portal on top of the rest</Text>
  </Portal>
</Host>

[bakerac4]

@jeremybarbet While I don't have a reproduction I can share, I did some research into this and it seems to be related to navigation. Im using react-navigation - and I noticed in your examples that you have all examples on a single screen. Im thinking it might be related to having them on two different screens. I have two modals loading in one tab, and get no error but when I click on another tab and to go that screen I then get the key error

[jeremybarbet]

Alright, I did try with react-navigation.

expo init example
> tabs (using react-navigation)

In the two tab screens (LinksScreen, HomeScreen) I added one Host and one Portal for each screen and got no error.

Unless you provide a reproduction case, I'm afraid I can't help any further.

PS: Are you using the latest 1.0.3?

[andres-pino]

I'm getting the same error. I am using react navigation v5 and the Host component is wrapping all the NavigationContainer. I have a StackNavigator and a DrawerNavigator, the Portal is used along different Screens between this navigators. Unfortunately I am not allowed to share my code and I don't have the time to reproduce it.

[eongjun]

I'm getting the same error. In my code, I'm using react navigation v5, and a tab navigator is nested inside a stack navigator.

1. Host component is wrapping Tab Navigator When two different screens inside the tab Navigator have portal each, key error occurs.

2. Host component is wrapping all the Navigation Container When two different screens inside the tab Navigator have portal each, key error does not occur. But in android, modalize component cannot be swipe.

[archansel]

I got the error too using react navigation v5

my case is Host component wrapping root navigator (stack) which has tab navigator, something like this NavigationContainer > Host > Stack.Navigator > Tab.Navigator > MyScreen > Portal

I create a modal class that include the portal, so each modal have one portal. In one of my screen I have two modal, something like this

<View>
  <Portal><Modal/></Portal>
  <Portal><Modal/></Portal>
  <View>...</View>
</View>

strangely I can't exactly reproduce the error because its kind of random

[hansen-simon]

I get the same error. And I'm using a similar structure with react-navigation as @archansel described.

I hat a look into the code and I think the problem might be that the key is just set to the portal index number. Other libraries might do the same and therefor the key might not be unique. I replaced key={key} with

      key={`portalize_portal_${key}`}

in the src/Manager.tsx file and the error is gone for me. (fork)

[brycepavey]

I implemented solution from @hansen-simon but was still getting duplicate key errors. I replaced the key with index to fix.

Manager.js:

return portals.map(({ key, children }, index) => (
    <View key={`${index}`} collapsable={false} pointerEvents="box-none" style={StyleSheet.absoluteFill}>
      {children}
    </View>
  ));

[jeremybarbet]

Hey,

Can you check if the new release 1.0.4 fix the key issues?

[teenoh]

I just upgraded to 1.0.4 and no longer see the error. Thanks!

[jeremybarbet]

Sounds good I will close this issue then 🙌🏻