Text elements do not switch color based on color scheme

[davide-granello]

Description

Text elements do not switch color when manually switching color scheme, the text color is always dark. Only way to make it work is to specify $textDefault token as a prop.

Related to

• [X] Components
• [ ] Demo
• [ ] Docs
• [ ] Typings

Steps to reproduce

I have prepared a repro here: https://github.com/davide-granello/rnuilib-scheme-bug-repro.git Just run it (npx expo start) and toggle color scheme using the buttons. See file /app/(tabs)/index.tsx

Expected behavior

Text elements should change color based on schema.

Actual behavior

Text elements only change color when specifying $textDefault prop.

More Info

Repro here: https://github.com/davide-granello/rnuilib-scheme-bug-repro.git

Code snippet

See repro, file /app/(tabs)/index.tsx

import View from 'react-native-ui-lib/view'
import Text from 'react-native-ui-lib/text'
import Button from 'react-native-ui-lib/button'
import { Appearance, SafeAreaView } from 'react-native'
import { Colors } from 'react-native-ui-lib'

export default function HomeScreen() {
  function handleSetLightScheme() {
    // Setting both rnuilib and expo/react native scheme to light
    Colors.setScheme('light')
    Appearance.setColorScheme('light')
  }

  function handleSetDarkScheme() {
    // Setting both rnuilib and expo/react native scheme to dark
    Colors.setScheme('dark')
    Appearance.setColorScheme('dark')
  }

  return (
    <SafeAreaView>
      <View padding-20 gap-20>
        <Text h1>{"<Text h1>"}</Text>
        <Text h3>{"<Text h3>"}</Text>
        <Text>{"<Text>"}</Text>
      </View>
      <View padding-20 gap-20>
        <Text h1 $textDefault>{"<Text h1 $textDefault>"}</Text>
        <Text h3 $textDefault>{"<Text h3 $textDefault>"}</Text>
        <Text $textDefault>{"<Text $textDefault>"}</Text>
      </View>
      <View padding-60 gap-20>
        <Button label="Set light scheme" onPress={handleSetLightScheme} />
        <Button label="Set dark scheme" onPress={handleSetDarkScheme} />
      </View>
    </SafeAreaView>
  )
}

Screenshots/Video

Environment

• React Native version: 0.79.2
• React Native UI Lib version: ^7.42.0

Affected platforms

• [ ] Android
• [X] iOS
• [ ] Web

I only tested it on iOS, i expect it to happen also in other platforms.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[davide-granello]

Can someone from the team take a look at this?

[wowsummer]

+1

[ferretwithaberet]

Are there any known fixes?

[davide-granello]

Are there any known fixes?

Only workaround for me is putting $textDefault prop in every Text element..

[ferretwithaberet]

Only workaround for me is putting $textDefault prop in every Text element..

I thought about using ThemeManager to set it on all Text elements, but I cannot get it working properly. This is what I tried:

  const colorKeys = Object.keys(Colors);
  ThemeManager.setComponentForcedTheme(
    "Text",
    (props: TextProps): TextProps => {
      const hasOtherColor = !!StyleSheet.flatten(props.style)?.color;
      const hasOtherColorProp = Object.keys(props).some(
        (propKey) => propKey.startsWith("$text") || propKey in colorKeys
      );

      const newProps = { ...props };
      if (!(hasOtherColor || hasOtherColorProp))
        newProps["$textDefault"] = true;

      return newProps;
    }
  );

[ferretwithaberet]

I think this issue is a duplicate of #2127. I have posted a comment there after some digging into the source code.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.