Theme reverting back to initial theme

[shahzaib78631]

Hello ,

I would like to know if i am doing anything wrongly when changing the theme. I am using KeyboardAwareScrollView from react-native-keyboard-controller following is the minimal code.

const ThemedKeyboardAwareScrollView = withUnistyles(KeyboardAwareScrollView)
<ThemedKeyboardAwareScrollView style={styles.container}>{children}</ThemedKeyboardAwareScrollView>

const styles = StyleSheet.create((theme) => ({
  container: { 
    backgroundColor: theme.colors.background
  })
);

When i change the theme using UnistylesRuntime.setTheme(name) It changes the theme to the provided themeName for the active screen. But when i navigate to another screen then the theme reverts back to the initialTheme defined in the Stylesheet.configure.

Before changing theme

After changing theme

After navigating and return

Same is true for some other components.

[jpudysz]

Your code looks correct, so it's most likely a bug. Do you have a repo to share, or is this a commercial project?
It's just easier to debug when I have the whole example. If not, that's fine too, I'll try to reproduce it locally

[jpudysz]

Thank you @shahzaib78631 !
Let's test it against beta.3 before we create any new issues.

Beta 3 should land soon

[jpudysz]

Checking your repo now

[jpudysz]

Theme switching looks good:
https://github.com/user-attachments/assets/8092e8c8-0aac-4417-96fc-72a1ea09b0bc

[jpudysz]

Question: How to change placeholder color according to the active theme color. This also applies to Components which use color property i.e MaterialIcons etc.

1: Issue with popup menu - wrapped it, no more issues, but styles are somehow broken, not sure how react-native-popup-menu works
2. Yeah, I'm aware of it. I will dedicate beta.6 for Reanimated support, for now there is no workaround
3. If you're using React compiler, then it's most likely it

If we use const UniTextInput = withUnistyles(TextInput) then it throws error for

style={[styles.input, commonStyles.flex1, inputStyle]}
Unistyles: withUnistyles requires style to be an object. Please check props for component: undefined [Component Stack]

style={{ ...styles.input, ...commonStyles.flex1 }}
Unistyles: withUnistyles received style that is not bound. You likely used the spread operator on a Unistyle style. Please check >props for component: undefined [Component Stack]

Yeah, withUnistyles is limited to single style now. In beta.5 I will remove Unistyles is not bound! so it should work as expected.

So most likely your issues will be resolved with beta.6.

[shahzaib78631]

Theme switching looks good: https://github.com/user-attachments/assets/8092e8c8-0aac-4417-96fc-72a1ea09b0bc

Yes i also checked against beta 4 it seems to be working fine now.