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

react-native.mdx (Creating Plugins - Building an React Native Plugin)

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

Reviewed By: nikoant

Differential Revision: D36410352

fbshipit-source-id: 9a05b24811adedea2a5e97e6865e3fd42aadb344
This commit is contained in:
Kevin Strider
2022-05-17 01:34:11 -07:00
committed by Facebook GitHub Bot
parent 5cd8c16cbd
commit 4b05532fae
1 changed files with 9 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
docs/tutorial/react-native.mdx
View File

@@ -5,21 +5,15 @@ title: Building a React Native Plugin
import useBaseUrl from '@docusaurus/useBaseUrl';
import Link from '@docusaurus/Link';
<div class="warning">
:::caution
This section of the tutorial requires React Native 0.62 or higher.
:::
This tutorial requires React Native 0.62 or higher.
Once you've connected Flipper to a React Native application, writing your own Flipper plugin can be done without reaching into the native world.
</div>
To expose Flipper to the JavaScript world, the React Native module `react-native-flipper` needs to be installed in the hosting application by running `yarn add react-native-flipper` and `cd ios && pod install`. If you are developing a plugin that is distributed as NPM package, make sure to add this to the installation instruction of your package as well!
Once you have connected Flipper to a React Native application,
writing your own Flipper plugin can be done without reaching into the native world.
To expose Flipper to the JavaScript world, the React Native Native Module `react-native-flipper` needs to be installed in the hosting application by running `yarn add react-native-flipper` and `cd ios && pod install`. If you are developing a plugin that is distributed as NPM package, make sure to add this to the installation instruction of your package as well!
Registering a new plugin is done by importing `addPlugin` from `"react-native-flipper"` and providing it an object that at least implements the method `getId` (the plugin id that should be used in the desktop plugin as well to make the connection) and two event handlers for the `onConnect` and `onDisconnect` events.
These `onConnect` and `onDisconnect` events are triggered every time the plugin becomes (in)active in the Flipper desktop application.
If the plugin is a <Link to={useBaseUrl("/docs/extending/create-plugin#background-plugins")}>background plugin</Link>, these events are triggered typically only once (they might be triggered never, if the Desktop user didn't enable the plugin, or multiple times if they enabled or disabled the plugin a few times).
Registering a new plugin is done by importing `addPlugin` from `react-native-flipper` and providing it an object that at least implements the method `getId` (the plugin id that should be used in the desktop plugin as well to make the connection) and two event handlers for the `onConnect` and `onDisconnect` events. The `onConnect` and `onDisconnect` events are triggered every time the plugin becomes (in)active in the Flipper desktop application. If the plugin is a <Link to={useBaseUrl("/docs/extending/create-plugin#background-plugins")}>background plugin</Link>, the events are triggered typically only once (they might be triggered never, if the Desktop user didn't enable the plugin, or multiple times if they enabled or disabled the plugin a few times).
The `onConnect` callback receive a `connection` which can be used to communicate with the backend:
@@ -44,11 +38,11 @@ addPlugin({
})
```
You might want to store the connection somewhere to be able to send more events as long as `onDisconnect` event hasn't been fired.
You may want to store the connection somewhere to be able to send more events as long as `onDisconnect` event hasn't been fired.
The `connection` object can also be used to listen to messages coming from the Desktop plugin. See <Link to={useBaseUrl("/docs/extending/create-plugin")}>Client Plugin API</Link> for details.
An example plugin to play a little Tic-Tac-Toe between the Flipper Desktop and a React Native app can be found inside this repository as well (run `yarn && yarn android` in `react-native/ReactNativeFlipperExample` to start the test project):
* The React Native JavaScript based plugin implementation: [FlipperTicTacToe.js](https://github.com/facebook/flipper/tree/main/react-native/ReactNativeFlipperExample/FlipperTicTacToe.js)
* The Flipper Desktop plugin implementation: [rn-tic-tac-toe/index.tsx](https://github.com/facebook/flipper/blob/main/desktop/plugins/public/rn-tic-tac-toe/index.tsx)
* The React Native JavaScript based plugin implementation - [FlipperTicTacToe.js](https://github.com/facebook/flipper/tree/main/react-native/ReactNativeFlipperExample/FlipperTicTacToe.js)
* The Flipper Desktop plugin implementation - [rn-tic-tac-toe/index.tsx](https://github.com/facebook/flipper/blob/main/desktop/plugins/public/rn-tic-tac-toe/index.tsx)