SC + Zustand external store reactivity, help me understand

[lgibso34]

I have a React Native Expo snack all laid out here:
https://snack.expo.dev/@theprocessor/ashamed-mixed-nuts---zustand-and-sc

React web version if you prefer that

I have a Zustand store and a JS function (non react) that allows you to get the current theme and choose a value depending on the theme value. It works like React Native's Platform.select() API (see theme.ts). Since Zustand is an external store they have a getState() method we can use to peak at the store state. (see store.ts).

    SystemTheme.select({
      dark: 'white',
      light: 'black',
    })

The motivation for this is to have a non-React (hook) way to style components based on the theme. However, since React needs to be aware that the theme value changed the code above will not be reactive with Styled Components or even if you just used this in a component and just showed a value. As long as that component is not subscribed to the theme useStore(state=> state.theme) then it will not be reactive.

However, styled components is unique and allows you to pass a styled value as a function. And when it is a function, the style becomes "reactive". I'd like to understand how SC is doing this and how it changes the RN style value accordingly.

So this fails to be reactive:

const StyledTextFailure = styled.Text`
  color: ${SystemTheme.select({
    dark: 'white',
    light: 'black',
  })};
`;

and this works:

const StyledText = styled.Text`
  color: ${() => // <= this is a function!!!!!
    SystemTheme.select({
      dark: 'white',
      light: 'black',
    })};
`;

This is kind of blowing my mind. Please help me understand how this works. I appreciate it.

Thanks.

My incomplete hypothesis is that it has to do with the SC component declaration being a const and JS has to respect the return value at all times. I was also thinking that SC was using setNativeProps to directly update the inline styles without a rerender but I couldn't find any trace of that in the SC codebase.