Setting disabled on iOS sometimes does not set disabled style

[lukemcgregor]

Environment

System: OS: macOS 11.0.1 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 89.49 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 14.15.0 - ~/.nvm/versions/node/v14.15.0/bin/node Yarn: 1.22.10 - ~/.nvm/versions/node/v14.15.0/bin/yarn npm: 6.14.8 - ~/.nvm/versions/node/v14.15.0/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.10.0 - /Users/luke/.gem/ruby/2.6.0/bin/pod SDKs: iOS SDK: Platforms: iOS 14.2, DriverKit 20.0, macOS 11.0, tvOS 14.2, watchOS 7.1 Android SDK: API Levels: 29, 30 Build Tools: 28.0.3, 29.0.2, 30.0.2 System Images: android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom Android NDK: Not Found IDEs: Android Studio: 4.1 AI-201.8743.12.41.6953283 Xcode: 12.2/12B45b - /usr/bin/xcodebuild Languages: Java: 1.8.0_275 - /usr/bin/javac Python: 2.7.16 - /usr/bin/python npmPackages: @react-native-community/cli: Not Found react: 16.13.1 => 16.13.1 react-native: 0.63.3 => 0.63.3 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Description

If you set the disabled flag on the slider and run on iOS it will sometimes not set/unset the greyed out style. It appears to correctly set the style if you set disabled before first mount, however on an already mounted component setting the flag does not change the visual state (though it does stop it from being editable). Conversely if you have it disabled on mount and set it to disabled={false} after that it retains the disabled style until you change the value in the component.

Everything appears to work correctly in android.

Reproducible Demo

Initially disabled then re-enabled, doesn't change visual state until value changes.

Initially enabled, doesn't change visual state when disabled.

Below is my code for the above demo app.

const App: () => React$Node = () => {
  const [a, setA] = useState(true);
  const [b, setB] = useState(false);
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />
          {global.HermesInternal == null ? null : (
            <View style={styles.engine}>
              <Text style={styles.footer}>Engine: Hermes</Text>
            </View>
          )}
          <View style={styles.body}>
            <Slider
              disabled={a}
              value={0.5}
              style={{
                height: 30,
              }}
            />
            <Button onPress={() => setA(!a)} title="Toggle slider" />
            <Slider
              disabled={b}
              value={0.5}
              style={{
                height: 30,
              }}
            />
            <Button onPress={() => setB(!b)} title="Toggle slider" />
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

[Jason-Cooke]

This bug suddenly presented itself in v2.0.9 as well! So I'm guessing the underlying issue is react or react-native related, as I recently upgraded these packages.

[mosoakinyemi]

Hi @lukemcgregor 👋🏼. I'm closing this issue due to inactivity. Also, kindly check out this demo based off your code on Expo snack https://snack.expo.io/@mishael_akinyemi/5fd228 Seems to work fine.

[pinpong]

Hi, the example is not working on iOS. Seems the issue should open again.

[Noitham]

Agree, this issue is still reproducible. mosoakinyemi

[BartoszKlonowski]

Thank you for checking and for letting us know @pinpong @Noitham! I will reopen this and will investigate.

[espenjanson]

@BartoszKlonowski This is still a thing.

[BartoszKlonowski]

Hey, @espenjanson! Thanks! Of course it is, that is why this issue is still open. We are actively working on bugfixes, including that one, while transforming Slider project internally - this takes some time, so I hope for your patience.