TypeError: undefined is not an object (evaluating 'theme.fonts.medium')

[adamchenwei]

I am trying to get the demo code working in my app but I kept encounter this issue of TypeError: undefined is not an object (evaluating 'theme.fonts.medium') even I used paper theme provider What did I do wrong?

DatePickerMU.js

import * as React from 'react';
import { Button } from 'react-native-paper';
import { DatePickerModal } from 'react-native-paper-dates';

const DatePickerMU = () => {
  const [date, setDate] = React.useState();
  const [open, setOpen] = React.useState(false);

  const onDismissSingle = React.useCallback(() => {
    setOpen(false);
  }, [setOpen]);

  const onConfirmSingle = React.useCallback(
    (params) => {
      setOpen(false);
      setDate(params.date);
    },
    [setOpen, setDate]
  );

  return (
    <>
      <Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
        Pick single date
      </Button>
      <DatePickerModal
        locale="en"
        mode="single"
        visible={open}
        onDismiss={onDismissSingle}
        date={date}
        onConfirm={onConfirmSingle}
        // validRange={{
        //   startDate: new Date(2021, 1, 2),  // optional
        //   endDate: new Date(), // optional
        //   disabledDates: [new Date()] // optional
        // }}
        // onChange={} // same props as onConfirm but triggered without confirmed by user
        // saveLabel="Save" // optional
        // saveLabelDisabled={true} // optional, default is false
        // uppercase={false} // optional, default is true
        // label="Select date" // optional
        // animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
        // startYear={2000} // optional, default is 1800
        // endYear={2100} // optional, default is 2200
        // closeIcon="close" // optional, default is "close"
        // editIcon="pencil" // optional, default is "pencil"
        // calendarIcon="calendar" // optional, default is "calendar"
      />
    </>
  );
}
export default DatePickerMU;

App.js

import { Appbar, Provider as PaperProvider, MD3LightTheme as DefaultTheme, } from 'react-native-paper';
...
return (
<PaperProvider theme={theme}>
      <SafeAreaView style={scrollViewStyleAppRoot}>
        <Appbar.Header>
          <Appbar.BackAction onPress={() => {}} />
          <Appbar.Content title="Title" />
          <Appbar.Action icon="calendar" onPress={() => {}} />
          <Appbar.Action icon="magnify" onPress={() => {}} />
        </Appbar.Header>
        <ScrollView
          stickyHeaderIndices={[0]}
          contentInsetAdjustmentBehavior="automatic"
          style={scrollViewStyleAppRoot}>
          ...
          <View>
              <DatePickerMU theme={theme}/>
          </View>

Also attacked screenshot.

[adamchenwei]

I fixed it by adding the missing style. I thought it should already exist lol

import { Appbar, Provider as PaperProvider, MD3LightTheme as DefaultTheme, } from 'react-native-paper';

const theme = {
  ...DefaultTheme,
  fonts: {
    ...DefaultTheme.fonts,
    // NOTE : Here is added style!
    medium: 'Ubuntu Bold',
  },
  roundness: 2,
  version: 3,
  colors: {
    ...DefaultTheme.colors,
    primary: '#3498db',
    secondary: '#f1c40f',
    tertiary: '#a1b2c3'
  },
};

[iM-GeeKy]

@adamchenwei This library is not yet compatible with react-native-paper 5.0.0+ which allows you to specify version: 3 as opposed to version: 2 which is what this library currently works with. Support may come when the paper team officially gets off release candidates and publishes a stable release.