Update Tailwind theme variables for PortalProvider

[joshuadutton]

My app has the ability to dynamically change the Tailwind theme. This is handled with the Nativewind var function documented here: https://www.nativewind.dev/docs/core-concepts/functions-and-directives#var

Here is an example of my ThemeProvider code:

  return (
    <NavigationThemeProvider value={themeToNavigationTheme(theme)}>
      <StatusBar style={colorScheme} />
      <ThemeContext.Provider value={value}>
        <View className="flex-1" style={vars(themeToCSSVariables(theme))}>
          {children}
          {/* TODO: fix it so that this respects theme changes set by themeToCSSVariables in theme provider */}
          <PortalHost />
        </View>
      </ThemeContext.Provider>
    </NavigationThemeProvider>
  );

PortalHost doesn't respect the dynamic change in theme variables, but it does respect the variables defined in global.css and tailwind.config.ts.

Is there currently a way I can update the style of PortalHost dynamically, or do we need to expose a way for the PortalHost to pass a style prop to it's root view?

[joshuadutton]

I figured out a solution. Basically, I need to explicitly add the variables to the root view of any Portal I use. I created this helper component:

export function ThemedView(props: ViewProps) {
  const { theme } = useTheme();
  const style: StyleProp<ViewStyle> = [vars(themeToCSSVariables(theme)), props.style];
  return <View {...props} style={style} />;
}

And then I use it in my components changing this:

    <SelectPrimitive.Portal hostName={portalHost}>
      {/* ... */}
    </SelectPrimitive.Portal>

to this:

    <SelectPrimitive.Portal hostName={portalHost}>
      <ThemedView>
        {/* ... */}
      </ThemedView>
    </SelectPrimitive.Portal>

It would be nice to have a solution that could work in one place so I don't have to update all my Portal based components, so just let me know if you want to add that or if you want to close this issue.

[joshuadutton]

I just found out a bit more for context. My Themed portals were working on web, but not mobile. I needed to move my ThemedView further down the component stack for them to render correctly, like this:

    <SelectPrimitive.Portal hostName={portalHost}>
      <SelectPrimitive.Overlay style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}>
        <Animated.View className="z-50" entering={FadeIn} exiting={FadeOut}>
          <ThemedView>
            ...
          </ThemedView>
        </Animated.View>
      </SelectPrimitive.Overlay>
    </SelectPrimitive.Portal>

Having it outside the overlay seemed to be breaking it

[mrzachnugent]

Hey @joshuadutton, sorry for the late reply. Yes, this should be better documented.

When you use a Portal, the content is not actually rendered where you place the Portal component. Instead, it is rendered wherever your <PortalHost> is.

If the <PortalHost> is not a child of a specific provider, it will not have access to that provider’s context. In that case, you have two options:

1. Wrap the with the provider, or

2. Wrap the Portal’s content itself with the provider you need.

[joshuadutton]

@mrzachnugent you say that if I wrap the <PortalHost> in a provider it should work, but it doesn't. While the <PortalHost> has my base Tailwind theme as defined by my global.css and tailwind.config.ts, it does not have the changed values that I have updated using Nativewind's var function, while the other children of my provider does.

[joshuadutton]

Specifically, this is the code that isn't working:

        <View className="flex-1" style={vars(themeToCSSVariables(theme))}>
          {children}
          <PortalHost />
        </View>

[mrzachnugent]

@joshuadutton Is that the only PortalHost? If you are using a second one, you have to give it a name and provide the name of that host to the Portal component.

If it is the only PortalHost, can you provide a minimal reproduction repo?