How to create native ios react-native module? - ios

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?

Related

error React Native CLI uses autolinking for native dependencies - RN iOS

I'm new to React native. I get the following error when I try to start the project in the ios simulator. How can I solve this?
Newer versions of React Native have autolinking, therefore you don't need to run commands like npx react-native link some-package-name to link the dependencies
In order to get rid of this error you need to unlink the dependency mentioned in the log, use the following instructions
Run npx react-native unlink #react-native-async-storage/async-storage
Run npm uninstall #react-native-async-storage/async-storage
Run npm install #react-native-async-storage/async-storage
Change to the ios directory cd ios and run pod install
That should solve this issue

How do I make my React Native module automatically add an entry to a project's Podfile after running react-native link?

I want to create a React Native module that can be installed using
npm install --save react-native-my-module
react-native link
cd ios && pod install
Using React Native 0.61.2 and a few required SDKs
Followed the instructions here to create a basic React Native module.
Installed the module using npm install --s 'path to my-module'
Ran react-native link
Installed the pod with cd ios && pod install
I saw my pod being successfully installed.
The default native module skeleton sets up a method called sampleMethod that I invoke using
var myModule = NativeModules.MyModule;
console.log(myModule.sampleMethod());
But I get the following error message
TypeError: Cannot read property 'sampleMethod' of undefined
To fix the error I have to manually link the module with react-native link my-module but then React Native complains
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
- react-native-my-module (to unlink run: "react-native unlink react-native-my-module")
What am I missing here? Do I have to manually link the module or is there a configuration file I can edit somewhere to avoid that?

I have error in run react-native for ios on macbook [duplicate]

I've build a react-native application and suddenly I get this error message on my terminal during run of the command react-native run-ios.
The same code work fine 10 minutes ago and suddenly I get this error message.
Please help...
If you don't have cocoa pods installed you need to sudo gem install cocoapods
run cd ios
run pod install
cd ..
delete build folder
run react-native run-ios
if the error persists,
delete build folder again
open the /ios folder in x-code
navigate File -> Project Settings -> Build System -> change (Shared workspace settings and Per-User workspace settings): Build System -> Legacy Build System`
You should be good to go.
delete the build/ folder in ios/ and rerun
if that doesn't do any change then
File -> Project Settings (or WorkSpace Settings) -> Build System -> Legacy Build System
Rerun and voilĂ !
In case this doesn't work, don't be sad, there is another solution to deeply clean project
Delete ios/ and android/ folders.
Run react-native eject [Edit: deprecated, so skip this step]
Run react-native link
react-native run-ios
This will bring a whole new resurrection for your project
SOLVED: Always be sure to update your Xcode folks!
Protip: And don't do it from the apple store (but always do it from an official apple website of course)
tip from: http://ericasadun.com/2016/03/22/xcode-upgrades-lessons-learned/
official apple download page: https://developer.apple.com/download/more/
For those who are unable to resolve with above method
Go to project settings in Xcode. Menu File->Project Settings
Go to per-User Project Settings section.
Click on advanced.
Select Xcode Default option. previously this used to be Legacy for my project.
I have analysed on similar lines and concluded that clean is causing the archive to fail. So, the new build system is not clearing the custom/legacy build directory.
delete the build/ folder in ios/ and rerun if that doesn't do any change then
File -> Project Settings (or WorkSpace Settings) -> Build System -> Legacy Build System
Rerun and voilĂ !
If it still Fails you need to clean full project
Do the following:
Delete ios dir manually
Clean cache Run npm cache clean --force
Run react-native eject
Re-install all packages npm install
Run the link command react-native link
Finally run react-native run-ios
cd ios && rm Podfile.lock && pod install worked for me.
And perhaps few updates if the first didn't help as much, as:
sudo gem install cocoapods
rm Podfile.lock && pod install --repo-update
For me it caused by installing react-native-vector-icons and linking by running the react-native link react-native-vector-icons command.
I just unlinked the react-native-vector-icons by following commands
react-native unlink react-native-vector-icons
cd ios
pod install
cd ..
react-native run-ios
As I already installed an other icon library.
After upgrading react-native, you may have stale dependencies. The steps below should fix it.
cd ios
delete Podfile.lock
pod deintegrate && pod install
Navigate back to package.json directory
run react-native run-ios
In Xcode you can build your project again too
I did this after upgrading to react-native 0.61
Should always start with the simplest first, after wasting hours and days on this error.
And after an extensive amount of research,
Simply
RESTART YOUR MACHINE
This resolved this error.
I'm on
react-native-cli: 2.0.1
react-native: 0.63.3
If you don't have cocoa pods installed you need to:
sudo gem install cocoapods
Then run:
cd /ios
pod install
delete the build folder in ios folder of your react native project
run:
react-native run-ios
if error persists:
delete build folder again
open the /ios folder in Xcode
navigate File -> Project Settings -> Build System -> change (Shared
workspace settings and Per-User workspace settings): Build System -> Legacy Build System
This problem may occur after installing react-native-vector-icons
Open the project in Xcode.
Go to build phases.
go to Copy Build resources.
Remove all .ttf files from here.
Run the application.
I had the same error, but it was caused by the package manager process port being already used (port 8081).
To fix, I just ran the react-native by specifying a different port, see below.
react-native run-ios --port 8090
A popular reason to builds failing and error code 65 is a missmatch between cached pod files and current packages used. Here is how to remove the cache and recreate the pods.
1. Delete Derivate Data - Remove data that includes cached info of the project Example how to do it: https://www.youtube.com/watch?v=f8bTvx0Aoyo
2. Delete .xcworkspace file from ios folder - This is the Xcode project file that gets created when you run pod install we want to recreate it in step 4. This project file uses pods and has a white coloured icon instead of the blue coloured base project without pods.
3. Delete Podfile.lock - Remove old dependencies info so we can recreate them in the next step.
Do a pod-install in ios folder or npx pod-install in root with (React native) - Here we download the pod dependencies again and the pod files only the ones that are used from the current packages are downloaded. A .xcworkspace is regenerated
In my case, the issue was with my Xcode build scheme. When you run react-native run-ios you may see something like,
info Found Xcode workspace "myproject.xcworkspace"*
info Building (using "xcodebuild -workspace myproject.xcworkspace -configuration Debug -scheme myproject -destination id=xxxxxxxx-xxxxx-xxxxx-xxxx-xxxxxxxxx -derivedDataPath build/myproject")*
In this case, there should be a scheme named myproject in your ios configurations. The way I fixed it is,
Double clicked on myproject.xcworkspace in ios directory (to open workspace with Xcode)
Navigate into Product > Scheme > Manage Schemes...
Created a Scheme appropriately with name myproject (this name is case-sensitive)
Ran react-native run-ios in project directory
In case you are using a Mac M1 architecture it is not directly compatible with Cocoapods. If you encounter issues when installing pods, you can solve it by running:
sudo arch -x86_64 gem install ffi
arch -x86_64 pod install
These commands install the ffi package, to load dynamically-linked libraries and let you run the pod install properly, and runs pod install with the proper architecture.
Source: https://reactnative.dev/docs/environment-setup see "Note for Mac M1 users"
run pod install inside ios folder then go back to root folder and run npx react-native run-ios
What worked for me was to rename the project by removing the special characters.
Example: "project_marketplace" to "projectmarketplace"
In this case, I redid the project with react-native init and copied the src and package.json folder.
If you encountered issues with M1.
Try installing the ffi package and running install again.
sudo arch -x86_64 gem install ffi
cd ios
arch -x86_64 pod install
Another solution that I found here works great, basically installing cacoapods with brew (and passing -arm64).
sudo gem uninstall cocoapods
arch -arm64 brew install cocoapods
cd ios
pod install
This could also be due to having custom named schemes, in that case:
cd ios
xcodebuild -list
Find your's, it might have a -dev suffix. Then:
cd .. (root of the app)
npx react-native run-ios --scheme custom-scheme-name
In my case everything solved after re-cloning the repo and launching it again.
Setup:
Xcode 12.4
Mac M1
In my case, none of the answers resolved it, since am not able to open .xcworkspace at all. But the legacy comment hinted to a RN to Xcode <> compatibility issue, so i tried all the previous RN Versions and all below RN#0.64 seem to work with xcode 11.3.1
npx react-native init projectName --version 0.62.0
Thanks
Below work for me though I encounter error code 65 due to I rename an existing project name to a new name which I did for all the files within the project.
My solution was :-
At ios folder level open xworkspace with xcode.
Click on file tab then click on workspace settings.
I clicked on advance then I select xcode default then I clicked on close button.
I clicked on scheme tab which is beside the stop button at the right then I clicked on edit scheme.
When the edit scheme opened I clicked on build tab then I click on manage scheme button.
I selected scheme of my project name then I clicked the minus(-) button to delete it then I clicked on close
I clicked on clean build folder then when its complete I clicked on build tab to rebuild the project.
I clicked on play button which i selected the simulator I want then everything work perfectly again.
I too had an issue with react-native-vector-icons causing this. I still wanted to use the icons though, and I was using VSCode
Workaround was to more or less the same as the manual instructions from the docs but a little different.
npm install --save react-native-vector-icons
copy the .tff files you want to use in node_modules -> react-native-vector-icons -> fonts
create a new folder "fonts" in src -> ios
...paste the .tff files in there
open 'info.plist' in src -> ios -> mobile
on the line above </dict> paste:
<array>
<string>AntDesign.ttf</string>
<string>Entypo.ttf</string>
<string>EvilIcons.ttf</string>
<string>Feather.ttf</string>
<string>FontAwesome.ttf</string>
<string>FontAwesome5_Brands.ttf</string>
<string>FontAwesome5_Regular.ttf</string>
<string>FontAwesome5_Solid.ttf</string>
<string>Foundation.ttf</string>
<string>Ionicons.ttf</string>
<string>MaterialIcons.ttf</string>
<string>MaterialCommunityIcons.ttf</string>
<string>SimpleLineIcons.ttf</string>
<string>Octicons.ttf</string>
<string>Zocial.ttf</string>
<string>Fontisto.ttf</string>
</array>
...or whatever fonts you selected.
I ran react-native run-ios and it worked like a charm.
Some changes in Podfile haven't been updated. Maybe one of your native dependencies has changed.
expo prebuild --clean
cd ios
pod install
yarn ios
In a React Native app, I removed some font assets that I previously linked. For some reason, they didn't get deleted from the Xcode project. I deleted them manually and then it worked.
For our project, we had to run the npx react-native link command in order to get the react native vector icons to show up on Android phones. But that added code to the ios/yourprojectname.xcodeproj/project.pbxproj file.
And that caused the build to fail, throwing an error code 65 and listing out all the fonts that were duplicated.
So, to fix the error, we just removed all of the new code that was added by the npx react-native link command.
If you've built/run your app previous from Xcode and want to go back to using the terminal you need to clean your build folder.
Go to product -> Clean Build Folder
In my case it was an issue between different installations of npm installed via nvm and homebrew which somehow messed up my setup.
Building via Xcode usually works without solving the initial problem. I have solved it as follows. Notice, that this guide is suitable if you want to use nvm.
First, we remove a possible installation of npm and yarn using brew as follows.
brew uninstall npm
brew uninstall yarn
We might want to remove nvm as well.
rm -rf "$NVM_DIR"
Next, we reinstall nvm by executing the following command.
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | <ShellOfYourCoice>
Replace <ShellOfYourCoice> with bash if you are using bash, with zsh if you are using zsh.
Add the following content to ~/.bash_profile (.bashrc) for bash or to ~/.zshrc for zsh (you might need to create these files).
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
For zsh, we might need to fix some permissions. Execute the following command.
compaudit | xargs chmod g-w
Then, source the shell of your choice. Verify the installation by executing the following.
nvm --version
which npm
The last command should print something similar to the following.
/Users/<userName>/.nvm/versions/node/v16.10.0/bin/npm
If yarn were installed using npm previously, we first remove it.
npm uninstall yarn
Next, we reinstall it.
npm i -g yarn
These steps fixed the issue for me.
For macOS, make sure that none of the names of the directories has a space character ' ' in their names. I spent hours figuring out the problem and the problem was so small.
error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65
That was my error and i resolve this error with the following commands:-
1- Uninstall Ruby with: brew uninstall ruby --force
2-Uninstall CocoaPods. At first, try to list all CocoaPods versions / components with gem list --local | grep cocoapods. Then uninstall them one by one, in my case:
1- sudo gem uninstall cocoapods
2- sudo gem uninstall cocoapods-core
3- sudo gem uninstall cocoapods-downloader
,cocoapods-plugins
,cocoapods-search
,cocoapods-trunk
,cocoapods-try
etc.
3- As a next step I was able to reinstall ffi and then CocoaPods with:
i) sudo arch -x86_64 gem install ffi
ii) sudo arch -x86_64 gem install cocoapods
Once done, I could run pod install as expected. Note that I had the Terminal open all the time in standard mode - no Rosetta required.
If you're like me and tried to change the name of the TestApp-folder. Notice the last line in the warning:
xcodebuild: error: The workspace named "TestApp2" does not contain a
scheme named "TestApp-tvOS". The "-list" option can be used to find
the names of the schemes in the workspace.
Not changing the TestApp name in the command nor after from this, helped me get rid of the message and the app was built:
react-native init TestApp --version=react-native#npm:react-native-tvos#latest
there was some issue while creating the app
so in my case i just deleted the package-lock.json and did npm i
after that
cd ios/ and pod install

Create react native module and use it in application

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.

"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.

Resources