Float to Int in React Native

Question

I'm still new in react native. I hope you guys can help me. I want to change float to an int in the slider. (in the onValueChange)

This is my code :

                        <Section style={{padding:10, backgroundColor:'white', borderRadius:10, marginTop:30}}>
                            <Block xsSize='1/2' smSize='1/2'>
                              <Slider
                                style={{width: 200, height: 40}}
                                minimumValue={1}
                                maximumValue={100}
                                minimumTrackTintColor="#0197ca"
                                maximumTrackTintColor="#a2a2a2"
                                onValueChange={(value) => this.setState({sliderState:value})}
                             />
                            </Block>

                            <Block xsSize='1/2' smSize='1/2' style={{padding:10, borderRadius:5, backgroundColor:'#0197ca', width:60, position:'relative', left:90}}>
                                <Text style={{color:'white'}}>{this.state.sliderState}%</Text>
                            </Block>     
                        </Section>

I want to change the output in <Text style={{color:'white'}}>{this.state.sliderState}%</Text> become an int. Right now, the output is still float.

See this[duplicate]: https://stackoverflow.com/a/7641824/11380693 . I think your question should be related to javascript. — Akhil Nayak, Apr 05 '20 at 13:22
I've tried this, but I don't really understand how to implemented it in my code. — Kelly Kirsten Audrey, Apr 05 '20 at 13:29

Akhil Nayak · Accepted Answer · 2020-04-05T13:39:00.127

When you want the value to be in certain ways make sure to do the changes when you set the state.
In that way, you can have your value to be formatted the way you want.
Try this:

<Section style={{padding:10, backgroundColor:'white', borderRadius:10, marginTop:30}}>
 <Block xsSize='1/2' smSize='1/2'>
  <Slider
         style={{width: 200, height: 40}}
         minimumValue={1}
         maximumValue={100}
         minimumTrackTintColor="#0197ca"
         maximumTrackTintColor="#a2a2a2"
         onValueChange={(value) =>this.setState({sliderState:Math.round(value)})}
   />
  </Block>
 <Block
   xsSize='1/2'
   smSize='1/2' 
   style={{padding:10, borderRadius:5, backgroundColor:'#0197ca', width:60, position:'relative', left:90}}>
   <Text style={{color:'white'}}>
        {this.state.sliderState}%
    </Text>
  </Block>     
</Section>

Float to Int in React Native

1 Answers1