Merge branch 'main' into feat/docs/setup

apps/common-app/package.json

@@ -9,6 +9,9 @@
     "@react-navigation/native-stack": "*",
     "@react-navigation/stack": "*",
     "@shopify/react-native-skia": "*",
+    "expo": "*",
+    "expo-document-picker": "*",
+    "expo-file-system": "*",
     "react": "*",
     "react-dom": "*",
     "react-native": "*",
@@ -26,13 +29,27 @@
     "@react-navigation/native-stack": "^6.11.0",
     "@react-navigation/stack": "^6.4.1",
     "@shopify/react-native-skia": "^1.5.1",
+    "expo": "^52.0.0",
+    "expo-document-picker": "~13.0.1",
+    "expo-file-system": "~18.0.4",
     "react": "18.3.1",
     "react-dom": "18.2.0",
     "react-native": "0.76.0",
     "react-native-audio-api": "workspace:*",
+    "react-native-dotenv": "^3.4.11",
     "react-native-gesture-handler": "^2.20.2",
     "react-native-reanimated": "^3.16.1",
     "react-native-safe-area-context": "^4.12.0",
     "react-native-screens": "^3.35.0"
+  },
+  "expo": {
+    "autolinking": {
+      "exclude": [
+        "expo-keep-awake",
+        "expo-asset",
+        "expo-font",
+        "expo-constants"
+      ]
+    }
   }
 }

apps/common-app/src/components/Button.tsx

@@ -6,17 +6,27 @@ import { colors, layout } from '../styles';
 interface ButtonProps {
   title: string;
   onPress: () => void;
+  disabled?: boolean;
+  width?: number;
 }
 
-const Button: FC<ButtonProps> = (props) => {
-  const { title, onPress } = props;
-
+const Button: FC<ButtonProps> = ({
+  title,
+  onPress,
+  disabled = false,
+  width = 100,
+}) => {
   return (
     <Pressable
+      disabled={disabled}
       onPress={onPress}
       style={({ pressed }) => [
         styles.button,
-        { backgroundColor: pressed ? `${colors.main}88` : colors.main },
+        {
+          backgroundColor: pressed ? `${colors.main}88` : colors.main,
+          opacity: disabled ? 0.5 : 1,
+          width: width,
+        },
       ]}
     >
       <Text style={styles.text}>{title}</Text>
@@ -28,7 +38,6 @@ const styles = StyleSheet.create({
   button: {
     padding: layout.spacing,
     borderRadius: layout.radius,
-    width: 100,
   },
   text: {
     color: colors.white,

apps/common-app/src/examples/AudioFile/AudioFile.tsx

@@ -1,6 +1,6 @@
-import React, { useCallback } from 'react';
-import { useState, useRef, useEffect, FC } from 'react';
-import { Container, Button } from '../../components';
+import React, { useCallback, useEffect, useRef, useState, FC } from 'react';
+import { Container, Button, Spacer } from '../../components';
+import * as DocumentPicker from 'expo-document-picker';
 
 import {
   AudioBuffer,
@@ -9,11 +9,9 @@ import {
 } from 'react-native-audio-api';
 import { ActivityIndicator } from 'react-native';
 
-const assetUrl =
-  'https://audio-ssl.itunes.apple.com/apple-assets-us-std-000001/AudioPreview18/v4/9c/db/54/9cdb54b3-5c52-3063-b1ad-abe42955edb5/mzaf_520282131402737225.plus.aac.p.m4a';
-
 const AudioFile: FC = () => {
   const [isPlaying, setIsPlaying] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   const audioContextRef = useRef<AudioContext | null>(null);
   const audioBufferSourceNodeRef = useRef<AudioBufferSourceNode | null>(null);
@@ -32,13 +30,33 @@ const AudioFile: FC = () => {
     );
   };
 
-  const fetchAudioBuffer = useCallback(async () => {
+  const handleSetAudioSourceFromFile = async () => {
+    try {
+      const result = await DocumentPicker.getDocumentAsync({
+        type: 'audio/*',
+        multiple: false,
+      });
+
+      if (result.canceled === false) {
+        audioBufferSourceNodeRef.current?.stop();
+        setIsPlaying(false);
+
+        setIsLoading(true);
+        await fetchAudioBuffer(result.assets[0].uri.replace('file://', ''));
+        setIsLoading(false);
+      }
+    } catch (error) {
+      console.error('Error picking file:', error);
+    }
+  };
+
+  const fetchAudioBuffer = useCallback(async (assetUri: string) => {
     if (!audioContextRef.current) {
       audioContextRef.current = new AudioContext();
     }
 
     const buffer =
-      await audioContextRef.current.decodeAudioDataSource(assetUrl);
+      await audioContextRef.current.decodeAudioDataSource(assetUri);
 
     setAudioBuffer(buffer);
   }, []);
@@ -64,17 +82,25 @@ const AudioFile: FC = () => {
       audioContextRef.current = new AudioContext();
     }
 
-    fetchAudioBuffer();
-
     return () => {
       audioContextRef.current?.close();
     };
   }, [fetchAudioBuffer]);
 
   return (
     <Container centered>
-      <Button title={isPlaying ? 'Stop' : 'Play'} onPress={handlePress} />
-      {!audioBuffer && <ActivityIndicator color="#FFFFFF" />}
+      <Button
+        title="Set audio source from file"
+        onPress={handleSetAudioSourceFromFile}
+        width={200}
+      />
+      {isLoading && <ActivityIndicator color="#FFFFFF" />}
+      <Spacer.Vertical size={20} />
+      <Button
+        title={isPlaying ? 'Stop' : 'Play'}
+        onPress={handlePress}
+        disabled={!audioBuffer ? true : false}
+      />
     </Container>
   );
 };

apps/common-app/src/examples/Piano/Piano.tsx

@@ -1,5 +1,6 @@
 import { FC, useEffect, useRef } from 'react';
 import { AudioContext, AudioBuffer } from 'react-native-audio-api';
+import * as FileSystem from 'expo-file-system';
 
 import { Container } from '../../components';
 import { KeyName, sources, keyMap } from './utils';
@@ -27,8 +28,16 @@ const Piano: FC = () => {
     }
 
     Object.entries(sources).forEach(async ([key, url]) => {
-      bufferListRef.current[key as KeyName] =
-        await audioContextRef.current!.decodeAudioDataSource(url);
+      bufferListRef.current[key as KeyName] = await FileSystem.downloadAsync(
+        url,
+        FileSystem.documentDirectory + key.replace('#', 's') + '.mp3'
+      )
+        .then(({ uri }) => {
+          return uri.replace('file://', '');
+        })
+        .then((uri) => {
+          return audioContextRef.current!.decodeAudioDataSource(uri);
+        });
     });
 
     const newNotes: Partial<Record<KeyName, PianoNote>> = {};

apps/common-app/src/examples/Piano/PianoNote.tsx

@@ -20,7 +20,7 @@ class PianoNote {
   }
 
   start(bufferList: Record<string, AudioBuffer>) {
-    const { buffer /*, playbackRate */ } = getSource(bufferList, this.key);
+    const { buffer, playbackRate } = getSource(bufferList, this.key);
 
     if (!buffer) {
       return;
@@ -30,6 +30,7 @@ class PianoNote {
 
     this.bufferSource = this.audioContext.createBufferSource();
     this.bufferSource.buffer = buffer;
+    this.bufferSource.playbackRate.value = playbackRate;
 
     this.gain = this.audioContext.createGain();
     this.gain.gain.setValueAtTime(0.001, this.audioContext.currentTime);

apps/common-app/src/examples/Piano/utils.ts

@@ -43,7 +43,7 @@ export const sourcesTeda: Partial<Record<KeyName, string>> = {
   'B4': 'https://michalsek.github.io/audio-samples/piano/12_B4.mp3',
 };
 
-export const sources = sourcesTeda;
+export const sources = sourcesTone;
 
 export const keyMap: KeyMap = {
   'C4': {

apps/fabric-example/android/app/build.gradle

@@ -110,6 +110,7 @@ android {
 dependencies {
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
+    implementation project(':expo')
 
     if (hermesEnabled.toBoolean()) {
         implementation("com.facebook.react:hermes-android")

apps/fabric-example/android/app/src/main/AndroidManifest.xml

@@ -1,6 +1,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.READ_MEDIA_AUDIO"/>
 
     <application
       android:name=".MainApplication"

apps/fabric-example/android/app/src/main/java/com/fabricexample/MainActivity.kt

@@ -1,5 +1,6 @@
 package com.fabricexample
 
+import expo.modules.ReactActivityDelegateWrapper
 import com.facebook.react.ReactActivity
 import com.facebook.react.ReactActivityDelegate
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
@@ -18,5 +19,5 @@ class MainActivity : ReactActivity() {
    * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
    */
   override fun createReactActivityDelegate(): ReactActivityDelegate =
-      DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
+      ReactActivityDelegateWrapper(this, BuildConfig.IS_NEW_ARCHITECTURE_ENABLED, DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled))
 }

apps/fabric-example/android/app/src/main/java/com/fabricexample/MainApplication.kt

@@ -1,44 +1,52 @@
 package com.fabricexample
 
+import android.content.res.Configuration
+import expo.modules.ApplicationLifecycleDispatcher
+import expo.modules.ReactNativeHostWrapper
 import android.app.Application
 import com.facebook.react.PackageList
 import com.facebook.react.ReactApplication
 import com.facebook.react.ReactHost
 import com.facebook.react.ReactNativeHost
 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 {
 
   override val reactNativeHost: ReactNativeHost =
-      object : DefaultReactNativeHost(this) {
-        override fun getPackages(): List<ReactPackage> =
-            PackageList(this).packages.apply {
-              // Packages that cannot be autolinked yet can be added manually here, for example:
-              // add(MyReactNativePackage())
-            }
-
-        override fun getJSMainModuleName(): String = "index"
-
-        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
+    ReactNativeHostWrapper(this, object : DefaultReactNativeHost(this) {
+      override fun getPackages(): List<ReactPackage> {
+        val packages = PackageList(this).packages
+        // Packages that cannot be autolinked yet can be added manually here, for example:
+        // packages.add(new MyReactNativePackage());
+        return packages
+      }
 
-        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
-        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
+      override fun getUseDeveloperSupport(): Boolean {
+        return BuildConfig.DEBUG;
       }
 
+      override fun getJSMainModuleName(): String = "index"
+      override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
+      override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
+    })
+
   override val reactHost: ReactHost
-    get() = getDefaultReactHost(applicationContext, reactNativeHost)
+    get() = ReactNativeHostWrapper.createReactHost(applicationContext, reactNativeHost)
 
   override fun onCreate() {
     super.onCreate()
     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()
-    }
+    load()
+
+    ApplicationLifecycleDispatcher.onApplicationCreate(this)
+  }
+
+  override fun onConfigurationChanged(newConfig: Configuration) {
+    super.onConfigurationChanged(newConfig)
+    ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
   }
 }

apps/fabric-example/android/gradle.properties

@@ -25,7 +25,7 @@ android.useAndroidX=true
 # Use this property to specify which architecture you want to build.
 # You can also override it from the CLI using
 # ./gradlew <task> -PreactNativeArchitectures=x86_64
-reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+reactNativeArchitectures=armeabi-v7a,arm64-v8a
 
 # Use this property to enable support to the new architecture.
 # This will allow you to use TurboModules and the Fabric render in

apps/fabric-example/android/settings.gradle

@@ -4,3 +4,6 @@ extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autoli
 rootProject.name = 'FabricExample'
 include ':app'
 includeBuild('../node_modules/@react-native/gradle-plugin')
+
+apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle")
+useExpoModules()

apps/fabric-example/babel.config.js

@@ -1,4 +1,7 @@
-module.exports = {
-  presets: ['module:@react-native/babel-preset'],
-  plugins: ['react-native-reanimated/plugin', 'module:react-native-dotenv'],
+module.exports = function (api) {
+  api.cache(false);
+  return {
+    presets: ['module:@react-native/babel-preset'],
+    plugins: ['react-native-reanimated/plugin', 'module:react-native-dotenv'],
+  };
 };