How to create slider in React Native?

Question

I am currently working on slider control in React Native app.

Here is my code:

 <SliderIOS style={styles.sliderConfigurationView}
                     onValueChange={(age) =>this.setState({value:age})}
                     maximumValue={100.0}
                     minimumValue={0.0} />

 sliderConfigurationView: {
    height: 20,
    flex: 1,
    margin: 6
 },

But slider control is not displayed.

This is the screen what I am getting:

As you can see I am getting a read line instead of slider.

If anyone knows how to display slider control, please let me know.

Answer 1

import React, { Component } from 'react';
import {    
  StyleSheet,
  Text,
  View,
  Slider
} from 'react-native';

export default class Profile extends Component {
  constructor(props) {
   super(props)
   this.state = { age: 18 }
  } 
  getVal(val){
  console.warn(val);
  }     
  render() {    

    return (
      <View style={styles.container}>
        <Slider
         style={{ width: 300 }}
         step={1}
         minimumValue={18}
         maximumValue={71}
         value={this.state.age}
         onValueChange={val => this.setState({ age: val })}
         onSlidingComplete={ val => this.getVal(val)}
        />
        <Text style={styles.welcome}>
          {this.state.age}
        </Text>            
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Answer 2

You can also use panHandlers in Slider Component and providing prop => onMoveShouldSetResponder={true}

import React from 'react';
import { Slider as RNSlider, PanResponder } from 'react-native';
import { COLOR } from '../common/utils';

const Slider = () => {
    const [value,setValue] = useState(0)

    const _panResponder = PanResponder.create({
        onStartShouldSetPanResponder: (evt, gestureState) => true,
        onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
        onMoveShouldSetPanResponder: (evt, gestureState) => true,
        onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
        onPanResponderGrant: (evt, gestureState) => {
            console.log("onPanResponderGrant");
        },
        onPanResponderMove: (evt, gestureState) => { },
        onPanResponderTerminationRequest: (evt, gestureState) => true,
        onPanResponderRelease: (evt, gestureState) => {
            console.log("onPanResponderRelease");
        },
        onPanResponderTerminate: (evt, gestureState) => {
        },
        onShouldBlockNativeResponder: (evt, gestureState) => {
            return true;
        },
    });

    return (
        <RNSlider
            {..._panResponder.panHandlers}
            style={{ flex: 1 }}
            maximumValue={1}
            minimumValue={0}
            value={value}
            onValueChange={setValue}
            onMoveShouldSetResponder={true}
        />
    );
};

export default Slider;

it worked for me in android

Answer 3

I think all you need to do is set the style width. Here's a fully working example...

https://rnplay.org/apps/RSeQRA

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  SliderIOS,
} = React;

class SampleApp extends React.Component{

  constructor(props){
    super(props);

    this.state = {
      age: 0,
    }

  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>
          Age: {this.state.age}
        </Text>
        <SliderIOS
          style={styles.slider}
          minimumValue={0}
          maximumValue={100}
          step={1}
          onValueChange={(age) => this.setState({age: age})} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'green',
  },
  text: {
    color: 'white',
    fontSize: 24,
  },
  slider: {
    width: 300,
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

Answer 4

Here is how i made react native slider (example) work :

import React, { Component } from 'react';
import {    
  StyleSheet,
  Text,
  View,
  Slider
} from 'react-native';

export default class Profile extends Component {
  constructor(props) {
   super(props)
   this.state = { age: 18 }
  } 
  getVal(val){
  console.warn(val);
  }     
  render() {    

    return (
      <View style={styles.container}>
        <Slider
         style={{ width: 300 }}
         step={1}
         minimumValue={18}
         maximumValue={71}
         value={this.state.age}
         onValueChange={val => this.setState({ age: val })}
         onSlidingComplete={ val => this.getVal(val)}
        />
        <Text style={styles.welcome}>
          {this.state.age}
        </Text>            
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Answer 5

Move that setState call from onValueChange and instead move it into onSlidingComplete that will fix it. Then set value prop to this.state.value of course (it seems thats missing from there).