Develop

.github/actions/setup/action.yml

@@ -5,24 +5,32 @@ runs:
   using: composite
   steps:
     - name: Setup Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version-file: .nvmrc
 
-    - name: Cache dependencies
+    - name: Restore dependencies
       id: yarn-cache
-      uses: actions/cache@v3
+      uses: actions/cache/restore@v4
       with:
         path: |
           **/node_modules
-        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**/package.json') }}
+          .yarn/install-state.gz
+        key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}-${{ hashFiles('**/package.json', '!node_modules/**') }}
         restore-keys: |
-          ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
           ${{ runner.os }}-yarn-
 
     - name: Install dependencies
       if: steps.yarn-cache.outputs.cache-hit != 'true'
-      run: |
-        yarn install --cwd example --frozen-lockfile
-        yarn install --frozen-lockfile
+      run: yarn install --immutable
       shell: bash
+
+    - name: Cache dependencies
+      if: steps.yarn-cache.outputs.cache-hit != 'true'
+      uses: actions/cache/save@v4
+      with:
+        path: |
+          **/node_modules
+          .yarn/install-state.gz
+        key: ${{ steps.yarn-cache.outputs.cache-primary-key }}

.github/workflows/ci.yml

@@ -7,12 +7,16 @@ on:
     branches:
       - main
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup
         uses: ./.github/actions/setup
@@ -27,7 +31,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup
         uses: ./.github/actions/setup
@@ -36,26 +40,25 @@ jobs:
         run: yarn test --maxWorkers=2 --coverage
 
   build-library:
-    runs-on: macos-latest
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup
         uses: ./.github/actions/setup
 
       - name: Build package
-        run: yarn prepack
+        run: yarn prepare
 
   build-web:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup
         uses: ./.github/actions/setup
 
       - name: Build example for Web
-        run: |
-          yarn example expo export:web
+        run: yarn example build:web

.gitignore

@@ -11,6 +11,7 @@ jsconfig.json
 
 # Xcode
 #
+**/.xcode.env.local
 build/
 *.pbxuser
 !default.pbxuser
@@ -55,6 +56,14 @@ yarn-debug.log
 yarn-error.log
 .env
 
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
 # BUCK
 buck-out/
 \.buckd/
@@ -70,5 +79,11 @@ android/keystores/debug.keystore
 # generated by bob
 lib/
 
+# Jest coverage
+coverage/
+
+# Expo web export
+example/dist/
+
 # user files
 backlog.md

.nvmrc

@@ -1 +1 @@
-v18
+v24.13.0

.yarnrc.yml

@@ -0,0 +1,4 @@
+nodeLinker: node-modules
+nmHoistingLimits: workspaces
+
+yarnPath: .yarn/releases/yarn-4.11.0.cjs

babel.config.js

@@ -1,3 +1,12 @@
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+  overrides: [
+    {
+      exclude: /\/node_modules\//,
+      presets: ['module:react-native-builder-bob/babel-preset'],
+    },
+    {
+      include: /\/node_modules\//,
+      presets: ['module:@react-native/babel-preset'],
+    },
+  ],
 };

commitlint.config.ts

@@ -42,4 +42,4 @@ const Configuration: UserConfig = {
   },
 };
 
-module.exports = Configuration;
+export default Configuration;

eslint.config.mjs

@@ -0,0 +1,39 @@
+import { fixupConfigRules } from '@eslint/compat';
+import { FlatCompat } from '@eslint/eslintrc';
+import js from '@eslint/js';
+import prettier from 'eslint-plugin-prettier';
+import { defineConfig } from 'eslint/config';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default defineConfig([
+  {
+    extends: fixupConfigRules(compat.extends('@react-native', 'prettier')),
+    plugins: { prettier },
+    rules: {
+      'react/react-in-jsx-scope': 'off',
+      'prettier/prettier': [
+        'error',
+        {
+          quoteProps: 'consistent',
+          singleQuote: true,
+          tabWidth: 2,
+          trailingComma: 'es5',
+          useTabs: false,
+          endOfLine: 'auto',
+        },
+      ],
+    },
+  },
+  {
+    ignores: ['node_modules/', 'lib/'],
+  },
+]);

example/app.json

@@ -1,27 +1,28 @@
 {
   "expo": {
-    "name": "example",
-    "slug": "example",
+    "name": "BottomSheet Example",
+    "slug": "devvie-bottom-sheet-example",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
     "splash": {
-      "image": "./assets/splash.png",
+      "image": "./assets/splash-icon.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "bundleIdentifier": "com.devvie.bottomsheet.example"
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#ffffff"
-      }
+        "backgroundColor": "#3e3f3fff",
+        "foregroundImage": "./assets/android-icon-foreground.png",
+        "backgroundImage": "./assets/android-icon-background.png",
+        "monochromeImage": "./assets/android-icon-monochrome.png"
+      },
+      "package": "com.devvie.bottomsheet.example"
     },
     "web": {
       "favicon": "./assets/favicon.png"

example/babel.config.js

@@ -1,22 +1,16 @@
 const path = require('path');
-const pak = require('../package.json');
+const { getConfig } = require('react-native-builder-bob/babel-config');
+const pkg = require('../package.json');
+
+const root = path.resolve(__dirname, '..');
 
 module.exports = function (api) {
   api.cache(true);
 
-  return {
-    presets: ['babel-preset-expo'],
-    plugins: [
-      [
-        'module-resolver',
-        {
-          extensions: ['.tsx', '.ts', '.js', '.json'],
-          alias: {
-            // For development, we want to alias the library to the source
-            [pak.name]: path.join(__dirname, '..', pak.source),
-          },
-        },
-      ],
-    ],
-  };
+  return getConfig(
+    {
+      presets: ['babel-preset-expo'],
+    },
+    { root, pkg }
+  );
 };

example/index.js

@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './src/App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

example/metro.config.js

@@ -1,43 +1,18 @@
 const path = require('path');
-const escape = require('escape-string-regexp');
 const { getDefaultConfig } = require('@expo/metro-config');
-const exclusionList = require('metro-config/src/defaults/exclusionList');
-const pak = require('../package.json');
+const { withMetroConfig } = require('react-native-monorepo-config');
 
 const root = path.resolve(__dirname, '..');
-const modules = Object.keys({ ...pak.peerDependencies });
-
-const defaultConfig = getDefaultConfig(__dirname);
 
 /**
  * Metro configuration
  * https://facebook.github.io/metro/docs/configuration
  *
  * @type {import('metro-config').MetroConfig}
  */
-const config = {
-  ...defaultConfig,
-
-  projectRoot: __dirname,
-  watchFolders: [root],
-
-  // We need to make sure that only one version is loaded for peerDependencies
-  // So we block them at the root, and alias them to the versions in example's node_modules
-  resolver: {
-    ...defaultConfig.resolver,
-
-    blacklistRE: exclusionList(
-      modules.map(
-        (m) =>
-          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
-      )
-    ),
-
-    extraNodeModules: modules.reduce((acc, name) => {
-      acc[name] = path.join(__dirname, 'node_modules', name);
-      return acc;
-    }, {}),
-  },
-};
+const config = withMetroConfig(getDefaultConfig(__dirname), {
+  root,
+  dirname: __dirname,
+});
 
 module.exports = config;

example/package.json

@@ -1,27 +1,26 @@
 {
-  "name": "example",
+  "name": "@devvie/bottom-sheet-example",
   "version": "1.0.0",
-  "main": "node_modules/expo/AppEntry.js",
+  "main": "index.js",
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
-    "web": "expo start --web"
+    "web": "expo start --web",
+    "build:web": "expo export --platform web"
   },
   "dependencies": {
-    "@devvie/bottom-sheet": "^0.1.2",
-    "expo": "~49.0.11",
-    "expo-status-bar": "~1.6.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "0.72.4",
-    "react-native-web": "~0.19.6"
+    "@expo/metro-runtime": "~55.0.11",
+    "expo": "~55.0.23",
+    "expo-status-bar": "~55.0.6",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-native": "0.83.6",
+    "react-native-web": "~0.21.0"
   },
+  "private": true,
   "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@expo/webpack-config": "^18.0.1",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-module-resolver": "^5.0.0"
-  },
-  "private": true
+    "react-native-builder-bob": "^0.41.0",
+    "react-native-monorepo-config": "^0.3.3"
+  }
 }

example/src/App.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { StyleSheet, View, Text, Button } from 'react-native';
+import { Button, StyleSheet, Text, View } from 'react-native';
+
 // @ts-ignore ts can't find module '@devvie/bottom-sheet' on github runner because it's aliased
 import BottomSheet, { type BottomSheetMethods } from '@devvie/bottom-sheet';