TypeError: Cannot read property 'openPicker' of null | react-native-date-picker

Question

I am trying to use this DataPicker (text in react-native.

However when I launch the app in Android studio with yarn expo start I get this error:

ERROR  TypeError: Cannot read property 'openPicker' of null

My code:

import { StyleSheet, Text, View, TouchableHighlight } from 'react-native';
import InputField from './InputField';
import React from 'react';
import *  as StorageHandler from '../handlers/StorageHandler'
import Appointment from '../utils/Appointment';
import DatePicker from 'react-native-date-picker';
export default function AddNewPage() {
    const [name, setName] = React.useState("");
    const [rate, setRate] = React.useState(0);

    //dataPicker state
    const [date, setDate] = React.useState(new Date());
    const [open, setOpen] = React.useState(false);
    const handleOnChangeDate = (newValue) => {

        setDate(newValue);
    }
    const handleOnChangeName = (newValue) => {
        setName(newValue);
    }
    const handleOnChangeRate = (newValue) => {
        setRate(newValue);
    }
    const onSaveHandler = async () => {
        console.log(rate);
        const newAppointment = new Appointment(name, date, rate);
        StorageHandler.setNewAppointment(newAppointment);

        try {
            const stats = await StorageHandler.getAllValues();
            console.log(stats);
        } catch (error) {
            console.error(error);
        }

    }
    return (
        <View style={styles.mainContainer}>
            <View style={styles.visibleContainer}>
                <View style={styles.inputContainer}>
                    <InputField  keyboardType={'default'} onChange={handleOnChangeName} placeholder="    |Name" />
                    <TouchableHighlight style={styles.date} onPress={() => setOpen(true)}>
                        <Text style={color="#626262"}>  |date</Text>
                    </TouchableHighlight>
                    <DatePicker
                        modal
                        androidVariant='iosClone'
                        mode="date"
                        open={open}
                        date={date}
                        onConfirm={(date) => {
                            setOpen(false)
                            setDate(date)
                        }}
                        onCancel={() => {
                            setOpen(false)
                        }}
                    />
                    <InputField  keyboardType={'numeric'} onChange={handleOnChangeRate} placeholder="     |redate-rate" />
                </View>
                <View style={styles.buttonContainer}>
                    <TouchableHighlight style={styles.button} onPress={onSaveHandler}>
                        <Text >Save</Text>
                    </TouchableHighlight>
                </View>
            </View>
        </View>
    );
}
const styles = StyleSheet.create({
    mainContainer: {
        paddingBottom: 20,
        display: 'flex',
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
        justifyContent: 'center',
        alignItems: 'center',
    },
    inputContainer: {
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        alignItems: 'center',
        gap: 30,
        paddingTop: 20,


    },
    
    visibleContainer: {
        display: 'flex',
        flexDirection: 'column',
        width: 300,
        height: 250,
        backgroundColor: '#D9D9D9',
        borderRadius: 10,
        padding: 15,


    },
    buttonContainer: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        paddingTop: 20,
    },
    button: {
        borderRadius: 5,
        width: 80,
        height: 25,
        backgroundColor: '#4EAAFF',
        justifyContent: 'center',
        alignItems: 'center',
    },
    date: {
        borderRadius: 5,
        width: 218,
        height: 27,
        backgroundColor: 'white',
        justifyContent: 'center',
    }
});

packege.json { "name": "doctor-manager", "version": "1.0.0", "scripts": { "start": "expo start --dev-client", "android": "expo run:android", "ios": "expo run:ios", "web": "expo start --web" }, "dependencies": { "@react-native-async-storage/async-storage": "^1.18.1", "@react-navigation/native": "^6.1.6", "@react-navigation/native-stack": "^6.9.12", "expo": "~48.0.11", "expo-dev-client": "~2.2.1", "expo-splash-screen": "~0.18.1", "expo-status-bar": "~1.4.4", "react": "18.2.0", "react-native": "0.71.6", "react-native-date-picker": "^4.2.11", "react-native-safe-area-context": "^4.5.1", "react-native-screens": "^3.20.0" }, "devDependencies": { "@babel/core": "^7.20.0", "@tsconfig/react-native": "^3.0.0", "@types/jest": "^29.5.0", "@types/react": "^18.0.37", "@types/react-test-renderer": "^18.0.0", "typescript": "^5.0.4" }, "private": true } Error Stacktrace: ERROR TypeError: Cannot read property 'openPicker' of null

This error is located at: in DatePickerAndroid (created by DatePickerWrapper) in DatePickerWrapper (created by AddNewPage) in RCTView (created by View) in View (created by AddNewPage) in RCTView (created by View) in View (created by AddNewPage) in RCTView (created by View) in View (created by AddNewPage) in AddNewPage (created by SceneView) in StaticContainer in EnsureSingleNavigator (created by SceneView) in SceneView (created by SceneView) in RCTView (created by View) in View (created by DebugContainer) in DebugContainer (created by MaybeNestedStack) in MaybeNestedStack (created by SceneView) in RCTView (created by View) in View (created by SceneView) in RNSScreen (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by InnerScreen) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by InnerScreen) in InnerScreen (created by Screen) in Screen (created by SceneView) in SceneView (created by NativeStackViewInner) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by ScreenStack) in RNSScreenStack (created by ScreenStack) in ScreenStack (created by NativeStackViewInner) in NativeStackViewInner (created by NativeStackView) in RNCSafeAreaProvider (created by SafeAreaProvider) in SafeAreaProvider (created by SafeAreaInsetsContext) in SafeAreaProviderCompat (created by NativeStackView) in NativeStackView (created by NativeStackNavigator) in PreventRemoveProvider (created by NavigationContent) in NavigationContent in Unknown (created by NativeStackNavigator) in NativeStackNavigator (created by App) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by App) in App (created by withDevTools(App)) in withDevTools(App) in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in main(RootComponent), js engine: hermes

i searched but found nothing

Answer 1

are you using Expo Go? I have had the same issue and then I dived into documentation:

This library can't be used in the "Expo Go" app because it requires custom native code. Documentaiton