feat(web): setting up initial web example

expo-example/app.json

@@ -0,0 +1,23 @@
+{
+  "name": "react-native-clocks-example",
+  "displayName": "SkiaClock Example",
+  "expo": {
+    "name": "react-native-clocks-example",
+    "slug": "react-native-clocks-example",
+    "description": "Example app for react-native-clocks",
+    "privacy": "public",
+    "version": "1.0.0",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "jsEngine": "hermes",
+    "assetBundlePatterns": [
+      "**/*"
+    ]
+  }
+}

expo-example/babel.config.js

@@ -0,0 +1,23 @@
+const path = require('path');
+const pak = require('../package.json');
+
+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),
+          },
+        },
+      ],
+      'react-native-reanimated/plugin',
+    ],
+  };
+};

expo-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 the Expo client or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

expo-example/index.web.js

@@ -0,0 +1,7 @@
+import { registerRootComponent } from 'expo';
+import { LoadSkiaWeb } from '@shopify/react-native-skia/lib/module/web';
+
+LoadSkiaWeb().then(async () => {
+  const App = (await import('./src/App')).default;
+  registerRootComponent(App);
+});

expo-example/metro.config.js

@@ -0,0 +1,38 @@
+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 root = path.resolve(__dirname, '..');
+
+const modules = Object.keys({
+  ...pak.peerDependencies,
+});
+
+const defaultConfig = getDefaultConfig(__dirname);
+
+module.exports = {
+  ...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;
+    }, {}),
+  },
+};

expo-example/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "react-native-fiesta-expo-example",
+  "description": "Example app for react-native-fiesta",
+  "version": "0.0.1",
+  "private": true,
+  "main": "index",
+  "scripts": {
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "start": "expo start"
+  },
+  "dependencies": {
+    "@react-navigation/native": "^6.0.13",
+    "@react-navigation/native-stack": "^6.9.0",
+    "@react-navigation/stack": "^6.3.1",
+    "@shopify/react-native-skia": "0.1.141",
+    "expo": "^46.0.0",
+    "expo-splash-screen": "~0.16.2",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "react-native": "0.69.5",
+    "react-native-reanimated": "~2.9.1",
+    "react-native-safe-area-context": "4.3.1",
+    "react-native-screens": "~3.15.0",
+    "react-native-web": "~0.18.7"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.18.6",
+    "@babel/runtime": "^7.9.6",
+    "@types/react": "17.0.21",
+    "babel-loader": "^8.2.5",
+    "babel-plugin-module-resolver": "^4.0.0",
+    "babel-preset-expo": "~9.2.0",
+    "expo-cli": "^5.4.11"
+  }
+}

expo-example/src/App.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Home } from './screens/Home';
+import { FiestaExample } from './screens/FiestaExample';
+
+export type RootStackParamList = {
+  Home: undefined;
+  FiestaExample: { example: string };
+};
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      {/* @ts-ignore: problems with expo and react version types */}
+      <Stack.Navigator>
+        <Stack.Screen
+          name="Home"
+          component={Home}
+          options={{ headerShown: false }}
+        />
+        <Stack.Screen
+          name="FiestaExample"
+          component={FiestaExample}
+          options={(props) => {
+            const { route } = props;
+
+            return {
+              headerTintColor: 'white',
+              headerStyle: {
+                backgroundColor: '#181D31',
+              },
+              headerTitle: route.params.example,
+            };
+          }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}

expo-example/src/screens/FiestaExample.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Firework } from 'react-native-fiesta';
+import { Canvas } from '@shopify/react-native-skia';
+import { RouteProp, useRoute } from '@react-navigation/native';
+import type { RootStackParamList } from '../App';
+
+type FiestaExampleScreenNavigationProp = RouteProp<
+  RootStackParamList,
+  'FiestaExample'
+>;
+
+export function FiestaExample() {
+  const route = useRoute<FiestaExampleScreenNavigationProp>();
+
+  console.log({ route });
+
+  return (
+    <View style={styles.container}>
+      <Canvas>
+        <Firework />
+      </Canvas>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#121212',
+  },
+});

expo-example/src/screens/Home.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Dimensions, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { Firework } from 'react-native-fiesta';
+import { Canvas } from '@shopify/react-native-skia';
+import { useNavigation } from '@react-navigation/native';
+import type { StackNavigationProp } from '@react-navigation/stack';
+import type { RootStackParamList } from '../App';
+
+type HomeScreenNavigationProp = StackNavigationProp<RootStackParamList>;
+
+const COLUMN_SIZE = Dimensions.get('window').width * 0.33;
+const ANIMATION_INITIAL_POSITION = {
+  x: COLUMN_SIZE / 2,
+  y: COLUMN_SIZE / 2,
+};
+
+export function Home() {
+  const navigation = useNavigation<HomeScreenNavigationProp>();
+
+  const navigateToExample = (example: string) =>
+    navigation.navigate('FiestaExample', { example });
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.row}>
+        <TouchableOpacity
+          style={styles.column}
+          onPress={() => navigateToExample('Firework')}
+        >
+          <Canvas style={styles.column}>
+            <Firework
+              color="rgba(164, 164, 164, 0.4)"
+              initialPosition={ANIMATION_INITIAL_POSITION}
+              fireworkRadius={Dimensions.get('screen').width * 0.33}
+              numberOfParticles={40}
+              autoHide={false}
+            />
+          </Canvas>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={styles.column}
+          onPress={() => navigateToExample('Firework')}
+        >
+          <Canvas style={styles.column}>
+            <Firework
+              color="rgba(164, 164, 164, 0.4)"
+              initialPosition={ANIMATION_INITIAL_POSITION}
+              fireworkRadius={Dimensions.get('screen').width * 0.33}
+              numberOfParticles={40}
+              autoHide={false}
+            />
+          </Canvas>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={styles.column}
+          onPress={() => navigateToExample('Firework')}
+        >
+          <Canvas style={styles.column}>
+            <Firework
+              color="rgba(164, 164, 164, 0.4)"
+              initialPosition={ANIMATION_INITIAL_POSITION}
+              fireworkRadius={Dimensions.get('screen').width * 0.33}
+              numberOfParticles={40}
+              autoHide={false}
+            />
+          </Canvas>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#121212',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'center',
+    height: 130,
+  },
+  column: {
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'center',
+    width: COLUMN_SIZE,
+    height: COLUMN_SIZE,
+  },
+  digitalClock: {
+    height: 200,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

expo-example/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig",
+  "compilerOptions": {
+    // Avoid expo-cli auto-generating a tsconfig
+  }
+}

expo-example/webpack.config.js

@@ -0,0 +1,25 @@
+const path = require('path');
+const createExpoWebpackConfigAsync = require('@expo/webpack-config');
+const { resolver } = require('./metro.config');
+
+const root = path.resolve(__dirname, '..');
+const node_modules = path.join(__dirname, 'node_modules');
+
+module.exports = async function (env, argv) {
+  const config = await createExpoWebpackConfigAsync(env, argv);
+
+  config.module.rules.push({
+    test: /\.(js|jsx|ts|tsx)$/,
+    include: path.resolve(root, 'src'),
+    use: 'babel-loader',
+  });
+
+  // We need to make sure that only one version is loaded for peerDependencies
+  // So we alias them to the versions in example's node_modules
+  Object.assign(config.resolve.alias, {
+    ...resolver.extraNodeModules,
+    'react-native-web': path.join(node_modules, 'react-native-web'),
+  });
+
+  return config;
+};