Invariant Violation: View config not found for name RNDateTimePicker (Only happens when installing NPM Package in new project)

[jefelewis]

Bug

Issue Summary

I'm building an NPM library using the @react-native-community/datetimepicker library, but I am receiving the error when installing my package and trying to use it in a new project.

Environment info

React native info output:

Invariant Violation: View config not found for name RNDateTimePicker.

This error is located at:
  in RNDateTimePicker (at datetimepicker.ios.js:81)
  in RTCView (at datetimepicker.ios.js:80)
  in Picker (
  in RTCView (created by DatePicker)
  in RTCView (created by DatePicker)

Library version:
2.1.0 @react-native-community/datetimepicker
16.9.0 react
0.61.5 react-native

Steps To Reproduce

What Works

1. npm i @react-native-community/datetimepicker
2. Add pod 'RNDateTimePicker', :path => '../node_modules/@react-native-community/datetimepicker/RNDateTimePicker.podspec' to podfile
3. cd ios
4. pod install
5. import RNDateTimePicker from '@react-native-community/datetimepicker'; in DatePicker.tsx
6. react-native run-ios -- --reset-cache --clearCache
7. DatePicker.tsx component works both on Android and iOS simulators
8. npm run build
9. npm publish to publish the package to NPM

Where the issue occurs

1. Now that I've published my package react-native-ultimate-modal-picker, I install it into a new project as an npm dependency with npm i react-native-ultimate-modal-picker.
2. I then build the iOS bundle with react-native run-ios -- --reset-cache --clearCache
3. The DatePicker.tsx component renders, but when I click on the component where my modal with @react-native-community/datetimepicker and date picker should occur, I get the following error Invariant Violation: View config not found for name RNDateTimePicker

Again, the component renders and works, but the issue only occurs when the NPM library is installed into a project.

Reproducible sample code

The project can be found here (If you want to make a pull request), but below is relevant parts of the code.

App.tsx

// Imports: Dependencies
import React from 'react';
import { SafeAreaView } from 'react-native';
import {
  DatePicker,
} from 'react-native-ultimate-modal-picker';
 
// React Native App
const App = () => {
  return (
    <SafeAreaView>
      <DatePicker
        title="Date"
        onChange={(date) => console.log(`Date Value: ${date}`)}
        mode="spinner"
      />
    </SafeAreaView>
  )
}

DatePicker.tsx

// Imports: Dependencies
import React, { useState } from 'react';
import { Dimensions, Platform, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import RNDateTimePicker from '@react-native-community/datetimepicker';
import Modal from 'react-native-modal';
import moment from 'moment';

// Screen Dimensions
const { height, width } = Dimensions.get('window');

// TypeScript: Types
interface Props {
  title: string;
  mode: 'calendar' | 'spinner' | 'default';
  onChange: (date: any) => any;
}

// Component: Date Picker
const DatePicker = (props: Props) => {
  // React Hooks: State
  const [ modalVisible, toggle ] = useState(false);
  const [ androidModalVisible, toggleAndroid ] = useState(false);
  const [ date, setDate ] = useState(new Date());

  // Toggle Modal
  const toggleModal = () => {
    try {
      // Check Platform (Android)
      if (Platform.OS === 'android') {
        // React Hook: Toggle Android
        toggleAndroid((androidModalVisible: boolean) => !androidModalVisible);
      }

      // Check Platform (iOS)
      if (Platform.OS === 'ios') {
        // React Hook: Toggle Modal
        toggle((modalVisible: boolean) => !modalVisible);
      }
    }
    catch (error) {
      console.log(error);
    }
  };

  // Select Date
  const selectDate = (event: any, date: Date) => {
    try {
      // Check Platform: Android
      if (Platform.OS === 'android') {

        // Undefined
        if (date === undefined) {
          // React Hook: Toggle Android 
          toggleAndroid((androidModalVisible: boolean) => !androidModalVisible);
        }

        // Event Type: Set Date
        else if (event.type === 'set') {
          // React Hook: Toggle Android 
          toggleAndroid((androidModalVisible: boolean) => !androidModalVisible);

          // React Hook: Set From Date
          setDate(date);

          // React Props: onChange
          props.onChange(date);
        }

        // Event Type: Dismissed
        else if (event.type === 'dismissed') {
          // React Hook: Toggle Android
          toggleAndroid((androidModalVisible: boolean) => !androidModalVisible);
        }
      }

      // Check Platform: Android
      if (Platform.OS === 'ios') {
        setDate(date);

        // React Props: onChange
        props.onChange(date);
      }
    }
    catch (error) {
      console.log(error);
    }
  };

  // Render iOS Picker
  const renderIOSPicker = () => {
    try {
      return (
        <RNDateTimePicker
          mode="date"
          value={date}
          onChange={(event: any, date: any) => selectDate(event, date)}
        />
      )
    }
    catch (error) {
      console.log(error);
    }
  };

  // Render Android Picker
  const renderAndroidPicker = () => {
    try {
      if (androidModalVisible === true) {
        return (
          <RNDateTimePicker
            mode="date"
            display={props.mode}
            value={date}
            onChange={(event: any, date: any) => selectDate(event, date)}
          />
        )
      }
    }
    catch (error) {
      console.log(error);
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.inputTitleContainer}>
      <Text style={styles.inputTitle}>{props.title}</Text>
      </View>

      <TouchableOpacity onPress={() => toggleModal()} style={styles.fieldTextContainer}>
        <Text style={styles.fieldText} numberOfLines={1}>{date ? moment(date).format('MMM Do, YYYY') : 'Select'}</Text>

      </TouchableOpacity>

      <View>
        {androidModalVisible === true ? renderAndroidPicker(): null}
      </View>

      <Modal isVisible={modalVisible} style={styles.modal}>
        <View style={styles.modalContainer}>
          <View style={styles.pickerHeaderContainer}>
            <TouchableOpacity onPress={() => toggleModal()} >
              <Text style={styles.doneText}>Done</Text>
            </TouchableOpacity>
          </View>

          <View style={styles.pickerContainer}>
            {renderIOSPicker()}
          </View>
        </View>
      </Modal>
    </View>
  );
}

// Styles
const styles = StyleSheet.create({
  container: {
    display: 'flex',
    width: width - 32,
    marginLeft: 16,
    marginRight: 16,
    justifyContent: 'center',
  },
  modal: {
    margin: 0,
  },
  modalContainer: {
    height: '100%',
    alignItems: 'center',
    justifyContent: 'flex-end',
  },
  pickerHeaderContainer: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
    height: 40,
    width: width,
    backgroundColor: '#FAFAF8',
    borderColor: '#7D7D7D',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  pickerContainer: {
    height: 220,
    width: width,
    backgroundColor: 'white',
  },
  doneText: {
    fontFamily: 'System',
    color: '#007AFF',
    fontWeight: '600',
    fontSize: 17,
    marginRight: 16,
  },
  stateContainer: {
    alignItems: 'center',
    width: 75,
    borderColor: '#7D7D7D',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  inputTitleContainer: {
    width: 75,
    marginBottom: 4,
  },
  inputTitle: {
    color: '#7D7D7D',
    borderColor: '#7D7D7D',
    fontSize: 10,
    fontWeight: '600',
    textTransform: 'uppercase',
  },
  fieldTextContainer: {
    height: 40,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 4,
    borderColor: '#7D7D7D',
    borderBottomWidth: StyleSheet.hairlineWidth,    
  },
  fieldText: {
    width: width - 32 - 20,
    fontFamily: 'System',
    fontSize: 17,
    fontWeight: '400',
    color: '#000000',
    alignSelf: 'center',
  },
  arrowForward: {
    color: 'black',
    opacity: .3,
    marginRight: 7,
  },
});

// Exports
export default DatePicker;

package.json

{
  "name": "react-native-ultimate-modal-picker",
  "version": "0.1.39",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "description": "React Native Picker Component Library (Date, Time, DateTime, List, State)",
  "repository": "https://github.com/jefelewis/react-native-ultimate-modal-picker",
  "author": "Jeff Lewis",
  "license": "MIT",
  "keywords": [
    "react-native",
    "component-library",
    "apple",
    "ios",
    "android",
    "modal",
    "picker",
    "date",
    "time",
    "datetime",
    "list",
    "state"
  ],
  "scripts": {
    "build": "tsc",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/datetimepicker": "2.1.0",
    "moment": "^2.24.0",
    "react-native-modal": "^11.5.3",
    "react-native-vector-icons": "^6.6.0"
  },
  "devDependencies": {
    "@babel/core": "7.7.7",
    "@babel/runtime": "7.7.7",
    "@react-native-community/eslint-config": "0.0.5",
    "@types/jest": "^24.0.24",
    "@types/react": "^16.9.17",
    "@types/react-native": "^0.60.25",
    "@types/react-native-vector-icons": "^6.4.5",
    "@types/react-test-renderer": "16.9.1",
    "@typescript-eslint/eslint-plugin": "^2.12.0",
    "@typescript-eslint/parser": "^2.12.0",
    "babel-jest": "24.9.0",
    "eslint": "6.8.0",
    "jest": "24.9.0",
    "metro-react-native-babel-preset": "0.56.3",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-test-renderer": "16.9.0",
    "typescript": "^3.7.3"
  },
  "peerDependencies": {
    "react": "*",
    "react-native": "*"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  },
  "files": [
    "dist/"
  ]
}

Podfile

# Allowed sources
source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '9.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'reactNativeUltimateModalPicker' do
  # As we use Swift, ensure that `use_frameworks` is enabled.
  use_frameworks!

  # React Native Datetime List Picker
  pod 'RNDateTimePicker', :path => '../node_modules/@react-native-community/datetimepicker/RNDateTimePicker.podspec'

  # Pods for reactNativeUltimateModalPicker
  pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
  pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
  pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
  pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/'
  pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
  pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'

  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
  pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon"
  pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"
  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

  target 'reactNativeUltimateModalPickerTests' do
    inherit! :search_paths
    # Pods for testing
  end

  use_native_modules!
end

target 'reactNativeUltimateModalPicker-tvOS' do
  # Pods for reactNativeUltimateModalPicker-tvOS

  target 'reactNativeUltimateModalPicker-tvOSTests' do
    inherit! :search_paths
    # Pods for testing
  end

end

[jefelewis]

Also, if I import the DatePicker with having the SafeAreaView with <SafeAreaView style={{ display: 'flex', flex: 1 }}>, I get a different error: Invariant Violation: requireComponent: "RNDateTimePicker" was not found in the UIManager"

const App = () => {
  return (
     <SafeAreaView style={{ display: 'flex', flex: 1 }}>
        <DatePicker
          title="Date"
          onChange={(date) => console.log(date)}
          mode="spinner"
        />
      </SafeAreaView>
  );
};

[jefelewis]

UPDATE
I Found the issue to my problem. I needed to add pod 'RNDateTimePicker', :path => '../node_modules/@react-native-community/datetimepicker/RNDateTimePicker.podspec' to the project I had installed my npm package react-native-ultimate-modal-picker in. I have that line in the podfile of my npm library, but is there not a way to have that automatically install in the project podfile or link the pod?

[Hugo-Meiring]

Thank you @jefelewis, this fixed my issue as well. I also had the same issue. We have a component that we build that includes datetimepicker. The app / parent crashes because of it. But your pod spec fix worked perfectly when added to the parent podfile.

[vonovak]

Hello! I'm closing the issue as it seems to be resolved. Also the issue, as I understand from the previous comment, appears to be in a different RN package.

If the issue persists, please open a new one with a runnable repro. Thank you.