"RNDateTimePicker" cannot be found in UIManager

[Paul Mould]

I'm getting this error when i click the button to display the date time picker on iOS:
"RNDateTimePicker" cannot be found in UIManager

Running on iOS 16 on Expo.

I am using the LMDatePicker component in a component created in packages/app/features/

MyComponent

import {ScrollView } from 'tamagui'
import React from 'react';
import { LmDatepicker } from '@tamagui-extras/date'

export function CreateEventScreen() {
  return (
    <ScrollView>
      <LmDatepicker/>
    </ScrollView>

  )
}

@dohomi My babel.config.js and metro.config.js is the same as in this repo.

I am using pnpm package manager and added the resolution to downgrade the package and verified in my node_modules using this configuration as mentioned here:

  "pnpm": {
    "overrides": {
      "@react-native-community/datetimepicker": "6.7.0"
    }
  },

Babel Config

const extrasPlugins = [
  '@tamagui-extras/config',
  '@tamagui-extras/core',
  '@tamagui-extras/date',
  '@tamagui-extras/form'
]
module.exports = function (api) {
  api.cache(true)
  return {
    presets: [['babel-preset-expo', { jsxRuntime: 'automatic' }]],
    plugins: [
      require.resolve('expo-router/babel'),
      [
        'module:react-native-dotenv',
        {
          moduleName: '@env',
          path: '../../.env',
          allowlist: ['NEXT_PUBLIC_SUPABASE_URL', 'NEXT_PUBLIC_SUPABASE_ANON_KEY'],
          safe: false,
          allowUndefined: true
        }
      ],
      [
        require.resolve('babel-plugin-module-resolver'),
        {
          root: ['../..'],
          alias: {
            // define aliases to shorten the import paths
            app: '../../packages/app',
            '@ampm/events-api': '../../packages/api',
            '@ampm/events-ui': '../../packages/ui'
          },
          extensions: ['.js', '.jsx', '.tsx', '.ios.js', '.android.js']
        }
      ],
      // if you want reanimated support
      // 'react-native-reanimated/plugin',
      ...(process.env.EAS_BUILD_PLATFORM === 'android'
        ? []
        : [
          [
            '@tamagui/babel-plugin',
            {
              components: ['@ampm/events-ui', ...extrasPlugins, 'tamagui'],
              config: './tamagui.config.ts'
            }
          ]
        ]),
      [
        'transform-inline-environment-variables',
        {
          include: 'TAMAGUI_TARGET'
        }
      ],
      'jotai/babel/plugin-react-refresh'
    ]
  }
}

Metro.config.js

// Learn more https://docs.expo.io/guides/customizing-metro
/**
 * @type {import('expo/metro-config')}
 */
const { getDefaultConfig } = require('@expo/metro-config')
const path = require('path')

const projectRoot = __dirname
const workspaceRoot = path.resolve(__dirname, '../..')

const config = getDefaultConfig(projectRoot)

config.watchFolders = [workspaceRoot]
config.resolver.nodeModulesPaths = [
  path.resolve(projectRoot, 'node_modules'),
  path.resolve(workspaceRoot, 'node_modules'),
]
config.resolver.disableHierarchicalLookup = true
config.resolver = {
  ...config.resolver,
}

config.transformer = config.transformer || {}
config.transformer.minifierPath = require.resolve('metro-minify-terser')
config.transformer.unstable_allowRequireContext = true

module.exports = config

Originally posted by @pmould in #26 (comment)

[Dominic Garms]

did you make sure that the external dependencies are met: #32 (comment) I am not sure how pnpm works as I use yarn in the mono repo

[Paul Mould]

Hi @dohomi, yes i'm using pnpm which is what is used in the template i'm using https://github.com/timothymiller/t4-app.

Where do the external dependencies (ie. react-native-modal-datetime-picker @react-native-community/datetimepicker) need to be added if the LMDatePicker is being used inside a component in packages/app repo?

I added the external dependencies to packages/app repo first then to both packagages/app and apps/expo repo. Did not work in either case and got the same error.

(Side note: On Android when I click the icon to display the date picker it does not display but does not error out like on iOS)

Thanks for the quick response and all that your doing.

[Dominic Garms]

I honestly dont know - I use yarn in my mono-repo but I also haven't checked the native capability for a while because constantly my iOS is upgraded and I haven't got the chance to re-install it.

[Paul Mould]

Thanks for the quick reply. Will keep looking into trying to get this to work with the latest version of the T4 template using pnpm. If anyone is able to get this work for the T4 template and report here that would be great.

FYI this is running on iOS 16 on expo

[Dominic Garms]

I add a new section to the readme for other users to have a better start using this library: https://github.com/dohomi/tamagui-kitchen-sink/blob/master/readme.md#installation--troubleshoot-expo
Closing the issue for now