Skip to content

Text disappers on Android #29950

Description

@yskoht

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>
      )}

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions