jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

react-native.mdx

Browse Source 
Summary: Restyle of the page, including changes to spelling, grammar, lins checks, and structure (where relevant).

Reviewed By: nikoant

Differential Revision: D35577068

fbshipit-source-id: 3791e53adb51b36f1dd74688fa341d145c45234f
This commit is contained in:
Kevin Strider
2022-04-12 07:50:14 -07:00
committed by Facebook GitHub Bot
parent 1d10dbe603
commit f3d89852c2
1 changed files with 25 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
docs/features/react-native.mdx
View File

@@ -6,31 +6,36 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
<img alt="React Native + React DevTools" src={useBaseUrl("img/react-native-react.png")} />
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.
Meta's React Native and Developer Tooling teams work in close collaboration to ensure Flipper offers top-notch out-of-the-box value for React Native development.
:::note
Integration between React Native and Flipper is enabled out of the box in React Native version 0.62 and higher.
:::
→ [See setup instructions for React Native](../getting-started/index.mdx#setup-your-react-native-app)
For the setup instructions for React Native, see the [Desktop App](../getting-started/index.mdx#setup-your-react-native-app) page.
The following 37-minute video provides interesting information on 'Flipper: the extensible DevTool Platform for React Native`.
<center>
<iframe width="560" height="315" src="https://www.youtube.com/embed/WltZTn3ODW4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br/><em>Flipper: The Extensible DevTool Platform for React Native</em>
</center>
<br/>
## 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.
In Flipper, the dedicated device type, 'React Native', connects to a locally running Metro instance to interact with your React Native app. This device is 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”.
If Metro is connected, two new buttons appear in Flipper’s main toolbar: 'Reload' and 'Open Dev Menu': both do exactly as their name suggests. The 'React Native' device feature two plugins out of the box: 'Logs' and 'React DevTools', as shown in the following screenshot.
<img alt="React Native Action Buttons and Logs" src={useBaseUrl("img/react-native-logs.png")} />
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.
The Logs plugins allow you to search, filter and place 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:
Beyond the React Native-specific Flipper plugins described above, with Flipper you also inherit the plugin eco-system that exists for native Android and iOS apps. This means that you are able to use plugins that are also aimed at native apps for your React Native app.
Example plugins include:
* Device logs
* Device crash reporter
@@ -42,22 +47,26 @@ Beyond the React Native specific Flipper plugins described above, with Flipper y
## 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.
One of the advantages of Flipper is its extensibility. Many teams across Meta 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](https://www.npmjs.com/package/react-native-flipper) package.
The following screenshot shows an example Flipper plugin, where a game of Tic Tac Toe uses Flipper and some emulators.
<img alt="Tic Tac Toe example plugin" src={useBaseUrl("img/react-native-tictactoe.png")} />
_Example Flipper plugin: playing a game of Tic Tac Toe using Flipper and some emulators_
If you'd like to build a specific (or generic) extension for Flipper, take a look at the following pointers:
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.
* [Building a React Native Flipper Plugin](../tutorial/react-native.mdx)
* [Building a Desktop Plugin](../tutorial/js-setup.mdx)
* [Creating a React Native Flipper Plugin](../tutorial/react-native.mdx)
* [Create a Flipper Desktop Plugin](../tutorial/js-setup.mdx)
:::note
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.
* [Reactotron's](https://infinite.red/reactotron) [Flipper plugin](https://github.com/infinitered/flipper-plugin-reactotron) is an example of a standalone React Native desktop app, [ported to work as a Flipper plugin](https://shift.infinite.red/better-react-native-debugging-with-reactotron-in-flipper-6b823af29220).
[Reactotron's](https://infinite.red/reactotron) [Flipper plugin](https://github.com/infinitered/flipper-plugin-reactotron) is an example of a standalone React Native desktop app that is ported to work as a Flipper plugin. For more information, see the [Better React Native Debugging with Reactotron in Flipper](https://shift.infinite.red/better-react-native-debugging-with-reactotron-in-flipper-6b823af29220) web page.
*Got your own Flipper plugin for React Native you want to plug here? Please sent us a [Pull Request](https://github.com/facebook/flipper/blob/main/docs/features/react-native.mdx)!*
If you've got your own Flipper plugin for React Native that you'd like to advertise, please send the Litho team a [pull request](https://github.com/facebook/flipper/blob/main/docs/features/react-native.mdx)!