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.