I made a custom component called "react-native-weekly-calendar",
and I'm trying to publish it to open source community,
but I want to test it first. When I try to test it by npm install --save ../<component_name>, it throws an error.
My directory structure:
- react-native-weekly-calendar (folder)
- index.js
- package.json
- src (folder)
- Locale.js
- Style.js
index.js:
import React, { useState, useEffect, useRef } from 'react';
import { Text, View, ScrollView, TouchableOpacity, TouchableWithoutFeedback, Modal, Platform, ActivityIndicator } from 'react-native';
import PropTypes from 'prop-types';
import moment from 'moment/min/moment-with-locales';
import DateTimePicker from '@react-native-community/datetimepicker';
import { FontAwesome } from 'react-native-vector-icons';
import { applyLocale, displayTitleByLocale } from './src/Locale';
import styles from './src/Style';
const WeeklyCalendar = props => {
...
}
export default WeeklyCalendar;
package.json:
{
"name": "react-native-weekly-calendar",
"version": "0.1.0",
"description": "Weekly Calendar component for React Native",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/codeinjuice/react-native-weekly-calendar.git"
},
"keywords": [
"react",
"reactnative",
"react-native",
"react-native-component",
"calendar",
"weeklycalendar",
"weekly-calendar",
"scheduler",
"datepicker",
"date-picker"
],
"author": "codeinjuice",
"license": "MIT",
"bugs": {
"url": "https://github.com/codeinjuice/react-native-weekly-calendar/issues"
},
"homepage": "https://github.com/codeinjuice/react-native-weekly-calendar#readme",
"dependencies": {
"moment": "^2.24.0",
"prop-types": "^15.5.7",
"@react-native-community/datetimepicker": "~2.1.0",
"react-native-vector-icons": "~6.6.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"metro-react-native-babel-preset": "^0.58.0",
"react": "~16.9.0",
"react-native": "0.61.4"
}
}
Here is how I tested with the files above:
$ npx react-native init sample
$ cd sample
$ npm install --save ../react-native-weekly-calendar
$ vim App.js
Then I added import WeeklyCalendar from 'react-native-weekly-calendar'; in App.js.
Finally I ran
$ npx react-native run-ios
In the simulator, I get this error:
Unable to resolve module 'react-native-weekly-calendar' from 'App.js':react-native-weekly-calendar could not be found within the project.
Did I set my dependency settings wrong in package.json???
I don't understand why it keeps saying the component is not found when it's clearly inside of node_modules folder.
Any suggestions are welcomed!