Skip to content

Text elements do not switch color based on color scheme #3733

Open
@davide-granello

Description

@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

  • 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

Image

Environment

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

Affected platforms

  • Android
  • iOS
  • Web

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    buga bug in one of the components

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions