Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Text disappers on Android #29950

Closed
yskoht opened this issue Sep 15, 2020 · 1 comment
Closed

Text disappers on Android #29950

yskoht opened this issue Sep 15, 2020 · 1 comment
Labels
Needs: Triage 🔍 Platform: Android Android applications. Resolution: Locked This issue was locked by the bot.

Comments

@yskoht
Copy link

yskoht commented Sep 15, 2020

Description

When I run my code on Android(both emulator and device), the text disappears. But It shows up on iOS.

React Native version:

System:
    OS: macOS 10.15.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 1.10 GB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.4.0 - ~/.anyenv/envs/nodenv/versions/14.4.0/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.5 - ~/.anyenv/envs/nodenv/versions/14.4.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /Users/yskoht/.anyenv/envs/rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.7, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 28, 29, 30
      Build Tools: 28.0.3, 29.0.2, 30.0.2
      System Images: android-24 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-30 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6626763
    Xcode: 11.7/11E801a - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_265 - /Users/yskoht/.anyenv/envs/jenv/shims/javac
    Python: 3.8.3 - /Users/yskoht/.anyenv/envs/pyenv/shims/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: 0.63.2 => 0.63.2
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

  1. Run my code on Android emulator (I used Pixel 3 API 28)
  2. Tap Button
  3. Text disappears

Expected Results

Text appears.

Snack, code example, screenshot, or link to a repository:

Snack

https://snack.expo.io/Nc5lQ05E5
But this issue is not reproduced on snack. My code works well.

Screen record

On Pixel 3 API 28 emulator.

Untitled

Code

import * as React from 'react';
import { SafeAreaView, StyleSheet, Button, Text } from 'react-native';

const App = () => {
  const [val, setVal] = React.useState('foo')

  const onPress = () => {
    if (val === 'foo') {
      setVal('bar')
    }
    else {
      setVal('foo')
    }
  }

  return (
    <SafeAreaView>
      {val === 'foo' ? (
        <Text key="foo" style={styles.foo}>{val}</Text>
      ) : (
        <Text key="var" styles={styles.bar}>{val}</Text>
      )}
      <Button title="button" onPress={onPress} />
    </SafeAreaView>
  )
}

export default App

const styles = StyleSheet.create({
  foo: {
    fontSize: 14,
    color: 'red',
  },
  bar: {
    fontSize: 14,
  }
})

Others

I put key to the texts, it works well.

      {val === 'foo' ? (
        <Text key="foo" style={styles.foo}>{val}</Text>
      ) : (
        <Text key="bar" styles={styles.bar}>{val}</Text>
      )}

Or I remove style, it also works well.

      {val === 'foo' ? (
        <Text>{val}</Text>
      ) : (
        <Text>{val}</Text>
      )}
@react-native-bot react-native-bot added the Platform: Android Android applications. label Sep 15, 2020
@yskoht
Copy link
Author

yskoht commented Sep 15, 2020

Duplicate of #29717

Sorry, I close this issue.

@yskoht yskoht closed this as completed Sep 15, 2020
facebook-github-bot pushed a commit that referenced this issue Aug 18, 2021
…or instead of transparent (#29830)

Summary:
This pr:
- Fixes: #30183
- Fixes: #30056
- Fixes: #29950
- Fixes: #29717
- Fixes: #29495
- Fixes: #29412
- Fixes: #29378

Because most of ReactProps(name = ViewProps.COLOR) accept @ Nullable Integer.
For example:
https://github.com/facebook/react-native/blob/abb6433f506851430dffb66f0dd34c1e70a223fe/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java#L472-L479

After update to react-native 0.63.2 to make PlatformColor work, there is a new ColorPropSetter.
https://github.com/facebook/react-native/blob/abb6433f506851430dffb66f0dd34c1e70a223fe/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewManagersPropertyCache.java#L194-L215

But ColorPropSetter won't return an nullable value with getValueOrDefault, it will always return it's defaultValue which is 0.
And 0 is equal to TRANSPARENT, will cause <Text /> disappear.
## Changelog

[Android] [Fixed] - ColorProps with value null should be defaultColor instead of transparent

Pull Request resolved: #29830

Test Plan:
Please initiated a new project and replaced the app with the following code:
```
import * as React from 'react';
import {Text, View, TouchableOpacity, PlatformColor} from 'react-native';

export default function App() {
  const [active, setActive] = React.useState(false);

  return (
    <View>
      <Text style={active ? {color: 'green'} : null}>Example</Text>
      <Text
        style={
          active ? {color: PlatformColor('android:color/holo_purple')} : null
        }>
        Example2
      </Text>
      <TouchableOpacity onPress={() => setActive(!active)}>
        <Text>Toggle Active</Text>
      </TouchableOpacity>
    </View>
  );
}
```

Thanks you so much for your code review!

Reviewed By: JoshuaGross

Differential Revision: D30209262

Pulled By: lunaleaps

fbshipit-source-id: bc223f84a92f742266cb7b40eb26722551940d76
kelset pushed a commit that referenced this issue Aug 19, 2021
…or instead of transparent (#29830)

Summary:
This pr:
- Fixes: #30183
- Fixes: #30056
- Fixes: #29950
- Fixes: #29717
- Fixes: #29495
- Fixes: #29412
- Fixes: #29378

Because most of ReactProps(name = ViewProps.COLOR) accept @ Nullable Integer.
For example:
https://github.com/facebook/react-native/blob/abb6433f506851430dffb66f0dd34c1e70a223fe/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java#L472-L479

After update to react-native 0.63.2 to make PlatformColor work, there is a new ColorPropSetter.
https://github.com/facebook/react-native/blob/abb6433f506851430dffb66f0dd34c1e70a223fe/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewManagersPropertyCache.java#L194-L215

But ColorPropSetter won't return an nullable value with getValueOrDefault, it will always return it's defaultValue which is 0.
And 0 is equal to TRANSPARENT, will cause <Text /> disappear.
## Changelog

[Android] [Fixed] - ColorProps with value null should be defaultColor instead of transparent

Pull Request resolved: #29830

Test Plan:
Please initiated a new project and replaced the app with the following code:
```
import * as React from 'react';
import {Text, View, TouchableOpacity, PlatformColor} from 'react-native';

export default function App() {
  const [active, setActive] = React.useState(false);

  return (
    <View>
      <Text style={active ? {color: 'green'} : null}>Example</Text>
      <Text
        style={
          active ? {color: PlatformColor('android:color/holo_purple')} : null
        }>
        Example2
      </Text>
      <TouchableOpacity onPress={() => setActive(!active)}>
        <Text>Toggle Active</Text>
      </TouchableOpacity>
    </View>
  );
}
```

Thanks you so much for your code review!

Reviewed By: JoshuaGross

Differential Revision: D30209262

Pulled By: lunaleaps

fbshipit-source-id: bc223f84a92f742266cb7b40eb26722551940d76
@facebook facebook locked as resolved and limited conversation to collaborators Oct 1, 2021
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Oct 1, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Needs: Triage 🔍 Platform: Android Android applications. Resolution: Locked This issue was locked by the bot.
Projects
None yet
2 participants