callstack / react-native-slider Goto Github PK

Description

Yesterday, version 1.1.0 has been published but then reverted again. Still, npm lists 1.1.0 as the newest version and currently you manually need to pin to 1.0.4 to have it work.

Can you either increase the version of 1.0.4 or revoke 1.1.0 from npm?

Environment

System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-4690K CPU @ 3.50GHz
    Memory: 1.63 GB / 7.89 GB
  Binaries:
    Node: 11.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD

Description

When I try to build android app with command gradlew build, I get the following lint error.

Execution failed for task ':@react-native-community_slider:lint'.
> Lint found errors in the project; aborting build.

\node_modules\@react-native-community\slider\android\src\main\java\com\reactnativecommunity\slider\ReactSliderManager.java:68: Error: Value must be ? 0 (was -2) [Range]
              ViewGroup.LayoutParams.WRAP_CONTENT,
              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

https://github.com/react-native-community/react-native-slider/blob/master/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java#L68

Reproducible Demo

Run android app build with gradlew build command.

Environment

info 
  React Native Environment Info:
    System:
      OS: macOS 10.14.2
      CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
      Memory: 511.48 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 12.1.0 - /usr/local/bin/node
      Yarn: 1.16.0 - /usr/local/bin/yarn
      npm: 6.9.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 19, 20, 22, 23, 24, 25, 26, 27, 28
        Build Tools: 19.1.0, 22.0.1, 23.0.2, 23.0.3, 25.0.0, 25.0.2, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.2, 28.0.3
        System Images: android-23 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: 0.59.9 => 0.59.9 
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 1.3.0
      react-native-git-upgrade: 0.2.7
      react-native-rename: 2.3.2

Description

I have just upgraded from RN 0.57.7 to RN 0.59.9 and alongside it moved to this version of Slider due to the deprecation warnings. I noticed that my thumb image had stopped working on iOS, and after some debugging realised that if I commented out the thumbTintColor it would then use the image correctly. However, of course I need the tint for Android, so I've worked around it with a Platform.select, but this doesn't seem ideal.

Reproducible Demo

Broken:

    <Slider
      thumbTintColor={PRIMARY_COLOR}
      ...
      thumbImage={require('../../assets/images/icons/playback-position.png')}
    />

thumbImage doesn't render.

Working:

    <Slider
      thumbTintColor={Platform.select({ ios: null, android: PRIMARY_COLOR })}
      ...
      thumbImage={require('../../assets/images/icons/playback-position.png')}
    />

thumbImage renders.

Describe the Feature

thumbTouchSize is defined as a prop in the example in the README, but it's not defined anywhere in the JS code or the TS typings

Environment

System:
OS: macOS 10.14.5
CPU: (4) x64 Intel(R) Core(TM) i5-5287U CPU @ 2.90GHz
Memory: 30.62 MB / 8.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 11.6.0 - /usr/local/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 6.5.0-next.0 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
IDEs:
Android Studio: 3.3 AI-182.5107.16.33.5199772
Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.6 => 16.8.6
react-native: ^0.60.0 => 0.60.0
npmGlobalPackages:
create-react-native-app: 2.0.2
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Description

Installed latest react-native, react and i guess also the latest version of community-slider and this error shows up after the bundler finishes.
Again, the entire error shown is:

Component 'RNCSlider' re-registered direct event 'topSlidingComplete' as a bubbling event (red screen)

This issue was originally created by @bobber205 as facebook/react-native#23388.

🐛 Bug Report

The view that contains my Slider component is rgb(236,245,255)
I've set both minimumTrackTintColor and maximumTrackTintColor to rgb(236,245,255) as well.

As you can see in the attached screenshot there is always a slight grey shadow or gradient or something that is visible. My intention with setting the colors this way is to make a slider that is just under or above an image that gives the user more info on the value they are selecting.

Code Example

https://snack.expo.io/ry6ciFkS4

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: (4) x64 Intel(R) Core(TM) i5-5287U CPU @ 2.90GHz
Memory: 58.29 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.6.0 - /usr/local/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.5.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 26, 27, 28
Build Tools: 26.0.2, 27.0.3, 28.0.3
System Images: android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.3 => 16.6.3
react-native: 0.57.8 => 0.57.8

Is there anyway to prevent that VERY slight grey line?

Ask your Question

Just switched to this package. Getting this error on Android. The project itself builds fine. Testing on the real device. It was working fine with default react slider. The package is linked properly. What do I do wrong? How can I fix it?
Thanks

Env:
MacOS Mojave 10.14.5
react-native: 0.59.9
react: 16.8.6
@react-native-community/slider": "^1.1.3"

My code is:

    <RNCamera
            ref={ref => {
                this.camera = ref;
            }}
            style={{
                flex: 1,
            }}
            type={this.state.type}
            flashMode={this.state.flash}
            autoFocus={this.state.autoFocus}
            zoom={this.state.zoom}
            whiteBalance={this.state.whiteBalance}
            ratio={this.state.ratio}
            focusDepth={this.state.depth}
            permissionDialogTitle={'Permission to use camera'}
            permissionDialogMessage={'We need your permission to use your camera phone'}
            captureAudio={false}
        >
            <View
                style={{
                    flex: 0.4,
                    backgroundColor: 'transparent',
                    flexDirection: 'row',
                    alignSelf: 'flex-end',
                }}
            >
                <Slider
                    style={{width: 150, marginTop: 15, alignSelf: 'flex-end'}}
                    onValueChange={this.setFocusDepth.bind(this)}
                    step={0.1}
                    disabled={this.state.autoFocus === 'on'}
                />
            </View>

Describe the Feature

A prop to enable animating the movement of the Slider since just by updating the value it looks very "grainy" and is subpar for anything presentable

Possible Implementations

There is the same functionality in https://github.com/jeanregisser/react-native-slider and it works well for iOS, but for me disables the Slider when testing in debug mode on Android.

Environment

React Native Environment Info:
System:
OS: Windows 10
CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor
Memory: 21.67 GB / 31.94 GB
Binaries:
Yarn: 1.15.2 - C:\Users\Cheetahweb\AppData\Roaming\npm\yarn.CMD
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.3.0.0 AI-182.5107.16.33.5314842

Description

After installing react native slider with docs always gives me this error:

Could not determine the dependencies of task ':@react-native-community_slider:compileDebugAidl'.

Could not resolve all task dependencies for configuration ':@react-native-community_slider:debugCompileClasspath'.
Could not find androidx.appcompat:appcompat:28.0.0.
Required by:
project :@react-native-community_slider
Could not find androidx.appcompat:appcompat:28.0.0.
Required by:
project :@react-native-community_slider > com.facebook.react:react-native:0.59.5

-->

Environment

React Native Environment Info:
System:
OS: macOS 10.14.4
CPU: (4) x64 Intel(R) Core(TM) i5-4260U CPU @ 1.40GHz
Memory: 29.04 MB / 4.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.14.0 - /usr/local/bin/node
Yarn: 1.15.2 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
IDEs:
Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.1 => 16.6.1
react-native: 0.57.7 => 0.57.7
npmGlobalPackages:
react-native-cli: 2.0.1

Description

When I slide my slider I have a callback on onValueChange that calls the following method

private SliderValueChanged(value) {

   this.setState({ internalSliderValue: value });
 }

I have a text box that displays the internalSliderValue value.

When I drag the button and release far down the track the value slowly counts up or down to the indicated value.

how can I have it just calls the callback either the location of the nubbin, or the released point without going through every individual point?

On android it seems to work as I expect, on my iphone 5s I see this slow behaviour. Tho my android phone is a lot newer so I am not sure it is not just doing things faster.

Slider setup

```

          <Slider
            step={1}
            style={{ width: "90%" }}
            value={slider.sliderStartValue}
            onValueChange={val => this.SliderValueChanged(val)}
            onSlidingComplete={val =>
              (CalculatorStore.calculatorValues.sliderValue = val)
            }
            maximumValue={slider.sliderMaxValue}
            thumbTintColor="rgb(252, 228, 149)"
            minimumTrackTintColor="#FF0000"
            maximumTrackTintColor="#206F98"
          />

This issue was originally created by @ssg-luke as facebook/react-native#9979.

Issue Description

Hard crash randomly and unexpectedly on Android release version only (debug is fine, iOS is fine on both debug and release) when hiding and displaying sliders based on a state variable.

Steps to Reproduce / Code Snippets

We have a number of photo filters in our app which are selected by <TouchableOpacity> components and some have a slider to adjust the blur or brightness etc. These sliders are completely separate from each other and are displayed based on a string stored in the components state called filter.

Here is one such slider from render():

{filter === 'gamify' && ( <View style={styles.filterSlider}> <Text>How retro do you want to go?</Text> <Slider value={this.state.pixelSize} minimumValue={1} maximumValue={5} onValueChange={value => this.setState({pixelSize: value})} /> </View>)}

Expected Results

No crash when hiding and displaying sliders

Stack Trace

java.lang.NullPointerException: Attempt to write to field 'java.util.ArrayList android.animation.AnimatorSet$Node.nodeDependents' on a null object reference

http://pastebin.com/270Wg6Pu

Additional Information

• React Native version: 0.33
• Platform(s) (iOS, Android, or both?): Android (Release only)
• Operating System (macOS, Linux, or Windows?): Mac OSX

Environment

Description

Reproducible Demo

Ask your Question

Build file '/Users/name/project/node_modules/@react-native-community/slider/android/build.gradle' line: 40

* What went wrong:
A problem occurred evaluating project ':react-native-community-slider'.
> Cannot get property 'supportLibVersion' on extra properties extension as it does not exist

I've never used supportLibVersion in my setup and have no idea how to use it now correctly. Can you please provide some help by explanation?

is there a way to replace handle with custom layout

Ask your Question

Does this work with an expo app or do i have to eject?

We should cover this component with unit/e2e tests.
I think with a free plan of CircleCI, we won't be able to run everything on the remote container (building ios, etc.), but at least some checks should be invoked there.

We can think of implementing the native/e2e tests but run them only locally.

Describe the Feature

It would be useful to have a prop onSlidingStart that act like onSlidingComplete with a callback but for when the slider starts instead. This library has this feature: https://github.com/jeanregisser/react-native-slider

Possible Implementations

<Slider onSlidingStart={() => console.log("start")} />

Environment

React Native Environment Info:
System:
OS: macOS 10.14.3
CPU: (4) x64 Intel(R) Core(TM) i5-5287U CPU @ 2.90GHz
Memory: 42.91 MB / 8.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 11.8.0 - ~/.nvm/versions/node/v11.8.0/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.5.0 - ~/.nvm/versions/node/v11.8.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 23, 24, 25, 26, 27, 28
Build Tools: 23.0.1, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 27.0.3, 28.0.0, 28.0.2, 28.0.3
System Images: android-23 | Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.3 AI-182.5107.16.33.5199772
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.0 => 0.59.0

Description

When install slider as a pod, process aborting because of following:

[!] The `react-native-slider` pod failed to validate due to 3 errors:
    - ERROR | attributes: Missing required attribute `authors`.
    - WARN  | attributes: Missing required attribute `license`.
    - ERROR | attributes: Missing required attribute `homepage`.
    - ERROR | attributes: Missing required attribute `summary`.
    - WARN  | license: Missing license type.

Reproducible Demo

1. yarn add @react-native-community/slider
2. add pod 'react-native-slider', :path => '../node_modules/@react-native-community/slider' to Podfile
3. pod install

Environment

info
  React Native Environment Info:
    System:
      OS: macOS 10.14.5
      CPU: (8) x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz
      Memory: 567.39 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.4.0 - ~/.nvm/versions/node/v8.4.0/bin/node
      npm: 6.3.0 - ~/.nvm/versions/node/v8.4.0/bin/npm
      Watchman: 4.7.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
      Android SDK:
        API Levels: 19, 23, 25, 26, 27, 28
        Build Tools: 23.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.1, 27.0.3, 28.0.3
        System Images: android-19 | Intel x86 Atom, android-22 | Google APIs Intel x86 Atom, android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-26 | Google APIs Intel x86 Atom, android-26 | Google Play Intel x86 Atom, android-27 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.3 AI-182.5107.16.33.5264788
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.3 => 16.6.3
      react-native: ^0.59.3 => 0.59.3
    npmGlobalPackages:
      create-react-native-app: 2.0.2
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Description

I've installed react-native-slider and on iOS works without problem, in Android I've got this error:

/Users/Mattia/Documents/Projects/Line/RideMe/Mobile/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java:19: error: cannot find symbol
import com.facebook.react.uimanager.ReactShadowNodeImpl;
                                   ^
  symbol:   class ReactShadowNodeImpl
  location: package com.facebook.react.uimanager
/Users/Mattia/Documents/Projects/Line/RideMe/Mobile/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java:26: error: package com.facebook.yoga does not exist
import com.facebook.yoga.YogaMeasureFunction;
                        ^
/Users/Mattia/Documents/Projects/Line/RideMe/Mobile/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java:27: error: package com.facebook.yoga does not exist
import com.facebook.yoga.YogaMeasureMode;
                        ^
/Users/Mattia/Documents/Projects/Line/RideMe/Mobile/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java:28: error: package com.facebook.yoga does not exist
import com.facebook.yoga.YogaMeasureOutput;
                        ^
/Users/Mattia/Documents/Projects/Line/RideMe/Mobile/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java:29: error: package com.facebook.yoga does not exist
import com.facebook.yoga.YogaNode;
                        ^
/Users/Mattia/Documents/Projects/Line/RideMe/Mobile/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java:44: error: cannot find symbol
      YogaMeasureFunction {
      ^
  symbol:   class YogaMeasureFunction
  location: class ReactSliderManager
/Users/Mattia/Documents/Projects/Line/RideMe/Mobile/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java:60: error: cannot find symbol
        YogaNode node,
        ^
  symbol:   class YogaNode
  location: class ReactSliderShadowNode
/Users/Mattia/Documents/Projects/Line/RideMe/Mobile/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java:62: error: cannot find symbol
        YogaMeasureMode widthMode,
        ^
  symbol:   class YogaMeasureMode
  location: class ReactSliderShadowNode
/Users/Mattia/Documents/Projects/Line/RideMe/Mobile/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java:64: error: cannot find symbol
        YogaMeasureMode heightMode) {
        ^
  symbol:   class YogaMeasureMode
  location: class ReactSliderShadowNode
/Users/Mattia/Documents/Projects/Line/RideMe/Mobile/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java:55: error: incompatible types: ReactSliderShadowNode cannot be converted to MeasureFunction
      setMeasureFunction(this);
                         ^
/Users/Mattia/Documents/Projects/Line/RideMe/Mobile/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java:58: error: method does not override or implement a method from a supertype
    @Override
    ^
/Users/Mattia/Documents/Projects/Line/RideMe/Mobile/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java:76: error: cannot find symbol
      return YogaMeasureOutput.make(mWidth, mHeight);
             ^
  symbol:   variable YogaMeasureOutput
  location: class ReactSliderShadowNode
/Users/Mattia/Documents/Projects/Line/RideMe/Mobile/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderEvent.java:26: error: no suitable constructor found for Event(int)
    super(viewId);
    ^
    constructor Event.Event() is not applicable
      (actual and formal argument lists differ in length)
    constructor Event.Event(int,long) is not applicable
      (actual and formal argument lists differ in length)
/Users/Mattia/Documents/Projects/Line/RideMe/Mobile/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSlidingCompleteEvent.java:25: error: no suitable constructor found for Event(int)
        super(viewId);
        ^
    constructor Event.Event() is not applicable
      (actual and formal argument lists differ in length)
    constructor Event.Event(int,long) is not applicable
      (actual and formal argument lists differ in length)
/Users/Mattia/Documents/Projects/Line/RideMe/Mobile/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSlidingStartEvent.java:25: error: no suitable constructor found for Event(int)
        super(viewId);
        ^
    constructor Event.Event() is not applicable
      (actual and formal argument lists differ in length)
    constructor Event.Event(int,long) is not applicable
      (actual and formal argument lists differ in length)
Note: /Users/Mattia/Documents/Projects/Line/RideMe/Mobile/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java uses unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
Note: Some messages have been simplified; recompile with -Xdiags:verbose to get full output
15 errors

FAILURE: Build failed with an exception.

Reproducible Demo

This is my gradle

buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 23
        compileSdkVersion = 27
        targetSdkVersion = 8
        supportLibVersion = "27.0.1"
        googlePlayServicesVersion = "16.+"
        playServicesVersion = "17.+"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.3.0'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        google()
        jcenter()
    }
}

wrapper {
    gradleVersion = '4.4'
    distributionUrl = distributionUrl.replace("bin", "all")
}

How to add a secondary progress for showing buffering stream media?

We should fix detox tests as soon as they introduce RN 0.60 support, for now, I'll disable them in the RC build.

in past version that depricated we have two property trackStyle and thumbStyle , but in this version of react-native-slider we have not this feature !! what do i for change thumb and track style ? :((

Describe the Feature

Same slider but for vertical orientation
Is it supported?

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14.5
      CPU: (8) x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz
      Memory: 1.16 GB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 11.14.0 - ~/.nvm/versions/node/v11.14.0/bin/node
      Yarn: 1.15.2 - ~/.yarn/bin/yarn
      npm: 6.9.0 - ~/.nvm/versions/node/v11.14.0/bin/npm
      Watchman: 3.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
      Android SDK:
        API Levels: 23, 24, 25, 26, 27, 28
        Build Tools: 23.0.1, 23.0.2, 23.0.3, 24.0.0, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.1, 27.0.2, 27.0.3, 28.0.3
        System Images: android-19 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-24 | Google APIs Intel x86 Atom, android-25 | Google Play Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-26 | Google Play Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.4 AI-183.6156.11.34.5522156
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3
      react-native: 0.59.8 => 0.59.8
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Description

When maximumTintColor matches minimumTintColor, Android overrides the colour setting and makes maximumTintColor lighter than minimumTintColor.

Also, something like below will be ignored as it appears that Android likes to paint a more visible shade on the minimum side.

{ minimumTrackTintColor: 'rgba(255,255,255,0.1)', maximumTrackTintColor: 'rgba(255,255,255,0.4)' }

Environment

System:
OS: macOS 10.14.5
CPU: (4) x64 Intel(R) Core(TM) i5-5287U CPU @ 2.90GHz
Memory: 73.84 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.13.0 - /var/folders/11/4dsnq9p12xx9s0lt7l20fbfh0000gq/T/yarn--1563831095058-0.9824635078112827/node
Yarn: 1.15.2 - /var/folders/11/4dsnq9p12xx9s0lt7l20fbfh0000gq/T/yarn--1563831095058-0.9824635078112827/yarn
npm: 6.7.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
Android SDK:
API Levels: 26, 27, 28
Build Tools: 26.0.2, 27.0.3, 28.0.3
System Images: android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.3 AI-182.5107.16.33.5314842
Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
npmPackages:
@react-native-community/cli: ^2.7.0 => 2.7.0
react: 16.8.6 => 16.8.6
react-native: 0.60.4 => 0.60.4

Description

This isn't a AndroidX compatible package. AFAIK React native 0.60 + requires you to use AndroidX.

Reproducible Demo

N/A

I want change slider between integer number.
How can I do that?

When a new Slideer is created, it is created inside a view and I can see an space before and after the slider (just set backgroundColor='red' on the style)

This is quite annoying in order to make it if with other components as the slider is always a bit smaller

Is this done in purpose? Can those spaces (padding or margin) be removed and make the bar use 100%

I tried setting the padding, margin, left, right to 0, but nothing...

Environment

System:
OS: macOS 10.14.4
CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
Memory: 1.13 GB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v8.12.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
Android SDK:
API Levels: 22, 23, 26, 27, 28
Build Tools: 23.0.1, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.0, 28.0.2, 28.0.3, 29.0.1
System Images: android-22 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-26 | Google Play Intel x86 Atom, android-27 | Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5692245
Xcode: 10.3/10G8 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.60.3 => 0.60.3

Description

Not sure if this is a regression or even if it's new to this new community edition. But I noticed on iOS when I set the tint color of the thumb, it'll pull the slider to the right slightly.

Ignore the tick marks, that's my own doing and not related.

Reproducible Demo

<Slider thumbTintColor={'orange'} />

vs

<Slider />

Environment

Description

[!] /usr/bin/git clone https://github.com/react-native-community/react-native-slider.git /var/folders/74/djpw5tk1149dvyhglpjv1s0h0000gn/T/d20190510-55204-rxuuor --template= --single-branch --depth 1 --branch 1.1.1

Cloning into '/var/folders/74/djpw5tk1149dvyhglpjv1s0h0000gn/T/d20190510-55204-rxuuor'...
warning: Could not find remote branch 1.1.1 to clone.
fatal: Remote branch 1.1.1 not found in upstream origin

Reproducible Demo

Describe the Feature

We are missing e2e tests for this module. Ideally with detox. I guess we can start from scaffolding detox and some primitive tests, potentially extend it in the future.

Possible Implementations

• Install & set-up https://github.com/wix/Detox
• Add scripts, ideally reflect what's done in https://github.com/react-native-community/react-native-netinfo/blob/master/package.json#L27-L37
• Run detox on CI

Related Issues

N/A

Environment Android only

info
React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: (4) x64 Intel(R) Core(TM) i7-2640M CPU @ 2.80GHz
Memory: 568.49 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.3 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 5.6.0 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
API Levels: 23, 25, 26, 27, 28
Build Tools: 23.0.1, 23.0.2, 23.0.3, 25.0.3, 26.0.2, 26.0.3, 27.0.3, 28.0.2, 28.0.3
System Images: android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-24 | Google Play Intel x86 Atom, android-27 | Intel x86 Atom_64, android-28 | Android TV Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom_64
IDEs:
Android Studio: 3.1 AI-173.4907809
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.9 => 0.59.9
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Description

Android Build faild if run react-native run-android.Also change react-native-slider version v1.1.3 ,v1.1.2 and v1.1.1

build error Error

Configure project :react-native-webview
WARNING: The following project options are deprecated and have been removed:
android.enableAapt2
This property has no effect, AAPT2 is now always used.

:react-native-webview:reactNativeAndroidRoot /Users/apple/Desktop/development/app/64bit/node_modules/react-native/android

Task :@react-native-community_slider:compileDebugJavaWithJavac FAILED
/Users/apple/Desktop/development/app/64bit/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSlider.java:11: error: package android.support.v7.widget does not exist
import android.support.v7.widget.AppCompatSeekBar;
^
/Users/apple/Desktop/development/app/64bit/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSlider.java:23: error: cannot find symbol
public class ReactSlider extends AppCompatSeekBar {
^
symbol: class AppCompatSeekBar
/Users/apple/Desktop/development/app/64bit/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSlider.java:60: error: cannot find symbol
super.setStateListAnimator(null);
^
symbol: variable super
location: class ReactSlider
/Users/apple/Desktop/development/app/64bit/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSlider.java:88: error: cannot find symbol
if (seekBarProgress == getMax()) {
^
symbol: method getMax()
location: class ReactSlider
/Users/apple/Desktop/development/app/64bit/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSlider.java:99: error: cannot find symbol
setMax(getTotalSteps());
^
symbol: method setMax(int)
location: class ReactSlider
/Users/apple/Desktop/development/app/64bit/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSlider.java:105: error: cannot find symbol
setProgress((int) Math.round((mValue - mMinValue) / (mMaxValue - mMinValue) * getTotalSteps()));
^
symbol: method setProgress(int)
location: class ReactSlider
/Users/apple/Desktop/development/app/64bit/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java:37: error: type argument ReactSlider is not within bounds of type-variable T
public class ReactSliderManager extends SimpleViewManager {
^
where T is a type-variable:
T extends View declared in class SimpleViewManager
/Users/apple/Desktop/development/app/64bit/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java:66: error: incompatible types: ReactSlider cannot be converted to SeekBar
SeekBar reactSlider = new ReactSlider(getThemedContext(), null, STYLE);
^
/Users/apple/Desktop/development/app/64bit/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java:88: error: incompatible types: SeekBar cannot be converted to ReactSlider
((ReactSlider) seekbar).toRealProgress(progress),
^
/Users/apple/Desktop/development/app/64bit/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java:98: error: incompatible types: SeekBar cannot be converted to ReactSlider
((ReactSlider) seekbar).toRealProgress(seekbar.getProgress())));
^
/Users/apple/Desktop/development/app/64bit/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java:107: error: incompatible types: SeekBar cannot be converted to ReactSlider
((ReactSlider) seekbar).toRealProgress(seekbar.getProgress())));
^
/Users/apple/Desktop/development/app/64bit/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java:133: error: cannot find symbol
view.setEnabled(enabled);
^
symbol: method setEnabled(boolean)
location: variable view of type ReactSlider
/Users/apple/Desktop/development/app/64bit/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java:138: error: cannot find symbol
view.setOnSeekBarChangeListener(null);
^
symbol: method setOnSeekBarChangeListener()
location: variable view of type ReactSlider
/Users/apple/Desktop/development/app/64bit/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java:140: error: cannot find symbol
view.setOnSeekBarChangeListener(ON_CHANGE_LISTENER);
^
symbol: method setOnSeekBarChangeListener(OnSeekBarChangeListener)
location: variable view of type ReactSlider
/Users/apple/Desktop/development/app/64bit/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java:161: error: cannot find symbol
view.getThumb().clearColorFilter();
^
symbol: method getThumb()
location: variable view of type ReactSlider
/Users/apple/Desktop/development/app/64bit/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java:163: error: cannot find symbol
view.getThumb().setColorFilter(color, PorterDuff.Mode.SRC_IN);
^
symbol: method getThumb()
location: variable view of type ReactSlider
/Users/apple/Desktop/development/app/64bit/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java:169: error: cannot find symbol
LayerDrawable drawable = (LayerDrawable) view.getProgressDrawable().getCurrent();
^
symbol: method getProgressDrawable()
location: variable view of type ReactSlider
/Users/apple/Desktop/development/app/64bit/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java:180: error: cannot find symbol
LayerDrawable drawable = (LayerDrawable) view.getProgressDrawable().getCurrent();
^
symbol: method getProgressDrawable()
location: variable view of type ReactSlider
/Users/apple/Desktop/development/app/64bit/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java:191: error: cannot find symbol
view.setOnSeekBarChangeListener(ON_CHANGE_LISTENER);
^
symbol: method setOnSeekBarChangeListener(OnSeekBarChangeListener)
location: variable view of type ReactSlider
Note: /Users/apple/Desktop/development/app/64bit/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java uses unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
19 errors

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':@react-native-community_slider:compileDebugJavaWithJavac'.

Compilation failed; see the compiler error output for details.

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

• Get more help at https://help.gradle.org

Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/5.4.1/userguide/command_line_interface.html#sec:command_line_warnings

Reproducible Demo

yarn add @react-native-community/slider
react-native link @react-native-community/slider
react-native run-android

Environment

Description

Reproducible Demo

I already installed it and import it but this error shows
"Native Component for "RNCSlider" does not exist."

Environment

Using react-native-web unfortunately so can't get diagnostics.

Description

Component explodes app with this error:

./node_modules/@react-native-community/slider/js/Slider.js
SyntaxError: /app/node_modules/@react-native-community/slider/js/Slider.js: Unexpected token (17:12)

  15 | const RCTSliderNativeComponent = require('./RNCSliderNativeComponent');
  16 | 
> 17 | import type {NativeComponent} from 'react-native/Libraries/Renderer/shims/ReactNative';
     |             ^
  18 | import type {ImageSource} from 'react-native/Libraries/Image/ImageSource';
  19 | import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
  20 | import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheetTypes';

Reproducible Demo

I can add if required but it looks like the flow types are tripping up, so should be easy to test on any react-native typescript project.

Environment

RN 0.59.1
Plugin V : latest
Platform : iOS

Description

Run into production mode appears this issue

Reproducible Demo

Ask your Question

Is the prop thumbImage support @2x @3x,
and it will choice the right image automatic.

Or is there something like thumbStyle could define the style of thumb

Describe the Feature

It would be great to allow the option to customize the thickness of the slider bar itself. Something like a thickness prop.

I want to use the slider as a video progress bar. On youtube for example, the progress bar has a zone that shows how much of the video is already loaded in memory.

Is there a way to add a zone of a different color at the right of the thumb, that would represent the section of the video being loaded at a specific time?

See the image bellow for a better understanding:

I updated to the latest npm and the androidx support has caused quite a few issues. It seems that I have to change my root supportLibVersion to 1.0.2 to get slider to work but this caused ripple effects down my app causing other module (react-native-communit netinfo) to not find the support.v4.net library.

Did I miss a step somewhere or is react native not quite ready for modules to require the root version to be androidx.

Describe the Feature

I'd like to automate the publishing process with semantic-release. It should be done after #33 is closed.

Possible Implementations

• Install semantic-release
• Run scripts on CI

Related Issues

#33

...
<Slider
    style={styles.scheduleBar}
    minimumValue={0}
    maximumValue={120}
    minimumTrackTintColor="#FFFFFF"
    maximumTrackTintColor="#000000"
    thumbImage={'../styles/dark/dot.png'}
    step={1}
 />
...

How to adjust the size of the thumb button，I checked the issue and found no useful information. Now it works on my page, but the thumb button is too big and looks very ugly

Describe the Feature

Native Events instead of js events:
onValueChange
onSlidingStart
onSlidingComplete

Possible Implementations

Supporting native events will unlock the abilities of Animated.event enabling tracking the Slider's value and animating stuff accordingly.
This will enable customizing this view to a large extent easily and with high performance.

Avoiding breaking changes can be achieved with a flag from props or by checking typeof props.onValueChange === 'object'

.

Android JS Impl

Uses Slider for value and renders the rest on top.
Native events will enhance this extremely and make dev experience easier (less code needed for customization)

Related Issues

Describe the Feature

The slider works but in LTR on RTL forced apps. It would be great to support RTL.

Environment

info
React Native Environment Info:
System:
OS: macOS 10.14.4
CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
Memory: 53.64 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.1 - /usr/local/bin/node
Yarn: 1.10.1 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
Android SDK:
API Levels: 23, 25, 26, 27, 28
Build Tools: 23.0.1, 23.0.3, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.1, 27.0.2, 27.0.3, 28.0.3
System Images: android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.1 AI-173.4819257
Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.1 => 0.59.1
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1
react-native-create-library: 3.1.2
react-native-git-upgrade: 0.2.7
svg-to-react-native-cli: 0.0.3

Description

Different behavior between android with iOS

[Android]
When you press slider the value is changed.

[iOS]
When you press slider there is no reaction.

I want to change sliders value on press just same as android.

Description

Hi, I've tried to rotate the slider to vertical using "transform:rotate" and it show me this. I've tested this on Samsung Galaxy S7 edge on Android Nougat.

Any thoughts about why this is happening?

Reproducible Demo

Describe the Feature

Right now we only have one "grip" option. It would be nice to have multiple grips. Two would be a good start.

Possible Implementations

For Android probably this one - https://github.com/apptik/MultiSlider

For iOS probably this one - https://github.com/yonat/MultiSlider

Related Issues

Describe the Feature

Add support for thumbStyle to allow customizing the thumb shape, colour and size. Relying on an image per style can be quite limiting for simple changes. If implemented, this could make thumbTintColor obsolete.

Describe the Feature

A values props that takes an array of discrete values and only allows the slider to go through those values, e.g. see this jquery widget.

Possible Implementations

Not sure yet. Going to look into it and add it. Would you be interested in a pull request?

Related Issues

None

Running yarn add @react-native-community/slider pulls down the broken version ^1.1.0 even though a later commit reverts the change back to 1.0.4.

Suggest bumping to 1.1.1 or similar to keep moving forward even if the code is the same as 1.0.4 under the hood, as I guess our dependency tools just ain't that smart.

As an aside "@react-native-community/slider": "https://github.com/react-native-community/react-native-slider.git#ede6b7378c06b6ff607d3f51d7d4454b314119e3", in my package.json works fine.