How to debug React Native App with Flipper? - react-native

I use React Native Debugger but it has its limitation so can anyone guide me with the bare minimum on how to start debugging using Facebook Flipper and even is it worth it to use?
My main requirement is to be able to monitor the Network and Database of React Native app.

please go through below points for debug react native app using flipper.
React Native version should be latest.
Install desktop app for flipper in window and mac(If you are using mac than may be ask for some permission).
Open flipper and run react native project.
Finally If you see in flipper than you project dom tree is showing in react dev tool.Below I attached screenshot for react dev tools using flipper.
Note:- Flipper provide more feature like inspect network request, layout, you can check react native log and native logs(for ios and android).It is more easy just follow above steps.

Related

How do I choose a default React Native debugging tool when I `Open the Dev Tools`

I am using both the Flipper and React Native Debugger on a React Native project.
I find JavaScript logging by React Native Debugger to be much richer given JSON formatting than Flipper (logs dumped as serialized strings). I however love the additional log tooling(especially for native logs) that Flipper provides.
Is it possible to setup choose the default Dev tool?
Opening the dev tools on the iOS simulator, all logs open with Flipper even if it was quit and the React Native Debugger was already open.
I have tried to configure a different port listened to by the debugger and dev tools but a flipper is still given the lead.
Has anyone tried to you both successfully?
Not tried but seems like this article can help you out:
Medium
Already given on React-Native official doc to setup default debugging tool.
If nothing messed up with your local setting then simple disabling can help.

Synchronizing React-native application integrated with the iOS Calendar using expo

I am trying to link my react native app with the iOS calendar. My app runs on expo and uses the react-native-calendar-strip. I've been searching to see how to make a start but not quite sure.Could you please guide me on how to do this?
below is the package that I used
https://github.com/BugiDev/react-native-calendar-strip

How to measure react native (Expo) app startup time?

I have an Expo hybrid app (Managed workflow), running on Expo SDK v37 (React Native v0.61).
I'm struggling to find the best way to measure the time it takes from the moment when the user starts the app until the splash screen disappears.
How would you approach this?
PS: I would use Firebase Performance Monitoring instead, if it was available for Expo Managed apps. But it isn't yet.
Basically I see two approaches:
For pure react-native projects you can use react-native-startup-time library.
However I'm not sure, whether you can just add this library and start to use it, since it's required linking.
But in any case you can eject your project and add this library.
If you don't want to eject expo project I can suggest you to update your project to SDK 38. It has support for RN 0.62.2 and flipper integration as well. So you can setup flipper-plugin-react-native-performance and check the performance.
I hope I helped a bit.

How to properly start a detached React Native app

I am using React Native for the first time and I can see that we can detach from the Expo. I have no reason to detach, but I am sure will have later so I will detach from the start.
Question: What is the commands to start directly detached app using react native commands.
I have used create-react-native-app my-app then run expo detach this seemed to detach the app but for some reason only android folder is showing while ios folder is missing, anyone have any idea how do I have both platforms created on a detached version!
Thanks
A Mac is required to build projects with native code for iOS. You can follow the Quick Start to learn how to build your app using Create React Native App instead.
As per the react-native docs, you can't detach & develop for iOS unless you are on a Mac. Link(Under Building Projects with Native Code)

React Native using Expo SDK is really native ?! or like cordova

I am new to React Native and I know that there are two ways to develop native applications using react native
1- react native init --> need to compile the native cod
==> Result is Native Application for Android "Android SDK required" and Native Application for IOS "Xcode required"
2- create react native app --> no need to compile the native code !!
as CRNA uses Expo_SDK to access native API, but :
Is the result app is really native! or Expo Sdk is like Cordova but used by React and if result native, Expo claims that the result is native!, have they cloned both Android Sdk and Xcode for IOS or how does it work ?!
Expo apps are React Native apps which contain the Expo SDK. The SDK is a native-and-JS library which provides access to the device’s system functionality (things like the camera, contacts, local storage, and other hardware). That means you don’t need to use Xcode or Android Studio, or write any native code, and it also makes your pure-JS project very portable because it can run in any native environment containing the Expo SDK.
Expo also provides UI components to handle a variety of use-cases that almost all apps will cover but are not baked into React Native core, e.g. icons, blur views, and more.
Finally, the Expo SDK provides access to services which typically are a pain to manage but are required by almost every app. Most popular among these: Expo can manage your Assets for you, it can take care of Push Notifications for you, and it can build native binaries which are ready to deploy to the app store.
You should take a look at the Expo doc
Expo app is as native as React native. They do the following things so you don't need to setup Android / iOS SDK locally.
provide Expo App on Android/iOS
so you can build the js code and use Expo App to debug during the development.
provide build server
once you run expo build command, expo will upload the compiled js code and build Android/iOS file on their server. You can download the built file from their server.
You can eject from the Expo, setup Android / iOS SDK locally, and build the app as normal React Native app
Expo (and react-native) apps use native (android and ios) ui components to render the apps ui, like any native android or ios app would. Therefore they can be considered as native apps.
However your app logic is executed within a javascript thread an will communicate with the native threads (through the react-native bridge) to modify the native ui components. Since the bridge is completely asynchronous this should not affect the native ui performance of your application. If you want to understand the communication between js and native code it may be a good start to read this guide.
2- create react native app --> no need to compile the native code !!
With expo there is no need to compile native code, as expo already includes a "ready to use build" of react-native along with several other common react-native libraries. In an expo app this will be used together with your javascript bundle which than communicates through the react-native bridge with the already present native part.
They are basically just abusing the fact that you can inject different javascript bundles into a prebuilt react-native app. (as long as you are using only accessing a subset of the native functionality of that prebuilt app)
Note that Appcenters codepush uses the same functionality and their setup integration actually delivers a nice example how different javascript bundles can be loaded without touching the native part:
in ios AppDelegate.m this line is changed:
original react-native js-bundle loading which always resolves a static bundle
return [[NSBundle mainBundle] URLForResource:#"main" withExtension:#"jsbundle"];
js-bundle loading with codepush which can resolve to different js-bunldes
return [CodePush bundleURL];
Link to full codepush ios integration guide