Open Keyboard and/or DatePickerIOS when TextInput touched in React Native

Question

I am new to React Native and am simply looking to have a DatePickerIOS component slide up from the bottom of the screen when a TextInput is touched.

Can someone please point me in the right direction or give me a simple example?

Below is my component. It is very simple. I'm trying to get either the keyboard or the DatePickerIOS to open once the user touches the TextInput.

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  TextInput,
  View,
  DatePickerIOS
} from 'react-native';

class AddChildVisit extends Component {

render() {
  return (
    <View>
      <Text>Visit Date</Text>
      <TextInput
        style={{height: 40, width: 300, padding: 4, borderColor: 'gray', borderWidth: 1}}
        keyboardType= 'numeric'
      />
      <DatePickerIOS
        date={new Date()}
        mode="date"
      />
    </View>
  );
 }


}


module.exports = AddChildVisit;

Solution 1

I am using DatePickerIOS, here is example how would I do it:

import React, {
    AppRegistry,
    Component,
    StyleSheet,
    Text,
    TouchableOpacity,
    TextInput,
    View,
    DatePickerIOS
} from "react-native";

var moment = require('moment');

class AddChildVisit extends Component {
    constructor(props) {
        super(props);
        this.state = {
            date: new Date(),
            showDatePicker: false 
        }
    }

    render() {
        var showDatePicker = this.state.showDatePicker ?
            <DatePickerIOS
                style={{ height: 150 }}
                date={this.state.date} onDateChange={(date)=>this.setState({date})}
                mode="date"/> : <View />
        return (
            <View>
                <Text>Visit Date</Text>
                <TouchableOpacity style={{height: 40, width: 300, padding: 4, borderColor: 'gray', borderWidth: 1}}
                                  onPress={() => this.setState({showDatePicker: !this.state.showDatePicker})}>
                    <Text>{moment(this.state.date).format('DD/MM/YYYY')}</Text>
                </TouchableOpacity>
                {showDatePicker}
            </View>
        );
    }


}

module.exports = AddChildVisit;

When you press TouchableOpacity, datepicker will show because you trigger flag to show it, and if you press it again, it will close. I also use moment to print date because I was getting error that I can't put object in text component etc. For this example to work you need to install moment, you can do it like this: npm install moment --save , I already used it in code example above, you can see var moment = require('moment'), and again in printing date in text {moment(this.state.date).format('DD/MM/YYYY')}. If you don't want to install/use it, just remove lines with moment from my example - but your date won't be printed then. I'm not really sure how would I call date picker with TextInput because it has to trigger keyboard, and when I have date picker I don't really need keyboard. I hope it helps :)

Solution 2

Another way is using the package react-native-datepicker and works on both platforms Android/iOS https://www.npmjs.com/package/react-native-datepicker

Comments

[Sohrab Hejazi]

Thank you! That helped. How do you get the DatePickerIOS to popup from the bottom of the screen? Also, what if I wanted to show a keyboard instead. How do you open the keyboard?

[Vikky]

I'm glad :) I don't have to show keyboard so this is enough for me. I tried to improve your example for both keyboard and datepicker, but keyboard goes from bottom and sticks there, and I don't see datepicker which is below it then until I scroll. I think you don't need to have both keyboard and datepicker, but if you really need it, you can replace TouchableOpacity with TextInput like this: <TextInput onFocus={() => this.setState({showDatePicker:true})} style={{height: 40, width: 300, padding: 4, borderColor: 'gray', borderWidth: 1}} keyboardType= 'numeric' />

[Sohrab Hejazi]

I don't need both datepicker and keyboard on the same field. I was planning of having another plain textInput which would show the keyboard. I am not sure how to open and close the keyboard using react-native.

[Vikky]

but you would have to manage closing datepicker in this case. I assume with onSubmitEditing / onEndEditing ={() => this.setState({showDatePicker:false})} on TextInput, or something like that, I'm not sure

[Sohrab Hejazi]

Ok. Let's say I have a <TextInput style={{height: 40, width: 300, padding: 4, borderColor: 'gray', borderWidth: 1}} keyboardType= 'numeric' /> and datepicker isn't open. How do I get the keyboard to open when the TextInput is selected?

[Vikky]

Oh, keyboard shows when you focus TextInput by default, and I think it's closing by default when you focus anything else on screen or when you press submit button/key on keyboard. You can read more about textInput on official documentation facebook.github.io/react-native/docs/textinput.html .

[Sohrab Hejazi]

In that case, why doesn't the iOS simulator open the keyboard when the textInput focused on?

[Vikky]

I'm not sure, I tried your example on iPad and keyboard opened on focus, didn't try on simulator, so I wouldn't know. Unfortunately I can't help you with that, sorry :/

[Sohrab Hejazi]

I looked through the options of the simulator and you can toggle between iOS or Hardware keyboard. Thank you so much for your help!

[Sohrab Hejazi]

One last question, how can I position the DatePicker at the bottom of the screen and give it the same animation/sliding effect as the keyboard?

[Vikky]

Great! I'm glad I was able to help! :)

[Vikky]

Huh I would try with style on datepicker, maybe with justifyContent & alignSelf:'flex-end'. Here is great article about positioning content moduscreate.com/aligning-children-using-flexbox-in-react-nat‌​ive I hope it will help you, cause I'm unfortunately out of the office, and can't try it myself. Good luck with it :)

[Sohrab Hejazi]

Thank you. You've been a great help!