react-native-ui-lib icon indicating copy to clipboard operation
react-native-ui-lib copied to clipboard

Disabling then enabling Stepper component causes text to disappear

Open steven-haddix opened this issue 4 years ago • 1 comments

Describe the bug

Re-enabling a disabled Stepper component hides number text

To Reproduce

Steps to reproduce the behavior:

  1. Render stepper component with disabled true
  2. Stepper Text correctly shows with Grey50 color
  3. User enables stepper via Switch component hooked up to useState
  4. Re-render Stepper component with disabled false
  5. Stepper Text is invisible

Expected behavior

When the stepper component is re-enabled the number Text is shown

Code snippet

export default function Example({ route, navigation }) {
  const [stepperValue, onChangeStepperValue] = useState(0)
  const [isStepperDisabled, onChangeIsStepperDisabled] = useState(false)

  return (
    <View flex center marginH-20>
      <Card paddingV-30 paddingH-30>
          <View row spread marginB-10>
            <Text text60>Switch:</Text>
            <Switch onValueChange={onChangeIsStepperDisabled} value={isStepperDisabled} />
          </View>
          <View row spread marginB-20 paddingL-20>
            <Text text70>Stepper: </Text>
            <Stepper
              minValue={0}
              maxValue={60}
              disabled={isStepperDisabled}
              onValueChange={onChangeStepperValue}
              value={stepperValue}
            />
          </View>
      </Card>
    </View>
  )
}

Screenshots

Screenshot_20211231-150412 - Copy Screenshot_20211231-150422 - Copy

Device (please complete the following information)

  • Device: Pixel 5a
  • OS: Android 12
  • Expo: 44
  • ExpoGO: 2.23.2

Additional context

Only tested in the Expo Go application environment

steven-haddix avatar Dec 31 '21 20:12 steven-haddix

@steven-haddix Hi. I couldn't reproduce the issue on Android emulator. Is it only reproduced on Expo or on a real device?

Inbal-Tish avatar Mar 20 '22 07:03 Inbal-Tish