Introduce Flipper Tic Tac Toe example
Summary:
This Diff introduces an example for how to develop a React Native pure JS plugin and will be used in the docs. See the attached project as demo. The RN sources for the plugin component are:
```
import React, {useState, useEffect} from "react";
import {
StyleSheet,
View,
Text,
Button,
} from 'react-native';
import {addPlugin} from "react-native-flipper";
const initialState = {
cells: [" ", " ", " "," ", " ", " "," ", " ", " ",],
turn: ' ',
winner: ' ',
}
export default function FlipperTicTacToe() {
const [status, setStatus] = useState("Waiting for Flipper Desktop Player...")
const [gameState, setGameState] = useState(initialState);
const [connection, setConnection] = useState(null);
useEffect(() => {
addPlugin({
getId() {
return 'ReactNativeTicTacToe';
},
onConnect(connection) {
setStatus("Desktop player present");
setConnection(connection);
// listen to updates
connection.receive('SetState', (gameState, responder) => {
if (gameState.winner !== " ") {
setStatus(`Winner is ${gameState.winner}! Waiting for a new game...`);
} else {
setStatus(gameState.turn === "X" ? "Your turn...": "Awaiting desktop players turn...");
}
setGameState(gameState);
responder.success();
})
// request initial state
connection.send('GetState');
},
onDisconnect() {
setConnection(null);
setStatus("Desktop player gone...");
}
})
}, []);
return (
<View style={styles.container}>
<Text style={styles.title}>Flipper Tic-Tac-Toe</Text>
<Text>{status}</Text>
<View style={styles.board}>
{gameState.cells.map((state, idx) =>
<View
key={idx}
style={styles.cell}>
<Button
title={state}
disabled={gameState.turn !== 'X' || state !== ' '}
onPress={() => {
connection.send('XMove', { move: idx });
}}
/>
</View>
)}
</View>
</View>
)
}
// Omitted styling
```
Reviewed By: passy
Differential Revision: D19410138
fbshipit-source-id: 93266a1ef7b86dcf043a744c3563dab0c585c8fd
db9c41303d