React Native: how to run flipper with apple silicon - react-native

I have a problem trying to run an application made in react-native which uses Flipper in apple silicon, I get the following error:
I tried some things like running Xcode in rosetta mode but it didn't work, I also tried some possible solutions mentioned in this issue, but none of the options worked.
for now, the only thing that has worked is to adjust the react-native.config.js file to prevent auto-linking for Flipper, like so:
module.exports = {
dependencies: {
'react-native-flipper': {
platforms: {
ios: null,
},
},
},
//... other react native configs
};
This option disables Flipper and what I need is to make it work, not to disable it.

Bump the FLIPPER_VERSION variable in android/gradle.properties. as
# Version of flipper SDK to use with React Native
FLIPPER_VERSION=0.158.0
Then run cd android && ./gradlew clean && cd ..
It will integrate flipper on your project. By using this you need to install flipper to debug an app on your system and then install Sdk on the flipper app. then you can debug your app by using the flipper.
For further explanation, you can visit Here.
I hope this will help you.

Follow the below steps:
Clean everything, use everything based on the M1 build, I mean Xcode, packages, libraries and etc. everything must be based on the M1 build form
Initial an RN project, go to the ios folder, and run this command: arch -x86_64 pod install.
It wouldn't affect your project development source and an Intel base macOS system or other platforms would be able to continue on this source.

Related

Developer menu appears transparent on iOS

After creating a vanilla React Native/Expo project from either expo init AwesomeProject or npx create-expo-app AwesomeProject, I end up with a transparent developer menu. A similar problem happened in the post Expo developer menu not showing on Android. I am experiencing the problem on a Mac with Monterey 12.6 and an M1 processor. So far the problem seems to only be on the simulator.
I've tried a clean install of Node with NVM before recreating a blank starter project, but still the problem persists.
Some version info:
Node: 16.18.1
npm: 8.19.2
Xcode: 14.1/14B47b
expo: ~47.0.6 => 47.0.6
react: 18.1.0 => 18.1.0
react-native: 0.70.5 => 0.70.5
Expo Workflow: managed
Basics of what I've done:
npx create-expo-app AwesomeProject
cd AwesomeProject
npm run ios
If I go back to using Expo SDK 45 and expo-cli#5.4.3 the menu starts working again.
Is there some way I can nuke it all from orbit and be sure I'm starting clean? The same set of commands above works on a coworkers computer, so I'm really lost.
I was finally able to solve this problem myself. My problem was not the fault of Expo or Expo Go, but rather the fact that my work laptop uses a corporate proxy that fiddles with certificates.
After opening up Console.app and watching Expo Go's logs, I saw a bunch of errors complaining about not being able to verify a certificate, with the name of my corporate proxy's CA in the errors.
I added and trusted the CA on my simulator and tried again. The developer menu appeared correctly, presumably because it could finally download some assets it needed.
check the dependencies in your package.json, if you have "react-native-reanimated": "someversion", delete it, and everything works. If reanimated is an essenential dependencies, remote debug from your phone will not work.
After deleting reanimated, run npm install or yarn install.
If this is not working, delete the folder node_modules and use expo install to install all modules.
Let me know if this works.

Expo Managed Workflow - Modify CocoaPods Podfile

Modify CocoaPods Podfile for MLKit
I would like to implement react-native-camera for managed workflow which requires MLKit for text recognition.
How do I add the following snippet to the CocoaPods Podfile so I can enable text recognition?
pod 'react-native-camera', path: '../node_modules/react-native-camera', subspecs: [
'TextDetector',
'FaceDetectorMLKit',
'BarcodeDetectorMLKit'
]
Confusing documentation
Yes, it's possible to run native code in managed workflow
EAS for building dev build
Install the dev build build on device
Start dev client and scan QR code on device
I was unable to modify the podfile after build so forked the project and made the necessary changes myself, this way I didn't need to modify the podfile.

cannot create iOS folder on my react native app

I am asking this question for the third time and I don't get it why no one even tries to help on this, is this question not well explained? If you can ask for more information I can give!
I am having trouble created iOS folder inside my react native app(detached) as when I created the app I created it from windows machine and iOS folder didn't come when I wrote: exp detach
Now that I have got a macOS, how can I get to create iOS folder so I can use that to build from xCode. I tried react-native upgrade, this is telling me that I have some version conflicts, so I don't want to upgrade it actually, I just want to have iOS folder on my react native.
What would be the best solution in here?
Interestingly I tried exp detach over my detached app and it created iOS, it's working! hopefully this will help anyone!
Please follow the below steps:
Step I: Ensure below installable are installed
Java Sdk Android Studio
Xcode (in case of OSX)
HomeBrew (in case of OSX to install node)
Node/NPM (Node runs Javascript outside the browser. NPM is used for installing and managing Dependencies. Node and NPM come
together)
Those are some essential installs that you will need in your Project
**Step II: **
For windows/OSX you need to run the following commands in your command prompt/command line:
This is the important part for running a react native project:
**Step II: **
npm install -g react-native-cli
Then you can use this cli to start a new project like this:
**Step III: **
react-native init
Hope this helped you, please vote..

React Native IOS Build CFBundleIdentifier Does not Exist

I have create sample React Native project and following the tutorial as per react native website.
I have try to run the application IOS simulator, its throwing error as below ,
** BUILD FAILED **
The following build commands failed:
PhaseScriptExecution Install\ Third\ Party /Users/Test/Documents/REACTJS/SampleReactNative/ios/build/Build/Intermediates.noindex/React.build/Debug-iphonesimulator/double-conversion.build/Script-190EE32F1E6A43DE00A8543A.sh
(1 failure)
Installing build/Build/Products/Debug-iphonesimulator/SampleReactNative.app
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2):
Failed to install the requested application
An application bundle was not found at the provided path.
Provide a valid path to the desired application bundle.
Print: Entry, ":CFBundleIdentifier", Does Not Exist
Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/SampleReactNative.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist
my environment setup information,
node version v9.8.0 npm version 5.6.0 react-native-cli: 2.0.1
react-native: 0.54.2 xcode 9.2
Please help us to resolve the issues.
I have the same problem right after init:
react-native init myapp
cd myapp
react-native run-ios
..although run-android was fine.
Not a solution but a workaround for the moment, maybe be to init using a lower version of RN:
react-native init myapp --version react-native#0.51.0
That builds okay.
Similar in an existing project, install an older version of RN.
Other versions before 0.54.2 might work but I haven't tried.
(edited 2018/4/2)
Found my solution from this link: https://github.com/facebook/react-native/issues/18238
RN 0.54 requires types available since iOS 11. So you have to upgrade your xcode and set minimum iOS version in your app to 11
In short, upgraded OSX & Xcode to the latest. (As of today, OSX 10.13.4 Xcode & 9.3)
This may happen because of some library files not found.You need to follow some steps That I have done and it is worked perfectly for me.
1.) go to Xcode project -> Target -> select build Phase -> Go to target dependies -> Click on + -> add "react" and press add.
2.) Xcode > Product -> scheme > manage sceme -> click on + button -> targetName(React) -> Okay -> make shared of this by select checkbox under shared column.
3.) Clean your project and try to build, If it is getting some error like "glog/logging.h file not found" or "cofig.h file not found" in Xcode and "CFBundleIdentifier not exist" then do not worry. You are just one step far. This is may occurs if you are missing config.h file, For this you need to update config.h file. For this
4.) follow below steps
a.) close your Xcode
b.) Open terminal with the project (Or you can directly left click your project and drag your folder to closed terminal, [It will automatically take the path from your that corresponding folder])
c.) write command
cd node_modules/react-native/third-party/glog-0.3.4/
d.) Run the configure scripted file by the command
./configure
e.) now close terminal and go to terminal with your project root path. now try final run your iOS project by
react-native run-ios
For XCODE 10.0,
I did two things
1) check out this answer
which basically says
Go to File -> Project settings
Click the Advanced button
Select "Custom" and select "Relative to Workspace" in the pull down
Change "Build/Products" to "build/Build/Products"
2) If (1) doesn't work for you then open your project from xcode
go to project navigator and select your project name --> go to info --> use debug for command-lines builds.
do this
3) go to terminal and react-native run-ios
Run the command:
react-native upgrade
react-native run-ios
or:
react-native run-android
Try to add CFBundleIdentifier in the Info.plist as:
<key>CFBundleIdentifier</key>
<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
I experienced this issue due to the xcode 12 upgrade, and I solved my problem by upgrading my rn by using this command:
react-native upgrade
then go to podfile change your:
pod 'ReactCommon/callinvoker', :path => "../node_modules/react-native/ReactCommon"
to:
pod 'React-callinvoker', :path => "../node_modules/react-native/ReactCommon/callinvoker"
Do you have CFBundleIdentifier in your Info.plist?
If not than add it for eg. com.ios.learning
Usually, this error comes up due to inconsistent versions (either of react-native, OS or XCode). I had the same issue with react-native v0.57.0 on MacOS Sierra and XCode v9.x.
All I had to do was to upgrade to High Sierra and then XCode to v10.0.
Otherwise, you'd have to use an older version of react-native either by downgrading it
or by initialising a project with an older version
react-native init test --version react-native#0.x.x
In my case, just delete the build directory, Pods directory, node_modules directory and running yarn install, pod install and npx react-native run-ios solves the issue.
React Native is trying to install your app on a different app name for some reason. What you can do is in Xcode --> build settings --> packaging --> change the product name to the one given in the path which the simulator is trying to install.
Look at this: https://amala-gopal.medium.com/entry-cfbundleidentifier-does-not-exist-6098b90516f6
npm uninstall react-native
delete ios and android folder
then run :
npm install react-native
react-native upgrade

React Native: Android Studio doesn't automatically bundle when building

I am building a react native application and we're doing the production release.
I noticed that everything works in my iOS app (there's a build phase that generates the offline bundle) but when I run the release build in Android Studio, my app builds but it crashes because it can't find the bundle.
I was able to resolve my own question:
We changed our build types/flavors to match our desired configuration.
The react.gradle file that comes with React Native has a configuration for Debug and Release, these are the common build tasks in a native application. BUT once you change things up you need to tell the react library in android whether or not you want it to bundle for you.
You can find this in your app's build.gradle (under
./android/app/build.gradle). There's an entire block of guidelines commented out that explain you what to do.
In my case I had to add the following code before apply from: "../../node_modules/react-native/react.gradle"
ext.react = [
bundleInNameDebug: false,
bundleInNameBeta: true,
bundleInNameRelease: true
]
NameDebug, NameBeta, NameRelease are all custom BuildTypes/BuildFlavors I have configured.
If you have the signing configuration, it should build a apk for testing when you run react-native run-android --variant=release with the offline bundle. If you want to make a release build for Playstore, run ./gradlew assembleRelease inside the android folder.
You can find more info here