simformsolutionspvtltd / react-native-radial-slider Goto Github PK

It seems there is a problem inside of component with "stale closure". I`am use the function to provide to onComplete:

const onSlidingComplete = (newValue: number) =>  {
      if (intervalId.current) clearInterval(intervalId.current);
      const [ instance, value ] = [DEVICE_COMMANDS_INSTANCE.TEMP_SP, newValue] 
      const command = constructorService.commandModify(instance, value, device.deviceType)
      console.log(device.state?.fan_speed)
      deviceService.sendCommandAndUpdateState(
        { state: { ...device.state!, temp_sp: newValue}, command },localDevice, dispatch)
      intervalId.current = deviceService.stateUpdateInterval(device._id,localDevice, dispatch , 8000)
}

"device" - object i am getting from the props or from selector
const device = useSelector(getDeviceInfo(id), _.isEqual)
The problem is: when i call onSlidingComplete - function, the device.state has an old state, even, i a checked by console.log(device.state) in the compopent and device.state in the function on onSlidingComplete - there are different values.

The problem is, that i change state of temperature in CircleSlider, trying to update main state

 { state: { ...device.state!, temp_sp: newValue}

but if change in another component, for example device.state.fan_speed - device.state inside of onSlidingComplete didnt know about that..

If i use some standard sliders from react-native - all work fine.

@mukesh-simform @parth-simform
I want to change slider thumb position(value) on TextInput onTextChange but unable to do this.

const [avalue, setValue] = useState(0);

  <RadialSlider
    value={avalue} // passing the updated state value is not working.
    min={0}
    max={200}
    onChange={(v)=>console.log(">>>",v)} // onChange not even calling when updating value from text input.
  />
  <TextInput
    style={{
      width: 200,
      height: 50,
      borderColor: 'blue',
      borderRadius: 4,
      borderWidth: 1,
      marginBottom:10
    }}
    value={String(avalue)}
    placeholder="Amount"
    onChangeText={(v)=> setValue(Number(v))}></TextInput>

</View>

App Crashes/Freezes or Collapses when we use large values like 1000000 and 100000000.

Hi, can you fix it for future releases?

 ERROR  Warning: RadialSlider: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
  in RadialSlider (created by RootSlider)

The library is working very well. thank you . But I have a problem. I will explain it while looking at the code below.

`const Dial = () => {

const [temp, setTemp] = useState(0);
const hum = 10;
const time = "08:10";
console.log(temp,"temp")
const increase = () => {
setTemp(temp + 5);
};

const decrease = () => {
setTemp(temp => temp - 5); // speed 상태값을 5 감소시킵니다.
};

return(
<>

<Image
source={require("./assets/image/settingView/tempView.png")}
resizeMode="contain"
style={styles.tempIcon}/>
{temp}°C
<Image
source={require("./assets/image/settingView/humView.png")}
resizeMode="contain"
style={styles.tempIcon}/>
{hum}%
<Image
source={require("./assets/image/settingView/timeView.png")}
resizeMode="contain"
style={styles.tempIcon}/>
{time}



<Image
source={require('./assets/image/settingView/minusButton.png')}
resizeMode="center"
style={styles.decreaseButton}/>

<View style={{width:100,height:30,position:"absolute",marginTop:-70}}>
<Text style={{marginLeft:30,fontSize:20, color:"black",fontWeight:"500"}}>40°C

<View style={{width:470,height:30,position:"absolute",marginTop:90,marginRight:0}}>
<Text style={{fontSize:20, color:"black",fontWeight:"500", marginLeft:50}}>20°C

<View style={{width:500,height:30,position:"absolute",marginTop:90}}>
<Text style={{fontSize:20, color:"black",fontWeight:"500",marginLeft:400}}>80°C

<RadialSlider props={temp}
style={styles.mainCircle}
step={3}
variant={'radial-circle-slider'}
value={temp}
valueStyle={{fontSize:60,color:"black",alignItems:"center",justifyContent:"center", marginTop:20}}
min={10}
max={80}
onChange={setTemp}
radius={123}
isHideSubtitle={Boolean}
isHideTitle={Boolean}
unit={'°C'}
unitStyle={{marginLeft:0,fontWeight:"bold",marginTop:35}}
thumbColor={'#FF7345'}
thumbRadius={11}
thumbBorderWidth={5}
sliderWidth={7}
linearGradient ={[ { offset: '0%', color:'#FFD76F' },
{ offset: '100%', color: '#FF7345' }]}
/>


<Image
source={require('./assets/image/settingView/plusButton.png')}
resizeMode="center"
style={styles.increaseButton}/>


</>
);
};`

I want to make it possible to change the value (temp) of RadialSlider with the function increase discrease. However, when I take a log, there is a phenomenon that temp has changed but re-rendering does not work. Is there a way to solve this? No matter how I look at it, I don't know how to do it, so please help me!

Hello guys, first of all, thank you very much for all the effort creating this library.

Currently there is no variant of the slider to use as a range field which is very useful for many scenarios, so I would like to know if you have in mind at some point adding this functionality or if it could be a good contribution for a PR?

e.g.

Could you please add option for slider track color to use Linear Gradient as well. It will be useful for controlling a temperature, for instance blue from one side going to red from the other. Thank you in advance!

Did you try it on iPad simulator by any chance? It doesn't seem to work correctly.

For some reason when the slider reaches the end, the track starts to become distorted. I did some digging into the subviews and it seems to be related to the AnimatedPath object, along with its animatedProps.

Hello,
I want to reduce a space between this two points, how can i do it?

Hello,

While integrating react-native-radial-slider into a project, I identified a potential enhancement that would broaden the library's usability. Specifically, the need for a vertical slider orientation.

I initially approached this with a 270-degree rotation, but this introduces complexities in touch handling and could potentially limit other UX functionalities. I believe there might be usefull, more integrated solutions to achieve this vertical orientation which will not only be beneficial for my use case but also for others who might have similar requirements.

Possible Solutions:

Native support for vertical orientation without requiring users to apply external transformations.
Providing an API or props to customize the orientation, allowing developers to choose between horizontal or vertical orientations.
Suggestions or guidelines on how to handle gestures for non-standard orientations.
Contribution:
I've been trying various approaches to this challenge, and I'm ready to contribute.

Thank you for your time and for the valuable work on this library!

Based on the current behavior I observed, the onComplete function seems to pass in the initial value of the slider when the change began. If I am wrong I would greatly appreciate any assistance!

Issue:
I am attempting to build a temperature slider. Component state is set using the onChange function just like the README.md examples. I am attempting to make an API call to a backend to update the desired temperature using the onComplete. However, it appears that the onComplete is firing before the final async onChange event has completed and the API call is made with a "stale" value.

Proposed Solution:
I would like to request that the final selected value get passed into the onComplete function. The API could be called onChange, but that could potentially call the API hundreds of times within a few seconds.

Simplified Example:

import React, { useState, useEffect } from 'react';
import { RadialSlider } from 'react-native-radial-slider';

export default function TemperatureDial() {
    const [desiredTemp, setDesiredTemp] = useState(70);

    const updateComplete = async (value)  => {
        console.log(value);  //<----appears to be initial slider value
        await apiCallUpdateTemp(desiredTemp);
    }

    return (
        <RadialSlider
            value={desiredTemp}
            min={50}
            max={90}
            onChange={setDesiredTemp}
            onComplete={updateComplete}
            unit="&deg;"
        />
    )
}

Hello! I need step to be 0.1. When I set props.step ={0.1} it only works when clicking on the arrows. When moving the slider, it doesn't work.

I want thumb to be on Radial rather then on Slider as shown below.

Thanks for your contribution it will help me a lot.