React-Native DateTimePicker in InputField

Question

I have built DateTimePicker into an InputField for my Android app, but the DateTimePicker by default takes the width of its content and not the total ready of the screen

import React, { useState, useEffect } from 'react';
import { View, TextInput, Button, Text, StyleSheet, TouchableOpacity, Dimensions } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

const SCREEN_WIDTH = Dimensions.get('window').width;


const SignUpScreen = () => {
  // ...

  const handleDateChange = (event, selectedDate) => {
    const currentDate = selectedDate || birthdate;
    setShowDatePicker(false);
    setBirthdate(currentDate);
  };

  // ...

  return (
    <View style={styles.container}>
      <View style={styles.inputView}>
        <InputField
          label="Geburtsdatum"
          value={birthdate}
          onDateChange={() => setShowDatePicker(true)}
          required
          error={errors.birthdate}
        />
        {showDatePicker && (
          <DateTimePicker
            style={{ width: SCREEN_WIDTH }} // Setze die Breite des DateTimePicker auf die Bildschirmbreite
            value={birthdate}
            mode="date"
            display="spinner"
            onChange={handleDateChange}
          />
        )}
      </View>
    </View>
  );
};

enter image description here

I want to display InputField of DateTimePicker on the total width, what should I do?

Answer 1

just find in those native code, you can see all the supported property:

RCT_EXPORT_SHADOW_PROPERTY(date, NSDate)
RCT_EXPORT_SHADOW_PROPERTY(mode, UIDatePickerMode)
RCT_EXPORT_SHADOW_PROPERTY(locale, NSLocale)
RCT_EXPORT_SHADOW_PROPERTY(displayIOS, RNCUIDatePickerStyle)


RCT_EXPORT_VIEW_PROPERTY(date, NSDate)
RCT_EXPORT_VIEW_PROPERTY(locale, NSLocale)
RCT_EXPORT_VIEW_PROPERTY(minimumDate, NSDate)
RCT_EXPORT_VIEW_PROPERTY(maximumDate, NSDate)
RCT_EXPORT_VIEW_PROPERTY(minuteInterval, NSInteger)
RCT_EXPORT_VIEW_PROPERTY(enabled, BOOL)
RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
RCT_EXPORT_VIEW_PROPERTY(onPickerDismiss, RCTBubblingEventBlock)


RCT_REMAP_VIEW_PROPERTY(mode, datePickerMode, UIDatePickerMode)
RCT_REMAP_VIEW_PROPERTY(timeZoneOffsetInMinutes, timeZone, NSTimeZone)

from here

The second: This lib using native DatePickerIOS, so you better lets it's choose the size automatically by system