Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Setting disabled on iOS sometimes does not set disabled style

See original GitHub issue

Environment

System: OS: macOS 11.0.1 CPU: (12) x64 Intel® Core™ 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.

ezgif-3-32417a5496fe

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

ezgif-3-b1e8737e1ffc

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