1

I am building my first react native app and for my app to work I need to use react-native-modal-datetime-picker. here's my code-

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, FlatList, Image, Button, Pressable, ScrollView,  } from 'react-native';
import React, {useState, useEffect, useCallback, Component} from 'react'
import { TextInput } from 'react-native-gesture-handler';
import RNPickerSelect from 'react-native-picker-select';
import * as ImagePicker from 'expo-image-picker';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { faSquare } from '@fortawesome/free-regular-svg-icons';
import * as Device from 'expo-device';
import DateTimePickerModal from 'react-native-modal-datetime-picker'


export default function Profile(props) {
  const [ openD, setOpenD ] = useState(false)
  const [ dob, setDob ] = useState(new Date())

const dateselect = (date) => {
      setDob(date)
      setOpenD(false)
    }

return (
      <View style={styles.scroll}>
          <ScrollView style={styles.scroll}>
<Text style={styles.label}>Date of Birth:</Text>
          <Pressable onPress={() => setOpenD(true)} title="date">
          <Text style={styles.input}>{ dob.toLocaleDateString() }</Text>
          </Pressable>

          <DateTimePickerModal
          isVisible={openD}
          mode="date"
          onConfirm={dateselect} 
          onCancel={() => setOpenD(false)}
          />
</ScrollView>
        <StatusBar style="auto"/>
      </View>
)
}

When I try to open the date picker, I get only the confirm button on the bottom and nothing else is showing up. It worked for me before and now it doesn't. I dont know how can I solve this issue?

screenshot of the issue

Itay Lador
  • 313
  • 1
  • 10
  • The best way to solve this issue is using RN Modal. Create a modal and use datetimepicker in that modal. It will solve all of your problems. – Nabeel May 08 '23 at 08:04

2 Answers2

1

In my case, the issue was caused by a mismatch between my installed libraries. I had been using npm, but for some reason, only yarn could resolve the dependencies in a non-breaking way. Here's what I did to fix the issue:

  1. Remove the relevant libraries:
npm remove @react-native-community/datetimepicker react-native-modal-datetime-picker
  1. Remove npm and yarn lock files, as well as the installed node modules:
rm -r node_modules
rm package-lock.json
rm yarn.lock
  1. Add Expo using yarn:
yarn add expo
  1. Use the Expo CLI to install the picker libraries:
expo install react-native-modal-datetime-picker @react-native-community/datetimepicker
  1. After attempting to run the app with expo start, I received warnings that several other libraries were not compatible with Expo. To resolve this, I followed the suggested expo install commands that were specific to my project. Make sure to check the warnings and follow the instructions to ensure compatibility with your project.
Michael
  • 1,075
  • 1
  • 10
  • 24
-1

It looks like you're missing a closing parenthesis. Try adding a ) after your </View> and reload the app (you can press rr on your keyboard with your app open if you're using an iOS simulator). You may need to restart your bundler as well.

cooperw
  • 1
  • 3