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

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,
  },
});