Developer menu appears transparent on iOS - react-native

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.

Related

npx expo run:android -> CommandError: No development build (<package>) for this project is installed

After running npx expo run:android once, the app was pushed to the device and the app started up.
I then uninstalled the app on the device and then when I run npx expo run:android once again I get the error:
CommandError: No development build (<package-name>) for this project is installed. Please make and install a development build on the device first.
Learn more: https://docs.expo.dev/development/build/
I started another dummy project with another package name and the same thing can be reproduced after uninstalling once.
The built app is not installing once again on the Android device and then starting up.
The docs referenced in the error states https://docs.expo.dev/development/build/#locally-with-xcode-and-android-studio the following:
If you are comfortable setting up Xcode, Android Studio, and related dependencies, you can build and distribute your app the same as any other iOS or Android app.
The npx expo run commands will create a new build, install it on to your emulator or device, and start running it.
Not sure what I am doing wrong. Any help is appreciated.

How to install react-native cli packages with "pod install" vs "linking manually"

I am new to react native. I uses the Cli version. I installed some packages e.g. react-navigation. After the installation I open the ios folder and run pod install. It works fine, but with react-native-vector-icons I have to link it manually like this: react-native link react-native-vector-icons. And I don't have to run pod install. But what if I want to install additional packages after that like sqlite? For this package i have to run pod install. Do I have to reinstall the vector icons after every other package installation? I am new to react-native and I don't now much about "pod install", "linking" and so on. So please give me a bit more details on how to work with adding new packages with this special task.
Many thanks
Jens
Since react-native 0.60 linking is no longer required since it is managed by react-native itself, remember that react-native is something like a "controller" in javascript that sends commands to native code in iOS and Android, pod install is the way you install the iOS native components required by your react-native libraries, something like npm install but for iOS.
react-native-vector-icons has its own iOS libraries, so it requires to run pod install(you should run a pod install everytime you add a new library, eventually you'll understand when you need to run it and when not). There's no harm in running several times pod install so don't worry about it. Also for react-native-vector-icons if I'm not mistaken, you also have to modify info.plist in order to have all the typographies available (This is the "hard" part about this library, it has additional typographies that should be embeded in your project)

react-native app crashes while I want to run debugger-ui react-native-debbugger

I have started my application and install npm packages using npm install, then as usual I have installed debug version of the application using npx react-native run-android, then started the application with npx react-native start. The works fine until I want to use debugger-ui and debug my application using react-native-debugger or fb-flipper.
The problem occurs when pressing r in the terminal and choosing Debug from the modal that appears on the emulator screen.
This is the error that I'm facing with int he terminal:
And also this one in the React Native Debugger tab in the chrome console:
As I'm using the latest version of react-native-reanimated in this project and have followed the installation instructions in the documentation I have used this command for installing that:
npm install react-native-reanimated#next
I have been looking into documentation and after reading that really carefully I have just figured out that the react-native-reanimated#2 is not going to work with react-native-debugger and you can run debugger-ui the documentation recommended to use facebook flipper another amazing developer tool for react-native apps.

Generate Android and IOS folder in react native directory with Yarn

I have been having some trouble finding some straight answers in generating android and ios packages in a pre-existing react-native project.
yarn start works for me to view my project in on the web browser but I am trying to create an ios and android native project from this pre-existing website. Right now I have an empty template project that can be made using these commands on Mac Os after installing yarn:
yarn create react-app website
Now here is what my directory looks like. It is missing the android and ios directories that I will use and then run the command
yarn ios
or
yarn android
Thanks I really appreciate the help. I have never worked with react-native so if the answer is obvious please explain anyways.
yarn create react-app website
It will create website only, if you want to create react native app use
expo init AwesomeProject
or
npx create-react-app my-app
or
npx react-native init AwesomeProject
If you want to give support of web inside your react-native app, you can use react-native-web

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