chore: upgrade sample apps to RN 0.76.1 and added new arch docs (#2756)

* chore: upgrade sample apps to RN 0.76.1

* docs: add new architecture guide

* docs: add new architecture guide

* fix: vale issues

* chore: update the sample apps

Author: khushal87

.styles/Vocab/Base/accept.txt

@@ -59,3 +59,6 @@ loadMore
 pollAnswers
 enum
 SendMessage
+interop
+bridgeless
+resizer

docusaurus/docs/reactnative/guides/new-architecture.mdx

@@ -0,0 +1,44 @@
+---
+id: new-architecture
+title: React Native New Architecture
+---
+
+Starting v6 we support the [new architecture](https://reactnative.dev/architecture/landing-page) for the React Native Chat SDK.
+
+To be compatible with the new architecture, it is recommended that you use React Native version `0.75.4` and above for React Native CLI and `>=51` for Expo.
+
+### Dependencies
+
+On Native CLI, we recommend you to be on the following versions or higher of the peer dependencies to be able to run the new architecture:
+
+| Dependencies                        | Versions   |
+| ----------------------------------- | ---------- |
+| `@op-engineering/op-sqlite`         | `>=9.3.0`  |
+| `@react-native-clipboard/clipboard` | `>=1.4.1`  |
+| `react-native-blob-util`            | `>=0.17.0` |
+| `react-native-document-picker`      | `>=9.1.1`  |
+| `react-native-gesture-handler`      | `>=2.15.0` |
+| `react-native-haptic-feedback`      | `>=2.2.0`  |
+| `react-native-image-picker`         | `>=7.1.1`  |
+| `react-native-reanimated`           | `>=3.9.0`  |
+| `react-native-share`                | `>=10.0.2` |
+| `react-native-svg`                  | `>=15.2.0` |
+
+Few of the dependencies we rely on are not fully new architecture compatible yet.
+
+1. `react-native-audio-recorder-player` and `react-native-video` work on interop mode.
+2. `react-native-document-picker` doesn't support the bridgeless mode. Please use [`@react-native-documents/picker`](https://react-native-documents.github.io/docs/sponsor-only/intro) if you want the bridgeless mode. You can register your own native handler with us using our [Native Handler](../customization/native-handlers.mdx) guide.
+3. `@react-native-camera-roll/camera-roll` doesn't work alongside the Image resizer module that we have. We recommend using the native image picker for now. You can read [the guide](./native-image-picker.mdx) here.
+
+   :::note
+   Although the above dependencies are not fully compatible with the new architecture, you can still use them in your project. They doesn't stop you from building the app on both iOS and Android.
+   :::
+
+For expo, make sure you are on the latest version of the dependencies with the current expo version you have.
+
+### Known issues and limitations
+
+- The audio recorder is not fully compatible with the new architecture, so you might face some issues while recording the audio and playing it using `react-native-audio-recorder-player`. We are working on it to fix the issues.
+- The image gallery animations behaves differently and seem to lag a bit on the new architecture specially when you use the pan gesture to drag down the image. We are working on it to fix the issues.
+
+Please feel free to report any issues you face while using the new architecture.

docusaurus/sidebars-react-native.json

@@ -157,6 +157,7 @@
       "guides/audio-messages-support",
       "guides/date-time-formatting",
       "guides/native-image-picker",
+      "guides/new-architecture",
       "customization/typescript",
       "basics/troubleshooting",
       "basics/stream_chat_with_navigation",

examples/SampleApp/Gemfile

@@ -6,6 +6,7 @@ ruby ">= 2.6.10"
 # Exclude problematic versions of cocoapods and activesupport that causes build failures.
 gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
 gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+gem 'xcodeproj', '< 1.26.0'
 gem 'fastlane'
 gem 'rubocop-performance'
 gem 'rubocop-require_tools'

examples/SampleApp/android/app/src/main/java/com/sampleapp/MainApplication.kt

@@ -9,6 +9,7 @@ import com.facebook.react.ReactPackage
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
 import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
 import com.facebook.react.defaults.DefaultReactNativeHost
+import com.facebook.react.soloader.OpenSourceMergedSoMapping
 import com.facebook.soloader.SoLoader
 
 class MainApplication : Application(), ReactApplication {
@@ -34,7 +35,7 @@ class MainApplication : Application(), ReactApplication {
 
     override fun onCreate() {
         super.onCreate()
-        SoLoader.init(this, false)
+        SoLoader.init(this, OpenSourceMergedSoMapping)
         if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
             // If you opted-in for the New Architecture, we load the native entry point for this app.
             load()

examples/SampleApp/android/build.gradle

@@ -3,9 +3,9 @@ import org.apache.tools.ant.taskdefs.condition.Os
 
 buildscript {
     ext {
-        buildToolsVersion = "34.0.0"
-        minSdkVersion = 23
-        compileSdkVersion = 34
+        buildToolsVersion = "35.0.0"
+        minSdkVersion = 24
+        compileSdkVersion = 35
         targetSdkVersion = 34
         ndkVersion = "26.1.10909125"
         kotlinVersion = "1.9.24"

examples/SampleApp/android/gradle.properties

@@ -32,7 +32,7 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
 # your application. You should enable this flag either if you want
 # to write custom TurboModules/Fabric components OR use libraries that
 # are providing them.
-newArchEnabled=false
+newArchEnabled=true
 
 # Use this property to enable or disable the Hermes JS engine.
 # If set to false, you will be using JSC instead.

examples/SampleApp/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.8-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.10.2-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

examples/SampleApp/android/gradlew

@@ -15,6 +15,8 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 #
+# SPDX-License-Identifier: Apache-2.0
+#
 
 ##############################################################################
 #
@@ -84,7 +86,8 @@ done
 # shellcheck disable=SC2034
 APP_BASE_NAME=${0##*/}
 # Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
-APP_HOME=$( cd "${APP_HOME:-./}" > /dev/null && pwd -P ) || exit
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s
+' "$PWD" ) || exit
 
 # Use the maximum available, or set MAX_FD != -1 to use that value.
 MAX_FD=maximum

examples/SampleApp/android/gradlew.bat

@@ -13,6 +13,8 @@
 @rem See the License for the specific language governing permissions and
 @rem limitations under the License.
 @rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
 
 @if "%DEBUG%"=="" @echo off
 @rem ##########################################################################