chore: modernized packages

Author: mrflip

__tests__/CountryPicker.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 
-import { create } from 'react-test-renderer'
+import TestRenderer from 'react-test-renderer';
 
 import CountryPicker from '../src/'
 
 it('CountryPicker can be created', () => {
-  const picker = create(
+  const picker = TestRenderer.create(
     <CountryPicker countryCode={'US'} onSelect={() => {}} />,
   )
   expect(picker).toBeDefined()

package.json

@@ -45,41 +45,45 @@
   },
   "homepage": "http://xcarpentier.github.io/react-native-country-picker-modal",
   "dependencies": {
-    "@callstack/react-theme-provider": "3.0.3",
-    "fuse.js": "3.4.5",
-    "node-emoji": "1.10.0",
-    "prop-types": "15.7.2",
-    "react-async-hook": "3.6.1"
+    "@callstack/react-theme-provider": "^3.0.8",
+    "fuse.js": "^6.6.2",
+    "node-emoji": "^1.11.0",
+    "prop-types": "^15.8.1",
+    "react-async-hook": "^4.0.0"
   },
   "devDependencies": {
-    "@types/jest": "24.0.17",
-    "@types/node-emoji": "1.8.1",
-    "@types/prop-types": "15.7.3",
-    "@types/react": "16.9.4",
-    "@types/react-native": "0.60.17",
-    "@types/react-test-renderer": "16.9.1",
-    "babel-cli": "6.14.0",
-    "babel-eslint": "6.1.2",
-    "babel-jest": "24.9.0",
-    "babel-preset-expo": "^7.0.0",
-    "expo": "^35.0.0",
-    "gh-pages": "2.1.1",
+    "@babel/core": "^7.19.1",
+    "@types/jest": "^29.0.3",
+    "@types/node-emoji": "^1.8.2",
+    "@types/prop-types": "^15.7.5",
+    "@types/react": "^17.0.39",
+    "@types/react-native": "^0.70.3",
+    "@types/react-test-renderer": "^18.0.0",
+    "babel-cli": "^6.26.0",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^29.0.3",
+    "babel-preset-expo": "^9.2.0",
+    "expo": "^46.0.10",
+    "gh-pages": "^4.0.0",
     "husky": "^3.0.0",
-    "jest-expo": "^35.0.0",
-    "json": "^9.0.6",
-    "prettier": "1.18.0",
-    "react": "16.8.3",
-    "react-dom": "16.8.3",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
-    "react-native-web": "^0.13.18",
-    "react-test-renderer": "16.8.3",
-    "tslint": "5.12.0",
-    "tslint-config-prettier": "1.17.0",
-    "typescript": "3.4.5",
-    "world-countries": "2.1.0"
+    "jest": "^29.0.3",
+    "jest-environment-jsdom": "^29.0.3",
+    "jest-expo": "^46.0.1",
+    "json": "^11.0.0",
+    "prettier": "^2.7.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-native": "^0.69.5",
+    "react-native-web": "^0.18.9",
+    "react-test-renderer": "^18.0.0",
+    "tslint": "^6.1.3",
+    "tslint-config-prettier": "^1.18.0",
+    "typescript": "^4.8.3",
+    "world-countries": "^4.0.0"
   },
   "jest": {
     "preset": "react-native",
+    "testEnvironment": "jsdom",
     "moduleFileExtensions": [
       "js",
       "jsx",
@@ -104,6 +108,8 @@
     }
   },
   "resolutions": {
+    "@types/react": "17.0.14",
+    "@types/react-dom": "17.0.14",
     "mem": "^4.0.0"
   }
 }

src/CloseButton.tsx

@@ -101,4 +101,4 @@ export default Platform.select({
   ios: CloseButtonIOS,
   android: CloseButtonAndroid,
   web: CloseButtonIOS
-})
+}) as (props: CloseButtonProps) => JSX.Element

src/CountryList.tsx

@@ -215,10 +215,12 @@ export const CountryList = (props: CountryListProps) => {
   }, [filterFocus])
 
   const initialNumToRender = Math.round(height / (itemHeight || 1))
+
+  const searchResult = search(filter, data) as Country[]
+
   return (
     <View style={[styles.container, { backgroundColor }]}>
       <FlatList
-        onScrollToIndexFailed
         ref={flatListRef}
         testID='list-countries'
         keyboardShouldPersistTaps='handled'
@@ -237,13 +239,13 @@ export const CountryList = (props: CountryListProps) => {
           onSelect,
         })}
         {...{
-          data: search(filter, data),
+          data: searchResult,
           keyExtractor,
           onScrollToIndexFailed,
           ItemSeparatorComponent,
           initialNumToRender,
         }}
-        {...flatListProps}
+      {...flatListProps}
       />
       {withAlphaFilter && (
         <ScrollView

src/CountryPicker.tsx

@@ -8,10 +8,10 @@ import {
   ImageStyle,
 } from 'react-native'
 import { CountryModal } from './CountryModal'
-import { HeaderModal } from './HeaderModal'
+import { HeaderModal, HeaderModalProps } from './HeaderModal'
 import { Country, CountryCode, FlagType, Region, Subregion } from './types'
 import { CountryFilter, CountryFilterProps } from './CountryFilter'
-import { FlagButton } from './FlagButton'
+import { FlagButton, FlagButtonProps } from './FlagButton'
 import { useContext } from './CountryContext'
 import { CountryList } from './CountryList'
 
@@ -22,17 +22,21 @@ interface State {
   filterFocus?: boolean
 }
 
+interface RenderFlagButtonProps extends FlagButtonProps { renderFlagButton?(props: FlagButtonProps): ReactNode }
+
 const renderFlagButton = (
-  props: FlagButton['props'] & CountryPickerProps['renderFlagButton'],
+  props: RenderFlagButtonProps,
 ): ReactNode =>
   props.renderFlagButton ? (
     props.renderFlagButton(props)
   ) : (
     <FlagButton {...props} />
   )
 
+interface RenderFilterProps extends CountryFilterProps { renderCountryFilter?(props: CountryFilterProps): ReactNode }
+
 const renderFilter = (
-  props: CountryFilter['props'] & CountryPickerProps['renderCountryFilter'],
+  props: RenderFilterProps
 ): ReactNode =>
   props.renderCountryFilter ? (
     props.renderCountryFilter(props)
@@ -70,8 +74,8 @@ interface CountryPickerProps {
   closeButtonImage?: ImageSourcePropType
   closeButtonStyle?: StyleProp<ViewStyle>
   closeButtonImageStyle?: StyleProp<ImageStyle>
-  renderFlagButton?(props: FlagButton['props']): ReactNode
-  renderCountryFilter?(props: CountryFilter['props']): ReactNode
+  renderFlagButton?(props: FlagButtonProps): ReactNode
+  renderCountryFilter?(props: CountryFilterProps): ReactNode
   onSelect(country: Country): void
   onOpen?(): void
   onClose?(): void
@@ -161,7 +165,7 @@ export const CountryPicker = (props: CountryPickerProps) => {
     renderFlagButton: renderButton,
     onOpen,
     containerButtonStyle,
-    placeholder,
+    placeholder: placeholder || 'Select Country',
   }
 
   useEffect(() => {
@@ -199,7 +203,7 @@ export const CountryPicker = (props: CountryPickerProps) => {
             closeButtonStyle,
             withCloseButton,
           }}
-          renderFilter={(props: CountryFilter['props']) =>
+          renderFilter={(props: HeaderModalProps) =>
             renderFilter({
               ...props,
               allowFontScaling,

src/CountryService.ts

@@ -35,19 +35,19 @@ export const loadDataAsync = ((data: DataCountry) => (
             .then((response: Response) => response.json())
             .then((remoteData: any) => {
               data.imageCountries = remoteData
-              resolve(data.imageCountries)
+              resolve(data.imageCountries!)
             })
             .catch(reject)
         } else {
-          resolve(data.imageCountries)
+          resolve(data.imageCountries!)
         }
         break
       default:
         if (!data.emojiCountries) {
           data.emojiCountries = require('./assets/data/countries-emoji.json')
-          resolve(data.emojiCountries)
+          resolve(data.emojiCountries!)
         } else {
-          resolve(data.emojiCountries)
+          resolve(data.emojiCountries!)
         }
         break
     }
@@ -140,26 +140,28 @@ export const getCountriesAsync = async (
 
     const countries = newCountryCodeList.filter(isCountryPresent(countriesRaw))
     .map((cca2: CountryCode) => ({
+      // @ts-ignore
       cca2,
       ...{
         ...countriesRaw[cca2],
         name:
-          (countriesRaw[cca2].name as TranslationLanguageCodeMap)[
-            translation
-          ] ||
-          (countriesRaw[cca2].name as TranslationLanguageCodeMap)['common'],
+            (countriesRaw[cca2].name as TranslationLanguageCodeMap)[
+              translation
+            ] ||
+              (countriesRaw[cca2].name as TranslationLanguageCodeMap)['common'],
       },
     }))
     .filter(isRegion(region))
     .filter(isSubregion(subregion))
     .filter(isIncluded(countryCodes))
     .filter(isExcluded(excludeCountries))
-    
+
     return countries
 
   } else {
     const countries = CountryCodeList.filter(isCountryPresent(countriesRaw))
       .map((cca2: CountryCode) => ({
+        // @ts-ignore
         cca2,
         ...{
           ...countriesRaw[cca2],
@@ -195,7 +197,7 @@ let fuse: Fuse<Country>
 export const search = (
   filter: string = '',
   data: Country[] = [],
-  options: Fuse.FuseOptions<any> = DEFAULT_FUSE_OPTION,
+  options: Fuse.IFuseOptions<any> = DEFAULT_FUSE_OPTION,
 ) => {
   if (data.length === 0) {
     return []

src/HeaderModal.tsx

@@ -16,7 +16,7 @@ const styles = StyleSheet.create({
   }
 })
 
-interface HeaderModalProps {
+export interface HeaderModalProps {
   withFilter?: boolean
   withCloseButton?: boolean
   closeButtonImage?: ImageSourcePropType

tsconfig.json

@@ -29,7 +29,8 @@
     "noFallthroughCasesInSwitch": true,
     "strictPropertyInitialization": false,
     "lib": ["dom", "esnext"],
-    "typeRoots": ["./node_modules/@types", "./@types"]
+    "typeRoots": ["./node_modules/@types", "./@types"],
+    "types": []
   },
   "exclude": ["node_modules"]
 }