Replace defaultProps

README.md

@@ -132,8 +132,8 @@ export default function App() {
 - `renderFlagButton?`(props: (FlagButton['props'])): ReactNode ([FlagButton props](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/FlagButton.tsx#L73))
 - `renderCountryFilter?`(props: CountryFilter['props']): ReactNode ([CountryFilter props is TextInputProps](https://facebook.github.io/react-native/docs/textinput#props))
 - `onSelect`(country: Country): void ([Country](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/types.ts#L263))
-- `onOpen`(): void
-- `onClose`(): void
+- `onOpen`: () => void
+- `onClose`: () => void
 - `closeButtonImage?`: [ImageSourcePropType](https://facebook.github.io/react-native/docs/image#props)
 - `closeButtonStyle?`: StyleProp<ViewStyle>
 - `closeButtonImageStyle?`: StyleProp<ImageStyle>

src/AnimatedModal.tsx

@@ -11,7 +11,7 @@ interface Props {
   children: React.ReactNode
 }
 
-export const AnimatedModal = ({ children, visible }: Props) => {
+export const AnimatedModal = ({ children, visible = false }: Props) => {
   const translateY = new Animated.Value(height)
 
   const showModal = Animated.timing(translateY, {
@@ -47,6 +47,3 @@ export const AnimatedModal = ({ children, visible }: Props) => {
   )
 }
 
-AnimatedModal.defaultProps = {
-  visible: false,
-}

src/CloseButton.tsx

@@ -31,7 +31,7 @@ interface CloseButtonProps {
   style?: StyleProp<ViewStyle>
   imageStyle?: StyleProp<ImageStyle>
   image?: ImageSourcePropType
-  onPress?(): void
+  onPress?: () => void
 }
 
 const CloseButtonAndroid: React.FC<CloseButtonProps> = (props) => {

src/CountryFilter.tsx

@@ -18,13 +18,24 @@ const styles = StyleSheet.create({
 
 export type CountryFilterProps = TextInputProps
 
-export const CountryFilter = (props: CountryFilterProps) => {
+export const CountryFilter = ({
+  autoFocus = false,
+  placeholder = 'Enter country name',
+  ...rest
+}: CountryFilterProps) => {
   const {
     filterPlaceholderTextColor,
     fontFamily,
     fontSize,
     onBackgroundTextColor,
   } = useTheme()
+
+  const props = {
+    autoFocus,
+    placeholder,
+    ...rest,
+  }
+
   return (
     <TextInput
       testID='text-input-country-filter'
@@ -34,12 +45,10 @@ export const CountryFilter = (props: CountryFilterProps) => {
         styles.input,
         { fontFamily, fontSize, color: onBackgroundTextColor },
       ]}
+      placeholder={placeholder}
+      autoFocus={autoFocus}
       {...props}
     />
   )
 }
 
-CountryFilter.defaultProps = {
-  autoFocus: false,
-  placeholder: 'Enter country name',
-}

src/CountryList.tsx

@@ -94,9 +94,9 @@ const CountryItem = (props: CountryItemProps) => {
   const {
     country,
     onSelect,
-    withFlag,
+    withFlag = true,
     withEmoji,
-    withCallingCode,
+    withCallingCode = false,
     withCurrency,
   } = props
   const extraContent: string[] = []
@@ -136,10 +136,6 @@ const CountryItem = (props: CountryItemProps) => {
     </TouchableOpacity>
   )
 }
-CountryItem.defaultProps = {
-  withFlag: true,
-  withCallingCode: false,
-}
 const MemoCountryItem = memo<CountryItemProps>(CountryItem)
 
 const renderItem =
@@ -256,7 +252,3 @@ export const CountryList = (props: CountryListProps) => {
     </View>
   )
 }
-
-CountryList.defaultProps = {
-  filterFocus: undefined,
-}

src/CountryModal.tsx

@@ -13,14 +13,17 @@ const styles = StyleSheet.create({
 
 export const CountryModal = ({
   children,
-  withModal,
-  disableNativeModal,
-  ...props
+  withModal = true,
+  disableNativeModal = false,
+  animated = true,
+  animationType = 'slide',
+  ...rest
 }: ModalProps & {
   children: React.ReactNode
   withModal?: boolean
   disableNativeModal?: boolean
 }) => {
+  const props = { animationType, animated, ...rest }
   const { backgroundColor } = useTheme()
   const { teleport } = React.useContext(CountryModalContext)
   const content = (
@@ -45,9 +48,3 @@ export const CountryModal = ({
   return content
 }
 
-CountryModal.defaultProps = {
-  animationType: 'slide',
-  animated: true,
-  withModal: true,
-  disableNativeModal: false,
-}

src/CountryPicker.tsx

@@ -83,13 +83,13 @@ interface CountryPickerProps {
     props: React.ComponentProps<typeof CountryFilter>,
   ): ReactNode
   onSelect(country: Country): void
-  onOpen?(): void
-  onClose?(): void
+  onOpen?: () => void
+  onClose?: () => void
 }
 
 export const CountryPicker = (props: CountryPickerProps) => {
   const {
-    allowFontScaling,
+    allowFontScaling = true,
     countryCode,
     region,
     subregion,
@@ -107,11 +107,11 @@ export const CountryPicker = (props: CountryPickerProps) => {
     withCallingCodeButton,
     withCurrencyButton,
     containerButtonStyle,
-    withAlphaFilter,
-    withCallingCode,
+    withAlphaFilter= false,
+    withCallingCode= false,
     withCurrency,
     withFlag,
-    withModal,
+    withModal= true,
     disableNativeModal,
     withFlagButton,
     onClose: handleClose,
@@ -120,7 +120,7 @@ export const CountryPicker = (props: CountryPickerProps) => {
     closeButtonStyle,
     closeButtonImageStyle,
     excludeCountries,
-    placeholder,
+    placeholder = 'Select Country',
     preferredCountries,
   } = props
   const [state, setState] = useState<State>({
@@ -244,10 +244,3 @@ export const CountryPicker = (props: CountryPickerProps) => {
   )
 }
 
-CountryPicker.defaultProps = {
-  withModal: true,
-  withAlphaFilter: false,
-  withCallingCode: false,
-  placeholder: 'Select Country',
-  allowFontScaling: true,
-}

src/Flag.tsx

@@ -79,8 +79,8 @@ const EmojiFlag = memo(({ countryCode, flagSize }: FlagType) => {
 
 export const Flag = ({
   countryCode,
-  withEmoji,
-  withFlagButton,
+  withEmoji = true,
+  withFlagButton = true,
   flagSize,
 }: FlagType) =>
   withFlagButton ? (
@@ -93,7 +93,3 @@ export const Flag = ({
     </View>
   ) : null
 
-Flag.defaultProps = {
-  withEmoji: true,
-  withFlagButton: true,
-}

src/FlagButton.tsx

@@ -119,16 +119,16 @@ export interface FlagButtonProps {
   containerButtonStyle?: StyleProp<ViewStyle>
   countryCode?: CountryCode
   placeholder: string
-  onOpen?(): void
+  onOpen?: () => void
 }
 
 export const FlagButton = ({
   allowFontScaling,
-  withEmoji,
-  withCountryNameButton,
-  withCallingCodeButton,
-  withCurrencyButton,
-  withFlagButton,
+  withEmoji = true,
+  withCountryNameButton = false,
+  withCallingCodeButton = false,
+  withCurrencyButton = false,
+  withFlagButton = true,
   countryCode,
   containerButtonStyle,
   onOpen,
@@ -162,10 +162,3 @@ export const FlagButton = ({
   )
 }
 
-FlagButton.defaultProps = {
-  withEmoji: true,
-  withCountryNameButton: false,
-  withCallingCodeButton: false,
-  withCurrencyButton: false,
-  withFlagButton: true,
-}

src/HeaderModal.tsx

@@ -22,13 +22,13 @@ interface HeaderModalProps {
   closeButtonImage?: ImageSourcePropType
   closeButtonStyle?: StyleProp<ViewStyle>
   closeButtonImageStyle?: StyleProp<ImageStyle>
-  onClose(): void
+  onClose: () => void
   renderFilter(props: HeaderModalProps): ReactNode
 }
 export const HeaderModal = (props: HeaderModalProps) => {
   const {
     withFilter,
-    withCloseButton,
+    withCloseButton = true,
     closeButtonImage,
     closeButtonStyle,
     closeButtonImageStyle,
@@ -49,7 +49,3 @@ export const HeaderModal = (props: HeaderModalProps) => {
     </View>
   )
 }
-
-HeaderModal.defaultProps = {
-  withCloseButton: true,
-}

src/index.tsx

@@ -44,12 +44,19 @@ interface Props {
   containerButtonStyle?: StyleProp<ViewStyle>
   renderFlagButton?(props: FlagButtonProps): ReactNode
   renderCountryFilter?(props: CountryFilterProps): ReactNode
-  onSelect(country: Country): void
-  onOpen?(): void
-  onClose?(): void
+  onSelect?: (country: Country) => void
+  onOpen?: () => void
+  onClose?: () => void
 }
 
-const Main = ({ theme, translation, ...props }: Props) => {
+const Main = ({ theme, translation, ...rest }: Props) => {
+
+  const props = {
+    onSelect: () => {},
+    withEmoji: true,
+    ...rest,
+  };
+
   return (
     <ThemeProvider theme={{ ...DEFAULT_THEME, ...theme }}>
       <CountryProvider value={{ ...DEFAULT_COUNTRY_CONTEXT, translation }}>
@@ -59,11 +66,6 @@ const Main = ({ theme, translation, ...props }: Props) => {
   )
 }
 
-Main.defaultProps = {
-  onSelect: () => {},
-  withEmoji: true,
-}
-
 export default Main
 export {
   getCountriesAsync as getAllCountries,