Flipper react native что это

React Native Support

The React Native and Developer tooling teams at Facebook work in close collaboration to make sure Flipper offers top-notch value out of the box for React Native development. Integration between React Native and Flipper is enabled out of the box in React Native version 0.62 and higher.

Device type: React Native​

In Flipper there is a dedicated device type, “React Native”, that connects to a locally running Metro instance to interact with your React Native app. This device will be detected as soon as you fire up a Metro instance by running yarn run ios or yarn run android in your project.

If Metro is connected, two new buttons will appear in Flipper’s main toolbar: “Reload” and “Open Dev Menu”. Both do exactly what their name suggests, without needing the agility of a pianist to get to the right keyboard combo inside your emulator. The “React Native” device will feature two plugins out of the box: “Logs” and “React DevTools”.

The React DevTools allows you to inspect the component tree and tune the props and state of your React components.

The Logs plugins will allow you to search, filter and even put watch expressions on your logging output. This offers a much richer way to interact with your logs compared to the terminal output of Metro.

Native plugins for React Native​

Beyond the React Native specific Flipper plugins described above, with Flipper you will also inherit the plugin eco-system that exists for native Android and iOS apps. This means that you will be able to use plugins that are aimed at native apps for your React Native app as well. Example plugins include:

Writing JavaScript plugins for React Native + Flipper​

One of the greatest values of Flipper is its extensibility. Many teams across Facebook already have written their own one-off plugins that help with analysing very specific use cases. Writing plugins for Flipper doesn’t require any native code, as the Flipper SDK is exposed directly to JavaScript through the react-native-flipper package.

Example Flipper plugin: playing a game of Tic Tac Toe using Flipper and some emulators

If you would love to build a specific (or generic) extension for Flipper check out the following pointers! Plugins for Flipper can be distributed through NPM so sharing them is trivial.

Community React Native plugins for Flipper​

The React Native community has also started to build plugins for Flipper.

Got your own Flipper plugin for React Native you want to plug here? Please sent us a Pull Request!

Источник

Mar 28, 2020 · 2 min read

Flipper is a platform for debugging mobile apps on iOS and Android. Visualize, inspect, and control your apps from a simple desktop interface. Use Flipper as is or extend it using the plugin API.

Flipper helps you debug apps running in an emulator/simulator or connected physical development devices. It provides a bunch of useful tools, including a log viewer, interactive layout inspector, and network inspector.

To use Flipper, you need to add the mobile SDK to your app. If you are using React Native 0.62 or higher, this is largely done automatically for you.

It consists of two parts:

A n d includes some default plugins:

What does it provide?

Some different features, we have Layout. It shows native stack tree with full properties style.

Besides, if you feel less plugins, you can install more with Flipper package.

Review?

In my opinions, Flipper is same as React Native Debugger, but it focus more about how native modules works, what value inside.

Summary, Flipper is a powerful tools, It will become a promising tool for mobile developers.

Источник

Debugging React Native apps with Flipper

October 8, 2021 5 min read 1528

I have to admit that I don’t typically set up a debugger unless it is easy to use. I have been a developer for almost two decades now, and back when I started, it was never easy.

But then I learned about Flipper, one of the best debuggers I have used for any technology.

What is Flipper?

You can constantly log your Redux state to the console when it updates, but those results are much harder to look at than a nice table that lists all the updates and a breakdown of the changes you can click through.

You can also figure out how to log every part of your network call, or you can just use Flipper and see why you are getting a 403 error right away.

But Flipper can do much more than that. It has a plugin system for adding specialized debugging. This article will walk you through how to debug React Native using Flipper.

Installing Flipper

Installing the desktop app is easy. You can find installation files for Windows, Mac, or Linux here.

Depending on your operating system, you will also need to have the Android and the iOS development tools installed, which only makes sense because, otherwise, why would you install Flipper? You will also need to have OpenSSL installed.

I spotted Flipper earlier when a project I was working on used an older version of React Native, but I didn’t want to investigate setting it up manually on both iOS and Android.

Fortunately, it now works in React Native as long as you are using version 0.62 or higher. To start using Flipper in a new React Native app, install the Flipper desktop app, start Flipper, and run your project.

Once you have installed Flipper, click the Setup Doctor button on the left menu to ensure you have all the dependencies installed. If you are missing anything, Flipper will tell you how to fix the issue.

Built-in Flipper features

Out of the box, Flipper comes with more than what you would expect from a standard debugger. It puts everything you want to know about the state of your project in one place.

Easy debugging with Flipper

You can debug just as easily in Flipper as you can in Chrome by clicking the Hermes Debugger menu. You can use console.log — like I did below — if you want to. It works well in a pinch.

Native logs

If you develop in React Native, you likely know you have to debug issues in multiple places, including natively. Sometimes the app crashes and the React Native logs don’t help much.

Flipper provides access to the native logs under the Device section of the left menu. It helps to know what you are looking for when you view the logs, so you can use the filter field at the top to narrow down the results.

Enable React DevTools with Flipper

When I started developing in React Native, I missed being able to use React DevTools. It’s easy to overlook errors in your component props in your code, and this tool will tell you exactly what is happening. It is also helpful for finding undocumented props in third-party components.

Network debugging

This tool helped me track down why a splash screen was stuck. A network call failed and prevented the app from going to the dashboard screen.

If you debug through Chrome, you can’t see the app’s network calls without adding some code to the project. All you can see is the internet network calls for the fonts and images. And, to be able to debug app network calls through Chrome, I had to add this code to the App.tsx file:

With Flipper, I don’t have to worry about that anymore:

Redux debugger

Redux is great until you have a typo somewhere and can’t spot it in your code. Sometimes console.log works for debugging Redux, but it’s not easy. You usually have to log in multiple places to figure out what is going on.

Shared preferences viewer

This screen will help you determine what is going on in shared preferences, i.e., if your app is logging users out every time it closes.

Native layout inspector

This inspector lets you see what is happening in your native layouts. It also supports some third-party React Native components like Litho and ComponentKit.

Additional benefits to using Flipper

Flipper allows you to control other things with the buttons on the left sidebar and underneath the device selector. With it, you can:

Using Flipper plugins

This is the feature that separates Flipper from other debugging tools: Flipper is extensible. You can get to the plugin menu by clicking on the second tab down on the left, the one with the squares.

If you click on the install menu, it will take a while for the available plugins to show up. It doesn’t have a loading indicator, so just be patient and they will eventually show. From there, you can install plugins with a click of a button or select the local plugin path from the form on the bottom.

Here are some of the plugins currently available.

You can also create your own plugins and contribute them to the community.

Debugging with breakpoints

It has been a while since I used breakpoints to debug JavaScript because console.log does the job just fine. React Native is a different animal and breakpoints are nice there, so let’s look at how to use them.

The first thing you need to know is that you have to be using Hermes in your React Native project to use breakpoints, and you won’t figure this out by yourself until you wade through half a dozen issue threads.

But, for the most part, it’s easy to enable Hermes in your project. It will make your React Native app run faster, especially on Android. I did run into one issue with a package I was using, but updating to the latest version fixed the problem. Most of the other issues I ran into involving Hermes were caused by issues with third-party packages.

With Hermes enabled, select the Hermes Debugger (RN) section, which will load an instance of Chrome developer tools. Select the Sources tab, where you will find the files in your project in the left sidebar under Pages. They should be under the localhost:8081 folder.

Then, select the file you are working on and click left of the line number you want the breakpoint on, and run your app to that point.

In this example, I was trying to figure out why I was getting a 401 from an endpoint. I found out right away that I wasn’t using await when getting the token from shared preferences. I knew the token was correct because I could go to the Shared Preferences Viewer in Flipper and check it:

Conclusion

There is no reason not to use Flipper if you are developing apps in React Native. All you need to do is download Flipper, install it, then run it. I, too, thought console.log was enough, but now I wish I had Flipper available for all of my projects that don’t use React Native.

LogRocket: Instantly recreate issues in your React Native apps.

LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.

LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket’s product analytics features surface the reasons why users don’t complete a particular flow or don’t adopt a new feature.

Start proactively monitoring your React Native apps — try LogRocket for free.

Источник

React Native Flipper: A Better Way of Debugging

What is Flipper?

It’s an open-source debugging tool made by Facebook for mobile apps — both for iOS and Android. It existed for quite some time, but it has not been widely used. However, it can change with the release of React Native 0.62, which has Flipper integrated by default.

Flipper is using remote debugging, which lets the app run in the environment as close to production one as possible. It gives you more confidence when debugging apps in comparison to direct debugging.

But the biggest advantage of Flipper which differs it from other debugging tools is plugin library that allows you to install plugins directly from Flipper interface and extend its capabilities. You can also make your plugins and share them! But let’s go from the start.

Direct vs Remote Debugging

You may be wondering: “What is remote or direct debugging?” or “Why do I want to use Remote Debugging at all?”. Let me explain.

By default, when React Native app runs on the target device, it uses javascript core as its engine. Things look different when you start debugging your app, for example, using web remote debugging or React Native Debugger.

In this case, the app is running on your local machine using V8 underneath. It is an issue because it can lead to errors which may be missed just because they don’t appear on V8 or vice versa. Also, the performance of your app is different when running on your machine versus a real device.

How to start using Flipper

As I mentioned at the beginning, if your app is using React Native 0.62+, you already have Flipper integration in your app. Just install Flipper, and you are good to go!.

If you are using older versions, there are some additional steps to make Flipper work with your app. Follow these URLs for both iOS and Android.

First steps

This is what you will see after starting Flipper (assuming you are running a React Native app on your machine or connected device).

From here you can access things like:

If you want you can install many other plugins that you might need using plugins manager, it allows you to browse your installed plugins, removing them updating or adding new ones.

Writing your own plugins

Using Flipper, you can make your plugins to help you debug/test specific use cases in your app. You can make any interaction with your app — exchanging data, sending or receiving events and wrap it with helpful UI.

Flipper plugin consists of two main parts:

Desktop App

To start writing plugins for Flipper, you need to install flipper-pkg either using yarn or npm. Then you can create plugins using flipper-pkg init.
You will be asked for id and title of your plugin.

Then replace the code in index.tsx of your plugin with the code below:

Let me explain what’s happening here. We are using builtin Flipper method createTablePlugin which allows creating native-looking tables just like Logs of Network plugins have.

Using Row we define what data we have in each row of our table. Next columns and columnSizes define our column names and their width. Then we have two methods. buildRow as name suggests tells Flipper how we want to fill our row with data and for example how to handle copying. renderSidebar fills sidebar with data from row.

The last step is to export our plugin filling it with our configuration and method field, which tells on which method name it should react.

After we are done we can use yarn lint or npm run lint to check if our app doesn’t have any errors and then flipper-pkg pack

-o to create a bundle of our app which then can be installed in flipper. We can install it later using plugins manager by dragging our bundle onto it.

Mobile Client

Although Flipper allows writing native clients for Android and iOS, we will focus now only on React Native ones.

First, we have to add react-native-flipper plugin to our app using yarn or npm. For a simple test of the plugin, you can add this code to your app.

This code will send two simple messages to our desktop plugin. First, we import the addPlugin method, which allows us to register our client. Add plugin should at least implement getId method which identifies our client and should return the same id you have defined when creating your desktop app so they could identify each other.

Then there are onConnect and onDisconnect. They are triggered when our app connects or disconnects from desktop app respectively. onConnect has connection which we will use to send or receive events to/from our app. Here using send method we first provide name of our method which we defined earlier while we were exporting our desktop app in this case it is testMethod and next we provide an object with the data we want to send.

Result

After all of this is done we should see our plugin in Flipper, after enabling it you should see two entries in the table and when you click on one of them a sidebar with details of the sent object should appear.

Final thoughts

Using Flipper makes mobile app development easier because of all its features. Flipper consists of many tools that are essential for debugging apps like logs, network and dev tools. But also it can be extended with other plugins which give it limitless possibilities to fit in any complex use case where other tools may not be enough. Also, Remote debugging is a nice addition here, making us closer to a real production-ready app while we test our apps.

This guide was made based on my own experience and whatever i could find on Flipper Docs. If you want to find more in-depth info about creating flipper plugins please check there.

Источник

Announcing React Native 0.62 with Flipper

Today we’re releasing React Native version 0.62 which includes support for Flipper by default.

This release comes in the midst of a global pandemic. We’re releasing this version today to respect the work of hundreds of contributors who made this release possible and to prevent the release from falling too far behind master. Please be mindful of the reduced capacity of contributors to help with issues and prepare to delay upgrading if necessary.

Flipper by default​

Flipper is a developer tool for debugging mobile apps. It’s popular in the Android and iOS communities, and in this release we’ve enabled support by default for new and existing React Native apps.

Flipper provides the following features out of the box:

Additionally, since Flipper is an extensible platform, it provides a marketplace that pulls plugins from NPM so you can publish and install custom plugins specific to your workflows. See the available plugins here.

For more information, check out the Flipper documentation.

New dark mode features​

We’ve added a new Appearance module to provide access to the user’s appearance preferences, such as their preferred color scheme (light or dark).

We’ve also added a hook to subscribe to state updates to the users preferences:

See the docs for Appearance and useColorScheme for more information.

Moving Apple TV to react-native-tvos​

As part of our Lean Core effort and to bring Apple TV in line with other platforms like React Native Windows and React Native macOS, we’ve started to remove Apple TV specific code from core.

Going forward, Apple TV support for React Native will be maintained in react-native-community/react-native-tvos along with the corresponding react-native-tvos NPM package. This is a full fork of the main repository, with only the changes needed to support Apple TV.

Releases of react-native-tvos will be based on the public release of React Native. For this 0.62 release of react-native please upgrade Apple TV projects to use react-native-tvos 0.62.

More upgrade support​

When 0.61 was released, the community introduced a new upgrade helper tool to support developers upgrading to new versions of React Native. The upgrade helper provides a diff of changes from the version you’re on to the version you’re targeting, allowing you to see the changes that need to be made for your specific upgrade.

Even with this tool, issues come up when upgrading. Today we’re introducing more dedicated upgrading support by announcing Upgrade-Support. Upgrade Support is a GitHub issue tracker where users can submit issues specific to upgrading their projects to receive help from the community.

We’re always working to improve the upgrade experience, and we hope that these tools give users the support they need in the edge cases we haven’t covered yet.

Other improvements​

Breaking changes​

Deprecations​

Thanks​

Thank you to the hundreds of contributors that helped make 0.62 possible!

To see all the updates, take a look at the 0.62 changelog.

Источник