Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sliders with a Negative Min and Max Values are assigned '0' as Max value #418

Open
mcampbellxperi opened this issue Aug 16, 2022 · 3 comments
Assignees
Labels
bug report Something isn't working platform: Windows Issue related to Windows platform

Comments

@mcampbellxperi
Copy link

Environment

info Fetching system and libraries information...
System:
OS: Windows 10 10.0.19044
CPU: (16) x64 Intel(R) Core(TM) i7-10700 CPU @ 2.90GHz
Memory: 19.72 GB / 31.78 GB
Binaries:
Node: 14.17.4 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.14 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
AllowAllTrustedApps: Enabled
Versions: 10.0.18362.0, 10.0.19041.0
IDEs:
Android Studio: Not Found
Visual Studio: 16.11.31605.320 (Visual Studio Professional 2019)
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 18.0.0 => 18.0.0
react-native: 0.69.0 => 0.69.0
react-native-windows: 0.69.5 => 0.69.5
npmGlobalPackages:
react-native: Not Found

Description

I'm working on a React Native Windows project running the latest version of "@react-native-community/slider": "^4.3.0". We don't support iOS or Android so I can't replicate for those platforms.

We have some sliders that work with wholey negative ranges, an example being (-102, -86).

When initally rendered, the slider has a range of (-102, 0), instead of the given range (-102, -86).

In development mode I can change the max value and the range will render correctly, so this seems to be an issue with the inital render.

See below video:

React.Native.Slider.Negative.Max.Defaults.0.mp4

Reproducible Demo

import Slider from '@react-native-community/slider';
import React, { useState } from 'react';
import {
  SafeAreaView,
  Text,
} from 'react-native';

const App = () => {
  const [valueText, setValueText] = useState(-86)

  return (
    <SafeAreaView style={{flexDirection:'row', justifyContent: 'center'}}>
      <Slider
        minimumValue={-102}
        maximumValue={-86}
        value={-86}
        style={{width: 300, height:100}}
        onValueChange={setValueText}
      />
      <Text>{valueText}</Text>

    </SafeAreaView>
  );
};

export default App;
@mcampbellxperi mcampbellxperi added the bug report Something isn't working label Aug 16, 2022
@BartoszKlonowski BartoszKlonowski added the platform: Windows Issue related to Windows platform label Aug 16, 2022
@BartoszKlonowski BartoszKlonowski self-assigned this Aug 16, 2022
@BartoszKlonowski
Copy link
Member

Well reported, thank you, @mcampbellxperi!
I will work on this.

@BartoszKlonowski
Copy link
Member

@mcampbellxperi Yes, this is an issue with the initial render only, however this is a known bug on the WinRT side, which states that when maximum value is set after the minimum value the maximum value set will be ignored and forced to be 0.
More about that can be found in WinRT docs page: Binding Minimum and Maximum values.

I will try to do something about it, or try to consult with other teams about some solutions, sorry for inconvenience and thank you for your patience.

@mcampbellxperi
Copy link
Author

@BartoszKlonowski Thank you for the update, interesting read from the WinRT docs.

In the meantime I might try and hook in a useEffect into my Slider wrapper component that performs the post render fix that I demonstrated in the example. It should keep me moving while we wait for a fix.

Thank you for your hard work!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug report Something isn't working platform: Windows Issue related to Windows platform
Projects
Status: To be analyzed
Development

No branches or pull requests

2 participants