V2 - WIP

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2.1
 executors:
   default:
     docker:
-      - image: circleci/node:10
+      - image: cimg/node:19.3.0
     working_directory: ~/project
 
 commands:

README.md

@@ -86,13 +86,13 @@ const ItsYourBirthday = () => {
 
 ## Props
 
-| Prop          | Required | Description                                                 | Default     |
-| ------------- | -------- | ----------------------------------------------------------- | ----------- |
-| `pickers`     | ✅       | Array of objects containing individal picker config         | `undefined` |
-| `values`      | ✅       | Array of objects initial values for each picker in `digits` | `undefined` |
-| `onChange`    | ✅       | Callback for when an item is selected.                      | `undefined` |
-| `pickerStyle` | Optional | Picker wrapper style object.                                | `{}`        |
-| `itemStyle`   | Optional | Picker item style object.                                   | `{}`        |
+| Prop          | Required | Description                                                  | Default     |
+| ------------- | -------- | ------------------------------------------------------------ | ----------- |
+| `pickers`     | ✅       | Array of objects containing individal picker config          | `undefined` |
+| `values`      | ✅       | Array of objects initial values for each picker in `IValues` | `undefined` |
+| `onChange`    | ✅       | Callback for when an item is selected.                       | `undefined` |
+| `pickerStyle` | Optional | Picker wrapper style object.                                 | `{}`        |
+| `itemStyle`   | Optional | Picker item style object.                                    | `{}`        |
 
 ## License
 

example/.babel.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  presets: ['expo'],
+  plugins: [
+    [
+      'module-resolver',
+      {
+        alias: {
+          'react-native-number-please': '../src',
+        },
+      },
+    ],
+  ],
+};

example/.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  env: {
+    es2021: true,
+    node: true,
+  },
+  extends: ['plugin:react/recommended', 'xo'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['react'],
+  rules: {},
+};

example/.gitignore

@@ -0,0 +1,14 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

example/App.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+
+import { StyleSheet, View, Text } from 'react-native';
+import NumberPlease from 'react-native-number-please';
+
+export default function App() {
+  const pizzaAmount = [{ id: 'pizza', label: '🍕', min: 0, max: 99 }];
+  const initialValues = { id: 'pizza', pizza: 3 };
+  const [pizzas, setPizzas] = React.useState(initialValues);
+
+  const initialBirthday = { day: 16, year: 1970, month: 4 };
+  const [birthday, setBirtday] = React.useState(initialBirthday);
+
+  const { day, month, year } = birthday;
+
+  const datePickers = [
+    { id: 'dayy', label: '', min: 0, max: 31 },
+    { id: 'month', label: '', min: 0, max: 12 },
+    { id: 'year', label: '', min: 1900, max: new Date().getFullYear() },
+  ];
+
+  console.log(birthday);
+
+  const calculateAge = () => {
+    const ageDifMs = Date.now() - new Date(year, month, day).getTime();
+    const ageDate = new Date(ageDifMs);
+    return Math.abs(ageDate.getUTCFullYear() - 1970);
+  };
+
+  return (
+    <View style={styles.container}>
+      <View>
+        <Text style={styles.heading}>When is your birthday?</Text>
+        <NumberPlease
+          pickers={datePickers}
+          values={birthday}
+          onChange={(values) => setBirtday(values)}
+        />
+        <View style={styles.boxed}>
+          <Text>You're {calculateAge()} years old</Text>
+        </View>
+      </View>
+      <View>
+        <Text>I would like</Text>
+        <NumberPlease
+          pickers={pizzaAmount}
+          values={pizzas}
+          onChange={(values) => setPizzas(values)}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  heading: {
+    fontWeight: 'bold',
+    fontSize: 21,
+  },
+  boxed: {
+    borderWidth: 1,
+    width: '100%',
+    padding: 16,
+    borderRadius: 8,
+    alignContent: 'center',
+    justifyContent: 'center',
+  },
+  box: {
+    width: 60,
+    height: 60,
+    marginVertical: 20,
+  },
+});

example/app.json

@@ -1,22 +1,31 @@
 {
-  "name": "react-native-number-please-example",
-  "displayName": "NumberPlease Example",
   "expo": {
-    "name": "react-native-number-please-example",
-    "slug": "react-native-number-please-example",
-    "description": "Example app for react-native-number-please",
-    "privacy": "public",
+    "name": "example",
+    "slug": "example",
     "version": "1.0.0",
-    "platforms": [
-      "ios",
-      "android",
-      "web"
-    ],
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ]
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
   }
 }

example/babel.config.js

@@ -1,22 +1,6 @@
-const path = require('path');
-const pak = require('../package.json');
-
-module.exports = function (api) {
+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),
-          },
-        },
-      ],
-    ],
   };
 };

example/metro.config.js

@@ -1,40 +1,50 @@
 const path = require('path');
-const blacklist = require('metro-config/src/defaults/blacklist');
-const escape = require('escape-string-regexp');
-const pak = require('../package.json');
+const { getDefaultConfig } = require('@expo/metro-config');
+const fs = require('fs');
+const exclusionList = require('metro-config/src/defaults/exclusionList');
+
+function escape(string) {
+  if (typeof string !== 'string') {
+    throw new TypeError('Expected a string');
+  }
+
+  // Escape characters with special meaning either inside or outside character sets.
+  // Use a simple backslash escape when it’s always valid, and a `\xnn` escape when the simpler form would be disallowed by Unicode patterns’ stricter grammar.
+  return string.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d');
+}
 
 const root = path.resolve(__dirname, '..');
+const pak = JSON.parse(
+  fs.readFileSync(path.join(root, 'package.json'), 'utf8')
+);
 
-const modules = Object.keys({
-  ...pak.peerDependencies,
-});
+const defaultConfig = getDefaultConfig(__dirname);
+
+const modules = [
+  '@babel/runtime',
+  'react-native-number-please',
+  ...Object.keys({
+    ...pak.dependencies,
+    ...pak.peerDependencies,
+  }),
+];
 
 module.exports = {
+  ...defaultConfig,
+
   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: blacklist(
-      modules.map(
-        (m) =>
-          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
-      )
-    ),
+    ...defaultConfig.resolver,
+
+    blacklistRE: exclusionList([
+      new RegExp(`^${escape(path.join(root, '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,
-      },
-    }),
-  },
 };

example/package.json

@@ -1,30 +1,31 @@
 {
-  "name": "react-native-number-please-example",
-  "description": "Example app for react-native-number-please",
-  "version": "0.0.1",
-  "private": true,
-  "main": "index",
+  "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",
-    "start": "expo start",
-    "test": "jest"
+    "web": "expo start --web"
   },
   "dependencies": {
-    "expo": "^42.0.0",
-    "expo-splash-screen": "~0.11.2",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-native": "0.63.4",
-    "react-native-unimodules": "~0.14.5",
-    "react-native-web": "~0.13.12"
+    "@react-native-picker/picker": "2.4.8",
+    "expo": "~47.0.5",
+    "expo-status-bar": "~1.4.2",
+    "react": "18.1.0",
+    "react-native": "0.70.5"
   },
   "devDependencies": {
-    "@babel/core": "~7.9.0",
-    "@babel/runtime": "^7.9.6",
-    "babel-plugin-module-resolver": "^4.0.0",
-    "babel-preset-expo": "8.3.0",
-    "expo-cli": "^4.0.13"
-  }
+    "@babel/runtime": "^7.20.1",
+    "@types/metro-config": "^0.66.0",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "@typescript-eslint/parser": "^5.43.0",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-preset-expo": "^9.2.2",
+    "escape-string-regexp": "^5.0.0",
+    "eslint": "^8.27.0",
+    "eslint-config-xo": "^0.43.1",
+    "eslint-plugin-react": "^7.31.10"
+  },
+  "private": true
 }