Geek Answers Handbook

Open your keyboard and / or DatePickerIOS when TextInput touches React Native

I am new to React Native and just want the DatePickerIOS component to slide at the top bottom of the screen when touching TextInput.

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

Below is my component. It is very simple. I am trying to open either the keyboard or DatePickerIOS to open it when the user touches 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;
+4
source share
2 answers

I am using DatePickerIOS, here is an example of how I would 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;

TouchableOpacity, , , , , . , , .. , : npm install moment --save, var moment = require('moment') {moment(this.state.date).format('DD/MM/YYYY')}. / , , . , TextInput, , , . , :)

+4

response-native-datepicker Android/iOS https://www.npmjs.com/package/react-native-datepicker

0

More articles:


All Articles