Ref/example apps

.github/workflows/validate.yml

@@ -26,21 +26,21 @@ jobs:
               - '.github/workflows/validate.yml'
             js:
               - '.node-version'
-              - '.eslintrc.js'
+              - '.eslint.config.mjs'
               - '.prettierrc.js'
               - 'package.json'
               - 'tsconfig.json'
               - 'yarn.lock'
               - 'src/**'
-              - 'example/src/**'
-              - 'example/**.json'
-              - 'example/**.js'
+              - 'apps/example-native/src/**'
+              - 'apps/example-native/**.json'
+              - 'apps/example-native/**.js'
             ios:
               - 'ios/**'
-              - 'example/ios/**'
+              - 'apps/example-native/ios/**'
             android:
               - 'android/**'
-              - 'example/android/**'
+              - 'apps/example-native/android/**'
             docs:
               - 'docs/**'
   check-typescript:
@@ -57,23 +57,13 @@ jobs:
       - name: Install Dependencies
         if: ${{ needs.check-changes.outputs.should-check-types }}
         run: |-
-          yarn install --frozen-lockfile
-      - name: Install Example Dependencies
-        if: ${{ needs.check-changes.outputs.should-check-types }}
-        run: |-
-          yarn example install --frozen-lockfile
+          yarn install --immutable
       - name: Check Lint, Format & Types
         if: ${{ needs.check-changes.outputs.should-check-types }}
         run: |
-          yarn lint
-          yarn format
-          yarn typecheck
-      - name: Example - Check Lint, Format & Types
-        if: ${{ needs.check-changes.outputs.should-check-types }}
-        run: |
-          yarn example lint
-          yarn example format
-          yarn example typecheck
+          yarn lint:check:all
+          yarn format:check:all
+          yarn types
   build-ios:
     runs-on: blaze/macos-14
     needs: check-changes
@@ -87,41 +77,36 @@ jobs:
           +: ruby-lang.org@3.1.0
             classic.yarnpkg.com
             tuist.io/xcbeautify
-      - name: Install Library Dependencies
+      - name: Install Dependencies
         if: ${{ needs.check-changes.outputs.should-build-ios }}
-        run: yarn install --frozen-lockfile
+        run: yarn install --immutable
       - name: Build Library
         if: ${{ needs.check-changes.outputs.should-build-ios }}
         run: yarn build
-      - name: Install Example Dependencies
-        if: ${{ needs.check-changes.outputs.should-build-ios }}
-        run: |-
-          cd example
-          yarn install --frozen-lockfile
       - name: Bundle Install
         if: ${{ needs.check-changes.outputs.should-build-ios }}
         run: |-
-          cd example/ios
+          cd apps/example-native/ios
           pkgx +ruby-lang.org@3.1.0 gem install bundler
           pkgx +ruby-lang.org@3.1.0 bundle config set --local path 'vendor/bundle'
           pkgx +ruby-lang.org@3.1.0 bundle install
       - name: Cache Cocoapods Dependencies
         if: ${{ needs.check-changes.outputs.should-build-ios }}
         uses: buildjet/cache@v4
         with:
-          path: example/ios/Pods
-          key: ${{ runner.os }}-pods-${{ hashFiles('example/ios/Podfile.lock') }}
+          path: apps/example-native/ios/Pods
+          key: ${{ runner.os }}-pods-${{ hashFiles('apps/example-native/ios/Podfile.lock') }}
           restore-keys: |
             ${{ runner.os }}-pods-
       - name: Install Cococapods
         if: ${{ needs.check-changes.outputs.should-build-ios }}
         run: |-
-          cd example/ios
+          cd apps/example-native/ios
           pkgx +ruby-lang.org@3.1.0 bundle exec pod install
       - name: Build App
         if: ${{ needs.check-changes.outputs.should-build-ios }}
         run: |-
-          cd example/ios
+          cd apps/example-native/ios
           set -o pipefail && xcodebuild build -workspace TrackPlayerExample.xcworkspace -scheme TrackPlayerExample -destination 'platform=iOS Simulator,name=iPhone 15 Pro' | xcbeautify --renderer github-actions
   build-android:
     runs-on: ubuntu-latest
@@ -134,35 +119,30 @@ jobs:
         uses: pkgxdev/setup@v2
         with:
           +: classic.yarnpkg.com
-      - name: Install Library Dependencies
+      - name: Install Dependencies
         if: ${{ needs.check-changes.outputs.should-build-android }}
-        run: yarn install --frozen-lockfile
+        run: yarn install --immutable
       - name: Build Library
         if: ${{ needs.check-changes.outputs.should-build-android }}
         run: yarn build
-      - name: Install Mobile Dependencies
-        if: ${{ needs.check-changes.outputs.should-build-android }}
-        run: |-
-          cd example
-          yarn install
       - name: Cache Gradle Wrapper
         if: ${{ needs.check-changes.outputs.should-build-android }}
         uses: actions/cache@v4
         with:
           path: ~/.gradle/wrapper
-          key: ${{ runner.os }}-gradle-wrapper-${{ hashFiles('example/android/gradle/wrapper/gradle-wrapper.properties') }}
+          key: ${{ runner.os }}-gradle-wrapper-${{ hashFiles('apps/example-native/android/gradle/wrapper/gradle-wrapper.properties') }}
       - name: Cache Gradle Dependencies
         if: ${{ needs.check-changes.outputs.should-build-android }}
         uses: actions/cache@v4
         with:
           path: ~/.gradle/caches
-          key: ${{ runner.os }}-gradle-caches-${{ hashFiles('example/android/gradle/wrapper/gradle-wrapper.properties') }}
+          key: ${{ runner.os }}-gradle-caches-${{ hashFiles('apps/example-native/android/gradle/wrapper/gradle-wrapper.properties') }}
           restore-keys: |
             ${{ runner.os }}-gradle-caches-
       - name: Build App
         if: ${{ needs.check-changes.outputs.should-build-android }}
         run: |-
-          cd example/android
+          cd apps/example-native/android
           ./gradlew assembleDebug --no-daemon
   build-docs:
     runs-on: ubuntu-latest
@@ -181,7 +161,7 @@ jobs:
       - name: Install Dependencies
         if: ${{ needs.check-changes.outputs.should-build-docs }}
         run: |-
-          yarn install --frozen-lockfile
+          yarn install --immutable
       - name: Build Docs
         if: ${{ needs.check-changes.outputs.should-build-docs }}
         run: |-

.gitignore

@@ -43,10 +43,10 @@ android.iml
 
 # Cocoapods
 #
-example/ios/Pods
+apps/*/ios/Pods
 
 # Ruby
-example/vendor/
+apps/*/vendor/
 
 # node.js
 #

apps/common-app/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "common-app",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "format": "prettier --write src",
+    "format:check": "prettier --check src",
+    "lint": "eslint src --fix",
+    "lint:check": "eslint src --max-warnings=0",
+    "start": "react-native start",
+    "types": "tsc --noEmit true"
+  },
+  "peerDependencies": {
+    "react-native": "*"
+  },
+  "dependencies": {
+    "@react-native-community/slider": "^4.5.7",
+    "@react-native-vector-icons/fontawesome6": "^12.0.1",
+    "react": "19.1.0",
+    "react-native-safe-area-context": "^5.5.0",
+    "react-native-track-player": "workspace:*"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/runtime": "^7.25.0",
+    "@react-native-community/cli": "19.1.1",
+    "@react-native-community/cli-platform-android": "19.1.1",
+    "@react-native-community/cli-platform-ios": "19.1.1",
+    "@react-native/babel-preset": "0.80.2",
+    "@react-native/eslint-config": "0.80.2",
+    "@react-native/metro-config": "0.80.2",
+    "@react-native/typescript-config": "0.80.2",
+    "@types/react": "^19.1.0"
+  },
+  "engines": {
+    "node": ">=24"
+  }
+}

example/src/App.tsx → apps/common-app/src/App.tsx

@@ -13,9 +13,7 @@ import {
   View,
 } from 'react-native';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
-import TrackPlayer, {
-  useActiveTrack
-} from 'react-native-track-player';
+import TrackPlayer, { useActiveTrack } from 'react-native-track-player';
 import {
   ActionSheet,
   Button,

example/src/components/OptionSheet.tsx → apps/common-app/src/components/OptionSheet.tsx

@@ -41,9 +41,7 @@ export function OptionSheet() {
               value: 'stop-playback-and-remove-notification',
             },
           ]}
-          value={
-            currentOptions.android.appKilledPlaybackBehavior
-          }
+          value={currentOptions.android.appKilledPlaybackBehavior}
           onSelect={(appKilledPlaybackBehavior: AppKilledPlaybackBehavior) => {
             TrackPlayer.updateOptions({
               android: {

example/src/components/PlayPauseButton.tsx → apps/common-app/src/components/PlayPauseButton.tsx

@@ -14,9 +14,7 @@ export function PlayPauseButton() {
       {buffering ? (
         <ActivityIndicator />
       ) : (
-        <TouchableWithoutFeedback
-          onPress={TrackPlayer.togglePlayback}
-        >
+        <TouchableWithoutFeedback onPress={TrackPlayer.togglePlayback}>
           <Icon
             name={playing ? 'pause' : 'play'}
             size={48}

example/src/hooks/usePlayer.ts → apps/common-app/src/hooks/usePlayer.ts

@@ -33,7 +33,7 @@ export function useSetupPlayer() {
           'jump-backward',
           'jump-forward',
         ],
-        progressUpdateEventInterval: 2
+        progressUpdateEventInterval: 2,
       });
       if (unmounted) return;
       setPlayerReady(true);

example/README.md → apps/example-native/README.md

@@ -10,7 +10,7 @@ git clone git@github.com:DoubleSymmetry/react-native-track-player.git
 cd react-native-track-player
 yarn
 yarn build
-cd example
+cd apps/example-native
 yarn
 cd ios && pod install && cd ..
 ```
@@ -31,14 +31,14 @@ yarn dev
 
 The above command will automatically watch for changes int the `src` folder
 and recompile them while you work. Then they'll get automatically reloaded
-in a running instance of the `example` app so you can see your changes.
+in a running instance of the `example-native` app so you can see your changes.
 
 ## iOS Native
 
 It's recommended that you make your changes directly in XCode. Which you can
 open quickly by running one of the following commands:
 
-From inside the `example` directory:
+From inside the `example-native` directory:
 
 ```sh
 yarn ios:ide
@@ -65,7 +65,7 @@ android project in Android Studio and modifying the source:
 
 **macOS Ex**
 
-From inside the `example` directory:
+From inside the `example-native` directory:
 
 ```sh
 yarn android:ide

apps/example-native/babel.config.js

@@ -0,0 +1,23 @@
+const path = require('path');
+const { getConfig } = require('react-native-builder-bob/babel-config');
+const pkg = require('../../package.json');
+
+const root = path.resolve(__dirname, '..', '..');
+
+module.exports = getConfig(
+  {
+    presets: ['module:@react-native/babel-preset'],
+    plugins: [
+      [
+        'module-resolver',
+        {
+          alias: {
+            '@': '../common-app/src',
+          },
+          extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.jpg', '.m4a'],
+        },
+      ],
+    ],
+  },
+  { root, pkg },
+);

example/index.js → apps/example-native/index.js

@@ -1,6 +1,6 @@
 import { AppRegistry } from 'react-native';
 
 import { name as appName } from './app.json';
-import App from './src/App';
+import App from 'common-app/src/App';
 
 AppRegistry.registerComponent(appName, () => App);