feat: support for Android #16

.github/workflows/check.yml

@@ -42,6 +42,12 @@ jobs:
         if: steps.asdf-cache.outputs.cache-hit != 'true'
         uses: asdf-vm/actions/install@v4
 
+      - name: Install ktlint
+        run: |
+          curl -sSLO https://github.com/pinterest/ktlint/releases/latest/download/ktlint
+          chmod +x ktlint
+          sudo mv ktlint /usr/local/bin/
+
       - name: Install dependencies
         run: bun install --frozen-lockfile
 

Brewfile

@@ -4,6 +4,7 @@
 # Core development tools
 brew "clang-format"
 brew "ccache"
+brew "ktlint"
 
 # Additional useful tools for React Native development
 brew "node"

apps/demo/android/app/build.gradle

@@ -8,14 +8,10 @@ apply plugin: "com.facebook.react"
  */
 react {
     /* Folders */
-    //   The root of your project, i.e. where "package.json" lives. Default is '../..'
-    // root = file("../../")
-    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
-    // reactNativeDir = file("../../node_modules/react-native")
-    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
-    // codegenDir = file("../../node_modules/@react-native/codegen")
-    //   The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js
-    // cliFile = file("../../node_modules/react-native/cli.js")
+    root = file("../..")
+    reactNativeDir = file("../../../../node_modules/react-native")
+    codegenDir = file("../../../../node_modules/@react-native/codegen")
+    cliFile = file("../../../../node_modules/react-native/cli.js")
 
     /* Variants */
     //   The list of variants to that are debuggable. For those we're going to

apps/demo/android/settings.gradle

@@ -1,6 +1,6 @@
-pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
+pluginManagement { includeBuild("../../../node_modules/@react-native/gradle-plugin") }
 plugins { id("com.facebook.react.settings") }
 extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
 rootProject.name = 'Demo'
 include ':app'
-includeBuild('../node_modules/@react-native/gradle-plugin')
+includeBuild('../../../node_modules/@react-native/gradle-plugin')

apps/fs-experiment/android/app/build.gradle

@@ -8,14 +8,10 @@ apply plugin: "com.facebook.react"
  */
 react {
     /* Folders */
-    //   The root of your project, i.e. where "package.json" lives. Default is '../..'
-    // root = file("../../")
-    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
-    // reactNativeDir = file("../../node_modules/react-native")
-    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
-    // codegenDir = file("../../node_modules/@react-native/codegen")
-    //   The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js
-    // cliFile = file("../../node_modules/react-native/cli.js")
+    root = file("../..")
+    reactNativeDir = file("../../../../node_modules/react-native")
+    codegenDir = file("../../../../node_modules/@react-native/codegen")
+    cliFile = file("../../../../node_modules/react-native/cli.js")
 
     /* Variants */
     //   The list of variants to that are debuggable. For those we're going to

apps/fs-experiment/android/build.gradle

@@ -5,7 +5,7 @@ buildscript {
         compileSdkVersion = 35
         targetSdkVersion = 35
         ndkVersion = "27.1.12297006"
-        kotlinVersion = "2.0.21"
+        kotlinVersion = "2.1.20"
     }
     repositories {
         google()

apps/fs-experiment/android/settings.gradle

@@ -1,6 +1,6 @@
-pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
+pluginManagement { includeBuild("../../../node_modules/@react-native/gradle-plugin") }
 plugins { id("com.facebook.react.settings") }
 extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
 rootProject.name = 'MultInstance-Recursive'
 include ':app'
-includeBuild('../node_modules/@react-native/gradle-plugin')
+includeBuild('../../../node_modules/@react-native/gradle-plugin')

apps/p2p-chat/android/app/build.gradle

@@ -8,14 +8,10 @@ apply plugin: "com.facebook.react"
  */
 react {
     /* Folders */
-    //   The root of your project, i.e. where "package.json" lives. Default is '../..'
-    // root = file("../../")
-    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
-    // reactNativeDir = file("../../node_modules/react-native")
-    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
-    // codegenDir = file("../../node_modules/@react-native/codegen")
-    //   The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js
-    // cliFile = file("../../node_modules/react-native/cli.js")
+    root = file("../..")
+    reactNativeDir = file("../../../../node_modules/react-native")
+    codegenDir = file("../../../../node_modules/@react-native/codegen")
+    cliFile = file("../../../../node_modules/react-native/cli.js")
 
     /* Variants */
     //   The list of variants to that are debuggable. For those we're going to

apps/p2p-chat/android/app/src/main/java/com/p2pchat/MainActivity.kt

@@ -1,22 +1,21 @@
 package com.p2pchat
 
+import android.os.Bundle
+import androidx.core.view.WindowCompat
 import com.facebook.react.ReactActivity
 import com.facebook.react.ReactActivityDelegate
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
 import com.facebook.react.defaults.DefaultReactActivityDelegate
 
 class MainActivity : ReactActivity() {
 
-  /**
-   * Returns the name of the main component registered from JavaScript. This is used to schedule
-   * rendering of the component.
-   */
-  override fun getMainComponentName(): String = "P2PChat"
+  override fun getMainComponentName(): String = "p2p-chat"
+
+  override fun onCreate(savedInstanceState: Bundle?) {
+    super.onCreate(savedInstanceState)
+    WindowCompat.setDecorFitsSystemWindows(window, true)
+  }
 
-  /**
-   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
-   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
-   */
   override fun createReactActivityDelegate(): ReactActivityDelegate =
       DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
 }

apps/p2p-chat/android/settings.gradle

@@ -1,6 +1,6 @@
-pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
+pluginManagement { includeBuild("../../../node_modules/@react-native/gradle-plugin") }
 plugins { id("com.facebook.react.settings") }
 extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
 rootProject.name = 'P2PChat'
 include ':app'
-includeBuild('../node_modules/@react-native/gradle-plugin')
+includeBuild('../../../node_modules/@react-native/gradle-plugin')

apps/p2p-chat/src/App.tsx

@@ -21,18 +21,21 @@ const App = () => {
   } = useChatInstances()
 
   const sandboxRefs = useRef<Record<string, any>>({})
+  const chatInstancesRef = useRef(chatInstances)
+  chatInstancesRef.current = chatInstances
 
-  const messageHandler = new MessageHandler(
-    chatInstances,
-    friendshipManager,
-    sandboxRefs,
-    triggerFriendshipUpdate
-  )
+  const messageHandler = useRef(
+    new MessageHandler(
+      () => chatInstancesRef.current,
+      friendshipManager,
+      sandboxRefs,
+      triggerFriendshipUpdate
+    )
+  ).current
 
-  // Use the scroll color interpolation hook
   const {currentBackgroundColor, onScroll} = useScrollColorInterpolation({
     chatInstances,
-    scrollStep: screenWidth, // Now each slide takes full screen width
+    scrollStep: screenWidth,
     onIndexChange: setCurrentIndex,
   })
 
@@ -45,7 +48,6 @@ const App = () => {
       <StatusBar
         barStyle="light-content"
         backgroundColor={currentBackgroundColor}
-        translucent
       />
 
       <ChatCarousel

apps/p2p-chat/src/ChatApp.tsx

@@ -1,5 +1,5 @@
-import React, {useCallback, useState} from 'react'
-import {LogBox, StatusBar, View} from 'react-native'
+import React, {useCallback} from 'react'
+import {LogBox, View} from 'react-native'
 
 import {
   FriendRequestsList,
@@ -16,15 +16,12 @@ import {
 import {commonStyles} from './styles'
 import {ChatAppProps, MessageData} from './types'
 
-// Utility function to create subtle background from vibrant color
 const createSubtleBackground = (vibrantColor: string): string => {
-  // Convert hex to RGB
   const hex = vibrantColor.replace('#', '')
   const r = parseInt(hex.substr(0, 2), 16)
   const g = parseInt(hex.substr(2, 2), 16)
   const b = parseInt(hex.substr(4, 2), 16)
 
-  // Create a very light version (90% white + 10% color)
   const lightR = Math.round(255 * 0.9 + r * 0.1)
   const lightG = Math.round(255 * 0.9 + g * 0.1)
   const lightB = Math.round(255 * 0.9 + b * 0.1)
@@ -37,12 +34,23 @@ LogBox.ignoreAllLogs()
 const ChatApp: React.FC<ChatAppProps> = ({
   userId,
   userName,
-  targetOptions,
-  potentialFriends,
-  pendingRequests,
+  targetOptions: initialTargetOptions,
+  potentialFriends: initialPotentialFriends,
   backgroundColor,
 }) => {
-  const [, setIsConnected] = useState(false)
+  const {
+    pendingRequests,
+    targetOptions,
+    potentialFriends,
+    respondToFriendRequest,
+    handleFriendMessage,
+    sendFriendRequest,
+  } = useFriendRequests({
+    userName,
+    initialTargetOptions,
+    initialPotentialFriends,
+    onSendMessage: (msg: MessageData) => sendMessage(msg),
+  })
 
   const {sendMessage, sendConnectionMessage} = useCommunication({
     userName,
@@ -71,34 +79,18 @@ const ChatApp: React.FC<ChatAppProps> = ({
   } = useMessages({
     userId,
     userName,
-    onSendMessage: (message: MessageData) => {
-      const success = sendMessage(message)
-      if (success) {
-        setIsConnected(true)
-      }
-      return success
-    },
+    onSendMessage: (message: MessageData, targetOrigin?: string) =>
+      sendMessage(message, targetOrigin),
   })
 
-  const {respondToFriendRequest, handleFriendMessage, sendFriendRequest} =
-    useFriendRequests({
-      userName,
-      onSendMessage: sendMessage,
-    })
-
   function handleIncomingMessage(data: MessageData) {
     console.log(`[${userName}] Processing message type: ${data.type}`)
-
     handleMessageIncoming(data)
     handleFriendMessage(data)
-    if (
-      data.type === 'chat_message' ||
-      data.type === 'connection_established'
-    ) {
-      setIsConnected(true)
-    }
   }
 
+  const isSelectedTargetFriend = targetOptions.includes(selectedTarget)
+
   const handleSendMessage = useCallback(() => {
     sendChatMessage(selectedTarget)
   }, [sendChatMessage, selectedTarget])
@@ -121,8 +113,6 @@ const ChatApp: React.FC<ChatAppProps> = ({
 
   return (
     <View style={[commonStyles.container, {backgroundColor: subtleBackground}]}>
-      <StatusBar backgroundColor={backgroundColor} barStyle="light-content" />
-
       <FriendRequestsList
         pendingRequests={pendingRequests}
         onRespondToRequest={respondToFriendRequest}
@@ -141,6 +131,7 @@ const ChatApp: React.FC<ChatAppProps> = ({
       <MessageInput
         inputText={inputText}
         selectedTarget={selectedTarget}
+        isFriend={isSelectedTargetFriend}
         onInputChange={setInputText}
         onSendMessage={handleSendMessage}
       />