feat: upgrade dependencies to Nitro 0.14 and React Native 0.76

README.md

@@ -15,7 +15,6 @@ npm install react-native-fast-ws react-native-nitro-modules
 ### TODOs
 
 - Provide Android support
-- Upgrade dependencies to latest (yeah, I've been working on this for waaaay to long)
 - Fix outstanding (and known) issues
 - Figure out a better name and logo
 - Stable release at [React Native London Conf](https://www.reactnativelondon.co.uk)
@@ -36,3 +35,17 @@ If you want to contribute, please reach out (you can find me on [X/Twitter](http
 **Websockets**
 - On iOS, uses built-in APIs for WebSockets (available on iOS 13+). React Native uses `SocketRocket` instead
 - Does not use `EventEmitter` to communicate new messages back to the JavaScript. With Nitro, we can call callbacks directly 
+
+### Developing
+
+Run the example app to test changes:
+
+```bash
+// Start the demo server
+bun server.ts
+
+// Run the app
+cd example && npm run ios
+```
+
+You can also start the app from Xcode, in case you want to make changes to the native code. In that case, open `example/ios/NitroPlayground.xcworkspace` and hit run.

example/index.tsx → example/App.tsx

@@ -1,21 +1,19 @@
-import '@bacons/text-decoder/install'
-
 import { useCallback, useState } from 'react'
-import { AppRegistry } from 'react-native'
 import { ActivityIndicator, Button, StyleSheet, Text, View } from 'react-native'
 import { WebSocket as FastWebSocket } from 'react-native-fast-ws'
 
 type Result = {
   outgoingTime: number
   incomingTime: number
-  incomingFirstMessageTime: number
 }
 
-function App() {
+const encoder = new TextEncoder()
+
+export function App() {
   return (
     <View style={styles.container}>
       <TestCase payload="Hello World" title="Test String" />
-      <TestCase payload={new TextEncoder().encode('Hello World')} title="Test Binary" />
+      <TestCase payload={encoder.encode('Hello World')} title="Test Binary" />
     </View>
   )
 }
@@ -32,8 +30,8 @@ function Results({
     <View>
       <View style={styles.resultRowContainer}>
         <Text style={styles.resultItem}> </Text>
-        <Text style={styles.resultItem}>{`FastWS`}</Text>
-        <Text style={styles.resultItem}>{`WebSocket`}</Text>
+        <Text style={styles.resultItem}>FastWS</Text>
+        <Text style={styles.resultItem}>WebSocket</Text>
       </View>
       <ResultsRow
         title="Sending (ms)"
@@ -45,11 +43,6 @@ function Results({
         fastResult={fastResults.incomingTime}
         wsResult={wsResults.incomingTime}
       />
-      <ResultsRow
-        title="TFM (ms)"
-        fastResult={fastResults.incomingFirstMessageTime}
-        wsResult={wsResults.incomingFirstMessageTime}
-      />
     </View>
   )
 }
@@ -127,19 +120,16 @@ const testWebsocketMessages = async (opts: {
 }): Promise<{
   outgoingTime: number
   incomingTime: number
-  incomingFirstMessageTime: number
 }> =>
   new Promise((resolve) => {
     const inst = new opts.Ws('ws://localhost:3000')
 
     let outgoingTime: number
     let incomingTime: number
-    let incomingFirstMessageTime: number
     let received = 0
 
     inst.addEventListener('message', () => {
       if (received === 0) {
-        incomingFirstMessageTime = performance.now() - incomingFirstMessageTime
         incomingTime = performance.now()
       }
 
@@ -154,7 +144,6 @@ const testWebsocketMessages = async (opts: {
       resolve({
         outgoingTime,
         incomingTime: performance.now() - incomingTime,
-        incomingFirstMessageTime,
       })
     })
 
@@ -167,8 +156,6 @@ const testWebsocketMessages = async (opts: {
 
       outgoingTime = performance.now() - start
 
-      incomingFirstMessageTime = performance.now()
-
       inst.send(JSON.stringify({ count: opts.incoming, binary: typeof opts.payload !== 'string' }))
     })
   })
@@ -194,5 +181,3 @@ const styles = StyleSheet.create({
     backgroundColor: 'red',
   },
 })
-
-AppRegistry.registerComponent('NitroPlayground', () => App)

example/index.js

@@ -0,0 +1,7 @@
+import '@bacons/text-decoder/install'
+
+import { AppRegistry } from 'react-native'
+
+import { App } from './App'
+
+AppRegistry.registerComponent('NitroPlayground', () => App)