5f1a0548f5
Summary: Docusaurus 2 is quite a lot more powerful than docu 1 it turns out. This should convert the website fully. * [done] Go through migration guide https://v2.docusaurus.io/docs/migrating-from-v1-to-v2 * [done] Convert landing page html * [done] Convert all images to img tags * [done] Convert all .md files to .mdx * [done] Make sure ui-doc generation and including still works * [done] Scan every page visually for sanity check * [done] Make sure footer still works * [done] Make sure search still works * [done] Change all links/ to links/index * [done] Change all links.md to links * [done] Add some custom css to make the navbar look like the old one and darken the footer. Reviewed By: passy Differential Revision: D21158717 fbshipit-source-id: 5f45b711b1b6fd5ece4c5c15c55635c7ebbfb568
56 lines
3.6 KiB
Plaintext
56 lines
3.6 KiB
Plaintext
---
|
||
id: react-native
|
||
title: React Native Support
|
||
---
|
||
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.
|
||
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#setup-your-react-native-app)
|
||
|
||
## 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”.
|
||
|
||
<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.
|
||
|
||
## 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 will. Example plugins include:
|
||
|
||
* Device logs
|
||
* Device crash reporter
|
||
* Inspecting network requests
|
||
* Inspecting app local databases
|
||
* Inspecting device preferences
|
||
* Inspecting cached images
|
||
* Inspecting native layout elements
|
||
|
||
## 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](https://www.npmjs.com/package/react-native-flipper) package.
|
||
|
||
<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 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.
|
||
|
||
→ Creating a React Native Flipper Plugin https://fbflipper.com/docs/tutorial/react-native.html
|
||
→ Create a Flipper Desktop Plugin https://fbflipper.com/docs/tutorial/js-setup.html
|
||
|
||
### 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).
|