Create react native module and use it in application - ios

I want to create react-native module for iOS and Android and use it in an application.
I want to use it like a local module, not uploaded to npm.
When i follow the steps described in the official documentation i always have those error on the import of my module into App.js file :
import MyModule from 'react-test-module';
Could not find a declaration file for module 'react-test-module'. '/Users/dbellerose/Path/to/My/Module/react-test-module/index.js' implicitly has an 'any' type.
Try npm install #types/react-test-modulet if it exists or add a new declaration (.d.ts) file containing `declare module 'react-test-module';
When i run the iOS application :
Unable to resolve module react-test-module from /Users/Path/To/My/App/App.js: Module react-test-module does not exist in the Haste module map.
The message give me some tips to solve the problem, but it does not work.
To resolve try the following:
1. Clear watchman watches: watchman watch-del-all.
2. Delete the node_modules folder: rm -rf node_modules && npm install.
3. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache.
4. Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*.
So what do you know what is the good process to create a module and use it in application without uploading the package to npm ?
Best regards,
David

Here's some steps I could share with you as a checklist:
yarn global add create-react-native-module
create-react-native-module MyLibrary
Cd to MyLibrary folder, run yarn install
Work on your module
To link to your project, you will need to add the following to your package.json (the path should be wherever your module is sitting at)
"react-native-test-module": "file:../",
"react-native-my-library": "file:../../react-native-my-library/"
** Do keep in mind, if you have new methods appended in module. You will need to:
Remove node_modules and Pods from your project
Re-execute yarn/npm install & pod install
Hope it helps.

Related

Autoprefixer error in sublime 4, mapping and package.json

hi i installed autoprefixer css via package install . node.js is installed and i think i did everything right but when i try running it this error is showing up:
Autoprefixer
Error: (node:20773) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/"myusername"/Library/Application Support/Sublime Text/Packages/Autoprefixer/node_modules/postcss/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use node --trace-deprecation ... to show where the warning was created)
can someone help me with it ?
thx
This is an issue with one of Autoprefixer's JavaScript dependencies, named postcss. The Autoprefixer plugin hasn't been updated in over a year, so some of its dependencies have grown a little stale. However, as detailed here, the fix is pretty straightforward.
Open the Terminal app, and type in
cd "~/Library/Application Support/Sublime Text/Packages/Autoprefixer"
(don't forget the quotes around the path, as it contains spaces)
Once in that directory, just run
npm update
and the JS deps should be updated. Restart Sublime, and you should be all set.
I found the same error:
[DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in
the "exports" field module resolution of the package at
.../node_modules/tslib/package.json.
Then I solved it by exploring in the file /node_modules/tslib/package.json and update the package.json file with the following.
"exports": {
...,
"./": "./*"
}

"config.h" file not found in iOS project of React native

In X-Code project of react native, getting error
config.h file not found.
Here is version detail :
react-native-cli: 2.0.1
react-native: 0.51.0
How to solve it?
Close Xcode.
Open Terminal, go to your project's root folder and run:
cd node_modules/react-native/third-party/glog-0.3.4/
Run the configure script:
./configure
Open Xcode and try to run your app.
I had the same issue, using this steps solves for me:
Running into the same issue here after upgrading from 0.44. None of the above solutions or clearing caches did the trick for me. Here's what I did to get things working again:
In the Terminal, navigate to the react-native/third-party/glog folder inside node_modules (for me, this was cd node_modules/react-native/third-party/glog-0.3.4)
Once actively in this folder, run sh ../../scripts/ios-configure-glog.sh
Glog is configured and the required config.h header file is created for Xcode to find
Run your iOS BUILD
Regards!
When project files get messed up for me. I typically follow these steps.
rm -rf node_modules
npm install
react-native upgrade (Only changing affected files, so IOS for you)
react-native link
npm start --reset-cache
(In another terminal)
react-native run-ios
These steps worked for me:
rm -rf ~/.rncache
rm -rf node_modules/
npm install
npm start
You need to change to the legacy build system in Xcode 10 and install third party scripts manually.
1:
File -> Project/Workspace settings
Build System: dropdown -> change to Legacy Build system
2: Follow this to manually install third party scripts for RN:
Clean RN cache
$ rm -rf ~/.rncache
Re-install the deps
$ cd your_project_path
$ rm -rf node_modules/ && npm install
Then install the third-party
$ cd node_modules/react-native/scripts
$ ./ios-install-third-party.sh
Run the commands below if glog installation failed.
$ cd ../third-party/glog-0.3.x
$ ./configure
It works for me, I hope it helps for you.
If above all answers don't work,
Please check that there is no space in any directory name of the full path and not only the project directory name.
While in terminal, it accepts throgh My Disk as My\ Disk but xcode do not recognize that.
If its in My Disk directory, try after moving it to Desktop or any other directory which doesn't have space in their name.
configure: error: unsafe absolute working directory name Issue:
-Open Terminal, go to your project's root folder and run:
cd node_modules/react-native/third-party/glog-0.3.5/
Run the configure script:
./configure
got error: configure: error: unsafe absolute working directory name
try to created app in desktop and from there run ./configure command.
Please note with XCOXE 10, and Mojave MAC OS , I had same issue, ./configure was showing some permission issue, I had set permission "777" to project folder enclosing with inner folders
This is the linking issue in xcode. You just need to re-link the files.
Please follow the below steps:
Open you peoject's root directory then open node-module -> react-native -> React.
Open React.xcodeproj file in xcode.
You will see missing (showing red in color) files under the third-party folder
Just run the React.xcodeproj project.
After completion close this project & open you project file.
Delete Drive data & Clean the project & run.
If after running the project you are getting linking issue then please make sure you have added all the (ios) products () come under the Libraries -> React.xcodeproj -> Products in your Build Phases -> Link Binary With Libraries.
If everyone has tried solving the issue by this
Open Terminal, go to your project's root folder and run:
cd node_modules/react-native/third-party/glog-0.3.4/
Run the configure script:
./configure
But still not got the solution then,
Go to your Xcode and check if there any library is missing. Add that library and then perform this above step.
Although the already mentioned answers are correct but still few guys are struggling, as only configuring the glog doesn't sometimes resolve the error.
Here I have written a detailed solution to the problem.
Solution: config.h file not found mutex.h During Archive.
The steps are the following:
Remove node_modules directory
Clear Cache
Install packages again with Yarn
Install third party
Configure Glog
Make & Make install glog
For all these above steps the I have shared commands in the above mentioned article, so not going to write again. I hope it will solve problem for guys who are still struggling.

How to create native ios react-native module?

I write react-native app with ios native codes,
then I want to extract one ui component (include swift code) as a cocoa-touch-framework so that other project/people can use it easily.
here is some simplification of what I have done.
$react-native init FooLibContainer #create a new react-native project
$cd FooLibContainer
$react-native new-library --name FooLib # create a library
$cp -r node_modules/react-native/Libraries/FooLib ../
$cd ../FooLib # copy as a standalone library
$open FooLib.xcodeproj #open with xcode
$ # build FooLib target in xcode, Failed by
`.../FooLib/FooLib.h:1:9: 'React/RCTBridgeModule.h' file not found`
$ # add react dependency in package.json
"dependencies": {
"react": ">=15.4.0",
"react-native": ">=0.40"
}
$ npm install
$ react-native link
$ open FooLib.xcodeproj # open project again with xcode
$ nothing changed, same error
Can the lib be compiled alone?
I also tried some libraries in github, like react-native-camera,
git clone
npm install
react-native link
and also get build errors.
What is correct approach to successfully compile an react-native module?

react-native app not working in ios

Hi I have downloaded this sample app https://github.com/iZaL/my-appointment . when i am runing this getting error .can you help me on this issue
my-appointment-master/src/containers/Category/Category.js: Unable to find this module in its module map or any of the node_modules directories under /Users/node_modules/react-native-alphabetlistview and its parent directories
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
1. Clear watchman watches: watchman watch-del-all.
2. Delete the node_modules folder: rm -rf node_modules && npm install.
3. Reset packager cache: rm -fr $TMPDIR/react-* or npm start -- --reset-cache.
i have tried to reset this all but getting same issue
It looks like the project package.json is missing the dependency
react-native-alphabetlistview.
You can install it via
npm install react-native-alphabetlistview --save

ionic build ios fails with "[TypeError: Arguments to path.join must be strings]"

I am trying to create an ionic app on Mac.
I followed the instructions on ionic's website to create a basic app and was able to run it in the browser but when I run "ionic build ios" I get following error. I cannot find a log file or any other error to debug this. How do I go about fixing this?
Check your Gulp version and gulpfile.js. You may need to remove the calls to gulp.src
See:
Gulp TypeError: Arguments to path.join must be strings
and
https://github.com/sindresorhus/gulp-ruby-sass/issues/191
ok, after lot of looking and searching I figured my npm install was messed up.
Part of my installs were in /usr/local and few of them were in /User/user.name/npm folders. /Users/user.name/npm was set in the npm config prefix.
I had two installs of cordova, one on each folder above. Some how the cordova from /usr/local was getting used to create the project and that was the old version.
To fix the problem, I uninstalled all my global npm installs and pointed my npm config prefix to /usr/local and gave myself execute permission on that folder. Everything is working now.
Here is the video that explains how to do it: https://docs.npmjs.com/getting-started/fixing-npm-permissions

Resources