Open
Description
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
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.