@baby-journey/rn-segmented-progress-bar 0.1.0 → 0.1.1

package/example/app.json

@@ -0,0 +1,33 @@
+{
+  "expo": {
+    "name": "example",
+    "slug": "example",
+    "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"
+    }
+  }
+}

package/example/babel.config.js

@@ -0,0 +1,22 @@
+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),
+          },
+        },
+      ],
+    ],
+  };
+};

package/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;
+    }, {}),
+  },
+};

package/example/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "example",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "expo": "~47.0.12",
+    "expo-status-bar": "~1.4.2",
+    "react": "18.1.0",
+    "react-native": "0.70.5",
+    "react-dom": "18.1.0",
+    "react-native-web": "~0.18.9"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "@expo/webpack-config": "^0.17.2",
+    "babel-loader": "^8.1.0"
+  },
+  "private": true
+}

package/example/src/App.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+import { StyleSheet, View } from 'react-native';
+import RNSegmentedProgressBar, {
+  RunAnimationHandler,
+} from '@baby-journey/rn-segmented-progress-bar';
+
+export default function App() {
+  const circularProgressRef = React.useRef<RunAnimationHandler>(null);
+
+  React.useEffect(() => {
+    circularProgressRef?.current?.run({
+      progress: 75,
+    });
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <RNSegmentedProgressBar
+        ref={circularProgressRef}
+        radius={114}
+        strokeWidth={14}
+        segmentsGap={30}
+        segments={4}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  box: {
+    width: 60,
+    height: 60,
+    marginVertical: 20,
+  },
+});

package/example/tsconfig.json

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

package/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;
+};