docs(examples/react-native): add example with React Native

Includes socketio/engine.io-client@e5bc106

examples/react-native/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

examples/react-native/.gitignore

@@ -0,0 +1,14 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+web-report/
+
+# macOS
+.DS_Store

examples/react-native/App.js

@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import io from 'socket.io-client';
+
+const socket = io("192.168.0.28:3000"); // replace with the IP of your server, when testing on real devices
+
+export default class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      connected: socket.connected,
+      currentTransport: socket.connected ? socket.io.engine.transport.name : '-',
+      lastMessage: ""
+    };
+  }
+
+  componentDidMount() {
+    socket.on('connect', () => this.onConnectionStateUpdate());
+    socket.on('disconnect', () => this.onConnectionStateUpdate());
+    socket.on('message', (content) => this.onMessage(content));
+  }
+
+  componentWillUnmount() {
+    socket.off('connect');
+    socket.off('disconnect');
+    socket.off('message');
+  }
+
+  onConnectionStateUpdate() {
+    this.setState({
+      connected: socket.connected,
+      currentTransport: socket.connected ? socket.io.engine.transport.name : '-'
+    });
+    if (socket.connected) {
+      socket.io.engine.on('upgrade', () => this.onUpgrade());
+    } else {
+      socket.io.engine.off('upgrade');
+    }
+  }
+
+  onMessage(content) {
+    this.setState({
+      lastMessage: content
+    });
+  }
+
+  onUpgrade() {
+    this.setState({
+      currentTransport: socket.io.engine.transport.name
+    });
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>State: { this.state.connected ? 'Connected' : 'Disconnected' }</Text>
+        <Text>Current transport: { this.state.currentTransport }</Text>
+        <Text>Last message: { this.state.lastMessage }</Text>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

examples/react-native/README.md

@@ -0,0 +1,16 @@
+
+# Example with [React Native](https://reactnative.dev/)
+
+![react native logo](assets/react-native.png)
+
+This example shows a basic example based on [Expo](https://expo.io/). 
+
+![demo](assets/react-native-demo.gif)
+
+## How to use
+
+```
+$ npm ci
+$ npm start # run expo
+$ node server.js # run the server
+```

examples/react-native/app.json

@@ -0,0 +1,28 @@
+{
+  "expo": {
+    "name": "react-native",
+    "slug": "react-native",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

examples/react-native/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};