remove deprecated defaultProps from function components

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, {
@@ -46,7 +46,3 @@ export const AnimatedModal = ({ children, visible }: Props) => {
     </Animated.View>
   )
 }
-
-AnimatedModal.defaultProps = {
-  visible: false,
-}

src/CountryFilter.tsx

@@ -18,7 +18,7 @@ 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,
@@ -34,12 +34,9 @@ export const CountryFilter = (props: CountryFilterProps) => {
         styles.input,
         { fontFamily, fontSize, color: onBackgroundTextColor },
       ]}
-      {...props}
+      autoFocus={autoFocus}
+      placeholder={placeholder}
+      {...rest}
     />
   )
 }
-
-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,7 @@ const CountryItem = (props: CountryItemProps) => {
     </TouchableOpacity>
   )
 }
-CountryItem.defaultProps = {
-  withFlag: true,
-  withCallingCode: false,
-}
+
 const MemoCountryItem = memo<CountryItemProps>(CountryItem)
 
 const renderItem =
@@ -181,7 +178,7 @@ export const CountryList = (props: CountryListProps) => {
     onSelect,
     filter,
     flatListProps,
-    filterFocus,
+    filterFocus = undefined,
   } = props
 
   const flatListRef = useRef<FlatList<Country>>(null)
@@ -256,7 +253,3 @@ export const CountryList = (props: CountryListProps) => {
     </View>
   )
 }
-
-CountryList.defaultProps = {
-  filterFocus: undefined,
-}

src/CountryModal.tsx

@@ -13,8 +13,10 @@ const styles = StyleSheet.create({
 
 export const CountryModal = ({
   children,
-  withModal,
-  disableNativeModal,
+  withModal = true,
+  disableNativeModal = false,
+  animationType = 'slide',
+  animated = true,
   ...props
 }: ModalProps & {
   children: React.ReactNode
@@ -44,10 +46,3 @@ export const CountryModal = ({
   }
   return content
 }
-
-CountryModal.defaultProps = {
-  animationType: 'slide',
-  animated: true,
-  withModal: true,
-  disableNativeModal: false,
-}

src/CountryPicker.tsx

@@ -89,7 +89,7 @@ interface CountryPickerProps {
 
 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>({
@@ -243,11 +243,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 ? (
@@ -92,8 +92,3 @@ export const Flag = ({
       )}
     </View>
   ) : null
-
-Flag.defaultProps = {
-  withEmoji: true,
-  withFlagButton: true,
-}

src/FlagButton.tsx

@@ -124,11 +124,11 @@ export interface FlagButtonProps {
 
 export const FlagButton = ({
   allowFontScaling,
-  withEmoji,
-  withCountryNameButton,
-  withCallingCodeButton,
-  withCurrencyButton,
-  withFlagButton,
+  withEmoji = true,
+  withCountryNameButton = false,
+  withCallingCodeButton = false,
+  withCurrencyButton = false,
+  withFlagButton = true,
   countryCode,
   containerButtonStyle,
   onOpen,
@@ -161,11 +161,3 @@ export const FlagButton = ({
     </TouchableOpacity>
   )
 }
-
-FlagButton.defaultProps = {
-  withEmoji: true,
-  withCountryNameButton: false,
-  withCallingCodeButton: false,
-  withCurrencyButton: false,
-  withFlagButton: true,
-}

src/HeaderModal.tsx

@@ -28,7 +28,7 @@ interface HeaderModalProps {
 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

@@ -49,7 +49,7 @@ interface Props {
   onClose?(): void
 }
 
-const Main = ({ theme, translation, ...props }: Props) => {
+const Main = ({ theme, translation, withEmoji = true, onSelect = () => {}, ...props }: Props) => {
   return (
     <ThemeProvider theme={{ ...DEFAULT_THEME, ...theme }}>
       <CountryProvider value={{ ...DEFAULT_COUNTRY_CONTEXT, translation }}>
@@ -59,11 +59,6 @@ const Main = ({ theme, translation, ...props }: Props) => {
   )
 }
 
-Main.defaultProps = {
-  onSelect: () => {},
-  withEmoji: true,
-}
-
 export default Main
 export {
   getCountriesAsync as getAllCountries,