Slider does not work on Expo apps

[ahmedu007]

🐛 Bug Report

Trying to use react-native-slider and it doesn't work, neither on Android nor iOS.

Environment

Expo CLI 2.18.2 environment info:
    System:
      OS: macOS High Sierra 10.13.6
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.13.0 - /usr/local/bin/node
      Yarn: 1.12.3 - /usr/local/bin/yarn
      Watchman: 4.9.0 - /usr/local/bin/watchman
    IDEs:
      Android Studio: 3.3 AI-182.5107.16.33.5199772
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      expo: ^32.0.6 => 32.0.6 
      react: 16.5.0 => 16.5.0 
      react-native: https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz => 0.57.1 
      react-navigation: ^3.5.1 => 3.5.1 

create-react-native-app Android and iOS bug

Steps to Reproduce

• Create a fresh repo using create-react-native-app testApp.

• install slider yarn add @react-native-community/slider

• import it in the file as per the documentation

import Slider from '@react-native-community/slider';

  <Slider
    style={{width: 200, height: 40}}
    minimumValue={0}
    maximumValue={1}
    minimumTrackTintColor="#FFFFFF"
    maximumTrackTintColor="#000000"
  />

• run it using yarn ios or yarn android

Expected Behavior

Expecting it to work and show a slider on the page

Actual Behavior

App crashes with the error:

Invariant Violation: requireNativeComponent: "RNCSlider" was not found in the UIManager.

This error is located at:
    in RNCSlider (at Slider.js:247)
    in RCTView (at View.js:44)
    in App (at withExpoRoot.js:22)
    in RootErrorBoundary (at withExpoRoot.js:21)
    in ExpoRootComponent (at renderApplication.js:34)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AppContainer (at renderApplication.js:33)

Reproducible Demo

https://snack.expo.io/@umair170/funny-donut

I've also tried this in a bare react-native init test project and I can confirm it works out of the box, following the instructions

[cruzach]

Hi @ahmedu007! Unfortunately, CRNA and managed Expo projects can't make use of custom native code (you read that in the CRNA docs).

I suggest using the bare workflow (just tested it out and works 👍, read about bare here), and also you're better off using the Expo-CLI as CRNA is deprecated

[emac3]

Hi @cruzach , I came across the same issue using expo client on iOS simulator. Is there any way I can possibly use react-native-slider with your client (no react-native run-ios, just expo start and then run on simulator). Thanks

[cruzach]

Yes you can, just follow the instructions in their readme

[emac3]

@cruzach the repo mentioned by @ahmedu007 is this one though: https://github.com/react-native-community/react-native-slider

[cruzach]

Ah you're right @emac3, sorry for my misunderstanding.

Unfortunately, you can't use that library in the managed workflow (which means you can't use it in the iOS Expo Client)

[VincentCharpentier]

https://docs.expo.io/versions/latest/react-native/slider/

Deprecated. Use react-native-community/react-native-slider instead.

@cruzach Do you mean that with expo managed apps we need to stick to the deprecated slider or is there a better alternative ?

[cruzach]

For now, yes, you'll have to remain using the deprecated React Native version (unless you move to the bare workflow)

[tsunammis]

@cruzach is there a plan to integrate it into the managed workflow?

[misraelson]

This is a problem as the deprecated slider used in Expo apps has issues on iOS 13 and there is currently no way for managed Expo apps to use the react-native-community slider. Any idea on when the independent react-native-community slider package will be integrated into Expo?

[misraelson]

callstack/react-native-slider#109

[cruzach]

I made a snack to test this on my iphone (iOS 13), and didn't see that behavior -> https://snack.expo.io/@charliecruzan/slider-example

If you do see that behavior, can you open a new issue with a repro?

[taneba]

@cruzach
That behavior appears once you set step props like this

        <Slider
          value={this.state.value}
          onValueChange={value => this.setState({ value })}
          minimumValue={0}
          maximumValue={3}
          step={1}
        />

[cruzach]

@taneba issue seems to occur whenever step != 0. I'll create a new issue for this #6305

[gridphp]

Instead of RNC slider:
import Slider from '@react-native-community/slider';

I tried https://github.com/jeanregisser/react-native-slider and it worked great:
import Slider from 'react-native-slider';