From 8889838d38c7f3cf9e9f29b50319a61d52c3228c Mon Sep 17 00:00:00 2001 From: Ivanka Todorova Date: Tue, 1 Mar 2022 18:08:17 +0200 Subject: [PATCH] fix: metro to load library code inside example/ app --- example/App.js | 242 +++++++++++++++++++++++++--------------- example/metro.config.js | 34 +++++- src/index.tsx | 1 + 3 files changed, 183 insertions(+), 94 deletions(-) diff --git a/example/App.js b/example/App.js index f85f38d..d3fa620 100644 --- a/example/App.js +++ b/example/App.js @@ -1,112 +1,178 @@ -/** - * Sample React Native App - * https://github.com/facebook/react-native - * - * @format - * @flow strict-local - */ +import * as React from 'react'; +import {useState} from 'react'; -import React from 'react'; -import type {Node} from 'react'; import { + KeyboardAvoidingView, + Keyboard, SafeAreaView, - ScrollView, - StatusBar, StyleSheet, Text, - useColorScheme, View, + Pressable, + StatusBar, } from 'react-native'; +import IntlPhoneField from 'react-native-intl-phone-field'; -import { - Colors, - DebugInstructions, - Header, - LearnMoreLinks, - ReloadInstructions, -} from 'react-native/Libraries/NewAppScreen'; - -const Section = ({children, title}): Node => { - const isDarkMode = useColorScheme() === 'dark'; - return ( - - - {title} - - - {children} - - - ); +const DEFAULT_STATE = { + isValid: null, + countryCode: null, }; -const App: () => Node = () => { - const isDarkMode = useColorScheme() === 'dark'; +export default function App() { + const [minimal, setMinimal] = useState(DEFAULT_STATE); + const [defaultCountry, setDefaultCountry] = useState(DEFAULT_STATE); + const [filled, setFilled] = useState(DEFAULT_STATE); + + const onChangeMinimal = (_, isValid, countryCode, value, formatted, flag) => { + console.log( + 'onChangeMinimal', + isValid, + countryCode, + value, + formatted, + flag, + ); - const backgroundStyle = { - backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, + setMinimal({isValid, countryCode}); }; + const onChangeDefaultCountry = ( + _, + isValid, + countryCode, + value, + formatted, + flag, + ) => { + console.log( + 'onChangeDefaultCountry', + isValid, + countryCode, + value, + formatted, + flag, + ); + setDefaultCountry({isValid, countryCode}); + }; + const onChangeFilled = (_, isValid, countryCode, value, formatted, flag) => { + console.log('onChangeFilled', isValid, countryCode, value, formatted, flag); + setFilled({isValid, countryCode}); + }; + + console.log('test'); + return ( - - - -
- -
- Edit App.js to change this - screen and then come back to see your edits. -
-
- -
-
- -
-
- Read the docs to discover what to do next: -
- - - + + + Keyboard.dismiss()} style={{flex: 1}}> + + + + Minimal + + + + Valid? + + {minimal.isValid ? 'Valid' : 'Invalid'} + + + + Country Code + + {minimal.countryCode ? minimal.countryCode : 'Undefined'} + + + + + {/**/} + {/* Default Country + Prefix*/} + {/* */} + {/* */} + {/* */} + {/* Valid?*/} + {/* */} + {/* {defaultCountry.isValid ? 'Valid' : 'Invalid'}*/} + {/* */} + {/* */} + {/* */} + {/* Country Code*/} + {/* */} + {/* {defaultCountry.countryCode*/} + {/* ? defaultCountry.countryCode*/} + {/* : 'Undefined'}*/} + {/* */} + {/* */} + {/* */} + {/**/} + {/**/} + {/* Filled + Styles*/} + {/* */} + {/* */} + {/* */} + {/* Valid?*/} + {/* */} + {/* {filled.isValid ? 'Valid' : 'Invalid'}*/} + {/* */} + {/* */} + {/* */} + {/* Country Code*/} + {/* */} + {/* {filled.countryCode ? filled.countryCode : 'Undefined'}*/} + {/* */} + {/* */} + {/* */} + {/**/} + + + ); -}; +} const styles = StyleSheet.create({ - sectionContainer: { - marginTop: 32, - paddingHorizontal: 24, + container: { + padding: 20, + justifyContent: 'center', + backgroundColor: '#fff', }, - sectionTitle: { - fontSize: 24, - fontWeight: '600', + example: { + marginBottom: 20, + paddingBottom: 20, + borderBottomColor: 'lightgrey', + borderBottomWidth: 1, }, - sectionDescription: { - marginTop: 8, + exampleTitle: { fontSize: 18, - fontWeight: '400', + marginBottom: 15, + fontWeight: 'bold', + }, + valid: { + borderBottomColor: 'green', }, - highlight: { - fontWeight: '700', + invalid: { + borderBottomColor: 'red', + }, + output: { + marginTop: 20, + }, + outputRow: { + flexDirection: 'row', + justifyContent: 'space-between', + }, + outputLabel: {}, + outputText: { + fontWeight: 'bold', }, }); - -export default App; diff --git a/example/metro.config.js b/example/metro.config.js index e91aba9..1fc31b9 100644 --- a/example/metro.config.js +++ b/example/metro.config.js @@ -1,11 +1,33 @@ -/** - * Metro configuration for React Native - * https://github.com/facebook/react-native - * - * @format - */ +const path = require('path'); +const blacklist = require('metro-config/src/defaults/blacklist'); +const escape = require('escape-string-regexp'); +const pak = require('../package.json'); + +const root = path.resolve(__dirname, '..'); + +const modules = Object.keys({ + ...pak.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: blacklist( + 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; + }, {}), + }, + transformer: { getTransformOptions: async () => ({ transform: { diff --git a/src/index.tsx b/src/index.tsx index 4f06baf..4fd928f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -35,6 +35,7 @@ export default function IntlPhoneField({ textInputStyle, textInputProps, }: IntlPhoneFieldProps) { + console.log('test'); const [flag, setFlag] = useState(defaultFlag ?? flagUndetermined); const [value, setValue] = useState(