React Native – Date Picker

In this tutorial we are going to see how we use React Native Date Picker in our application. For this we use DatePicker Component from react-native-datepicker library. So lets first install the dependency and after we write our App.js code.

npm install react-native-datepicker --save

App.js Code

export default class App extends Component {
  constructor(props){
    super(props)
    this.state = {date:"24-05-2020"}
  }

  render(){
    return (
      <View style={styles.container}>

        <DatePicker
          style={{width: 200}}
          date={this.state.date} //initial date from state
          mode="date" //The enum of date, datetime and time
          placeholder="select date"
          format="DD-MM-YYYY"
          minDate="01-01-2010"
          maxDate="01-01-2030"
          confirmBtnText="Confirm"
          cancelBtnText="Cancel"
          customStyles={{
            dateIcon: {
              position: 'absolute',
              left: 0,
              top: 4,
              marginLeft: 0
            },
            dateInput: {
              marginLeft: 36
            }
          }}
          onDateChange={(date) => {this.setState({date: date})}}
        />

      </View>
    )
  }
}
const styles = StyleSheet.create ({
 container: {
    flex: 1,
    alignItems: 'center',
    justifyContent:'center',
    marginTop: 50,
    padding:16
 }
})