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
53 lines
2.7 KiB
Plaintext
53 lines
2.7 KiB
Plaintext
---
|
|
id: react-native
|
|
title: Building a React Native Plugin
|
|
---
|
|
|
|
<div class="warning">
|
|
|
|
This tutorial requires React Native 0.62 or higher.
|
|
|
|
</div>
|
|
|
|
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 creating develop 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 [background plugin](../extending/create-plugin.md#background-plugins), 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).
|
|
|
|
The `onConnect` callback receive a `connection` which can be used to communicate with the backend:
|
|
|
|
```javascript
|
|
import {addPlugin} from "react-native-flipper"
|
|
|
|
addPlugin({
|
|
getId() {
|
|
return 'ReactNativeExamplePlugin';
|
|
},
|
|
onConnect(connection) {
|
|
mammmals.forEach(({ title, pictureUrl }, index) => {
|
|
connection.send('newRow', {
|
|
id: index,
|
|
title,
|
|
url: pictureUrl
|
|
})
|
|
})
|
|
},
|
|
onDisconnect() {
|
|
}
|
|
})
|
|
```
|
|
|
|
You might 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 [Client Plugin API](create-plugin) 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/master/react-native/ReactNativeFlipperExample/FlipperTicTacToe.js)
|
|
* The Flipper Desktop plugin implementation: [rn-tic-tac-toe/index.tsx](https://github.com/facebook/flipper/blob/master/desktop/plugins/rn-tic-tac-toe/index.tsx)
|