fix: web supports and examples have been revived

.eslintrc

@@ -1,4 +1,6 @@
 {
     "extends": "@dohooo",
-    "rules": {}
+    "rules": {
+        "@typescript-eslint/no-use-before-define": "off",
+    }
 }

.github/workflows/static.yml

@@ -53,12 +53,12 @@ jobs:
 
       - run: yarn install
 
-      - run: cd ./exampleExpo && yarn install && yarn build:web
+      - run: cd ./example/expo && yarn install && yarn build:web
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v2
         with:
-          path: './exampleExpo/web-build'
+          path: './example/expo/web-build'
 
       - name: Deploy to GitHub Pages
         id: deployment

example/app/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "react-native-reanimated-carousel-example-app",
+  "version": "1.0.0",
+  "main": "./src/index",
+  "react-native": "./src/index",
+  "private": true,
+  "peerDependencies": {
+    "@faker-js/faker": "^8.0.2",
+    "@react-navigation/native": "^6.1.6",
+    "@react-navigation/native-stack": "^6.9.12",
+    "@react-navigation/stack": "^6.3.16",
+    "expo": "^49.0.0",
+    "expo-blur": "~12.4.1",
+    "expo-constants": "~14.4.2",
+    "expo-status-bar": "~1.6.0",
+    "expo-updates": "~0.18.10",
+    "jest": "^29.2.1",
+    "jest-expo": "^47.0.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.72.3",
+    "react-native-gesture-handler": "~2.12.0",
+    "react-native-reanimated": "~3.3.0",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-screens": "~3.22.0",
+    "react-native-snap-carousel": "^3.9.1"
+  }
+}

exampleExpo/src/App.tsx → example/app/src/App.tsx

@@ -13,6 +13,7 @@ const WebContainer: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
         height: "100%",
         width: window.width,
         alignSelf: "center",
+        margin: "auto",
       }}
     >
       {children}

exampleExpo/src/Home.tsx → example/app/src/Home.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 import * as React from "react";
 import {
   View,
@@ -37,14 +36,6 @@ import StackCards from "./pages/stack-cards";
 import Tear from "./pages/tear";
 import { isAndroid, isIos } from "./utils";
 
-// Not support to WEB (react-native-snap-carousel)
-const SnapCarouselComplexComponent = React.lazy(
-  () => import("./pages/snap-carousel-complex"),
-);
-const SnapCarouselLoopComponent = React.lazy(
-  () => import("./pages/snap-carousel-loop"),
-);
-
 export const LayoutsPage = [
   {
     name: "Normal",
@@ -151,9 +142,18 @@ export const OtherPage = [
 ];
 
 if (isIos || isAndroid) {
+  // Not support to WEB (react-native-snap-carousel)
+  const SnapCarouselComplexComponent = React.lazy(
+    () => import("./pages/snap-carousel-complex"),
+  );
+  const SnapCarouselLoopComponent = React.lazy(
+    () => import("./pages/snap-carousel-loop"),
+  );
+
   OtherPage.push(
     {
       name: "SnapCarouselComplex",
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error
       page: SnapCarouselComplexComponent,
     },

exampleExpo/src/constants/index.ts → example/app/src/constants/index.ts

@@ -12,6 +12,6 @@ export const ElementsText = {
 export const window: ScaledSize = isWeb
   ? {
     ...Dimensions.get("window"),
-    width: 375,
+    width: 700,
   }
   : Dimensions.get("window");

example/app/src/index.ts

@@ -0,0 +1 @@
+export { default as App } from "./App";

exampleExpo/src/navigation/root.tsx → example/app/src/navigation/root.tsx

@@ -1,15 +1,24 @@
 import React from "react";
-import { I18nManager, Text, View } from "react-native";
+import { I18nManager, Text, View, Platform } from "react-native";
 import { TouchableWithoutFeedback } from "react-native-gesture-handler";
-import RNRestart from "react-native-restart";
 
 import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
+import * as Updates from "expo-updates";
 
 import { QRCode } from "../components/QRCode";
 import Home, { CustomAnimations, LayoutsPage, OtherPage } from "../Home";
 import { isWeb } from "../utils";
 
+const Restart = () => {
+  if (Platform.OS === "web")
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    window.location.reload();
+  else
+    Updates.reloadAsync();
+};
+
 const Stack = createStackNavigator<any>();
 
 export const RootNavigator = () => {
@@ -44,7 +53,7 @@ export const RootNavigator = () => {
                 onPress={() => {
                   I18nManager.forceRTL(!isRTL);
                   setIsRTL(!isRTL);
-                  RNRestart.restart();
+                  Restart();
                 }}
               >
                 <Text style={{ color: tintColor }}>

exampleExpo/src/snapshots.test.tsx → example/app/src/snapshots.test.tsx

@@ -5,7 +5,7 @@ import { withReanimatedTimer, advanceAnimationByTime } from "react-native-reanim
 
 // @ts-expect-error, eslint-disable-next-line import/no-webpack-loader-syntax, @typescript-eslint/ban-ts-comment
 // eslint-disable-next-line import/no-webpack-loader-syntax
-import * as Carousels from "./pages/!\(snap-carousel-*\)/index.tsx";
+import * as Carousels from "./pages/!(snap-carousel-*)/index.js";
 
 jest.mock("@faker-js/faker", () => ({
   faker: {

example/app/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "react-native-reanimated-carousel": ["../../src/index"],
+    },
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react",
+    "lib": ["esnext"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noImplicitUseStrict": false,
+    "noStrictGenericChecks": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "esnext"
+  },
+  "include": ["src"]
+}

exampleBare/package.json → example/bare/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "example-bare",
+  "name": "react-native-reanimated-carousel-example-bare",
   "version": "1.0.0",
   "scripts": {
     "start": "expo start --dev-client",

example/bare/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "react-native-reanimated-carousel": ["../../src/index"],
+      "react-native-reanimated-carousel-example-app": ["../app/src/index"]
+    },
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react",
+    "lib": ["esnext"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noImplicitUseStrict": false,
+    "noStrictGenericChecks": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "esnext"
+  },
+  "include": ["src"]
+}

example/expo/app.config.js

@@ -0,0 +1,36 @@
+export default () => {
+  return {
+    name: "exampleExpo",
+    slug: "exampleExpo",
+    version: "1.0.0",
+    orientation: "portrait",
+    icon: "./assets/icon.png",
+    userInterfaceStyle: "light",
+    splash: {
+      image: "./assets/splash.png",
+      resizeMode: "contain",
+      backgroundColor: "#ffffff",
+    },
+    updates: {
+      fallbackToCacheTimeout: 0,
+    },
+    assetBundlePatterns: [
+      "**/*",
+    ],
+    ios: {
+      supportsTablet: true,
+    },
+    android: {
+      adaptiveIcon: {
+        foregroundImage: "./assets/adaptive-icon.png",
+        backgroundColor: "#FFFFFF",
+      },
+    },
+    web: {
+      favicon: "./assets/favicon.png",
+    },
+    extra: {
+      enablePretty: process.env.PRETTY === "true",
+    },
+  };
+};

example/expo/babel.config.js

@@ -0,0 +1,33 @@
+const path = require('path');
+const fs = require('fs');
+
+const root = path.resolve(__dirname, '../..');
+const rootPak = JSON.parse(
+  fs.readFileSync(path.join(root, 'package.json'), 'utf8')
+);
+
+const app = path.join(__dirname, '../app');
+const appPak = JSON.parse(
+  fs.readFileSync(path.join(app, 'package.json'), 'utf8')
+);
+
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      'react-native-reanimated/plugin',
+      [
+        'module-resolver',
+        {
+          extensions: ['.tsx', '.ts', '.js', '.json'],
+          alias: {
+            // For development, we want to alias the library to the source
+            [rootPak.name]: path.join(root, rootPak['react-native']),
+            [appPak.name]: path.join(app, appPak['react-native']),
+          },
+        },
+      ],
+    ],
+  };
+};

example/expo/index.ts

@@ -0,0 +1,4 @@
+import { registerRootComponent } from 'expo';
+import App from './src/App';
+
+registerRootComponent(App);

example/expo/metro.config.js

@@ -0,0 +1,52 @@
+const path = require('path');
+const fs = require('fs');
+const exclusionList = require('metro-config/src/defaults/exclusionList');
+const escape = require('escape-string-regexp');
+
+const root = path.resolve(__dirname, '../..');
+const rootPak = JSON.parse(
+  fs.readFileSync(path.join(root, 'package.json'), 'utf8')
+);
+
+const app = path.join(__dirname, '../app');
+const appPak = JSON.parse(
+  fs.readFileSync(path.join(app, 'package.json'), 'utf8')
+);
+
+const modules = [
+  '@babel/runtime',
+  ...Object.keys({
+    ...rootPak.dependencies,
+    ...rootPak.peerDependencies,
+    ...appPak.devDependencies,
+    ...appPak.peerDependencies,
+  }),
+];
+
+module.exports = {
+  projectRoot: __dirname,
+  watchFolders: [root],
+
+  // We need to make sure that only one version is loaded for peerDependencies
+  // So we blacklist them at the root, and alias them to the versions in example's node_modules
+  resolver: {
+    blacklistRE: exclusionList([
+      new RegExp(`^${escape(path.join(root, 'node_modules'))}\\/.*$`),
+      new RegExp(`^${escape(path.join(app, 'node_modules'))}\\/.*$`),
+    ]),
+
+    extraNodeModules: modules.reduce((acc, name) => {
+      acc[name] = path.join(__dirname, 'node_modules', name);
+      return acc;
+    }, {}),
+  },
+
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: true,
+      },
+    }),
+  },
+};