change .defaultProps to props in function

App.tsx

@@ -7,10 +7,11 @@ import {
   Button,
   ScrollView,
 } from 'react-native'
-import CountryPicker, { CountryModalProvider } from './src/'
+import CountryPicker from './src/'
 import { CountryCode, Country } from './src/types'
 import { Row } from './src/Row'
 import { DARK_THEME } from './src/CountryTheme'
+import { CountryModalProvider } from './src/CountryModalProvider'
 
 const styles = StyleSheet.create({
   container: {

src/AnimatedModal.tsx

@@ -11,20 +11,24 @@ interface Props {
   children: React.ReactNode
 }
 
-export const AnimatedModal = ({ children, visible }: Props) => {
-  const translateY = new Animated.Value(height)
-
-  const showModal = Animated.timing(translateY, {
-    toValue: 0,
-    duration,
-    useNativeDriver,
-  }).start
-
-  const hideModal = Animated.timing(translateY, {
-    toValue: height,
-    duration,
-    useNativeDriver,
-  }).start
+export const AnimatedModal = ({ children, visible = false }: Props) => {
+  const translateY = React.useRef(new Animated.Value(height)).current
+
+  const showModal = () => {
+    Animated.timing(translateY, {
+      toValue: 0,
+      duration,
+      useNativeDriver,
+    }).start()
+  }
+
+  const hideModal = () => {
+    Animated.timing(translateY, {
+      toValue: height,
+      duration,
+      useNativeDriver,
+    }).start()
+  }
 
   React.useEffect(() => {
     if (visible) {
@@ -46,7 +50,3 @@ export const AnimatedModal = ({ children, visible }: Props) => {
     </Animated.View>
   )
 }
-
-AnimatedModal.defaultProps = {
-  visible: false,
-}

src/CountryFilter.tsx

@@ -16,9 +16,16 @@ const styles = StyleSheet.create({
   },
 })
 
-export type CountryFilterProps = TextInputProps
+export type CountryFilterProps = TextInputProps & {
+  autoFocus?: boolean
+  placeholder?: string
+}
 
-export const CountryFilter = (props: CountryFilterProps) => {
+export const CountryFilter = ({
+  autoFocus = false,
+  placeholder = 'Enter country name',
+  ...props
+}: CountryFilterProps) => {
   const {
     filterPlaceholderTextColor,
     fontFamily,
@@ -29,6 +36,8 @@ export const CountryFilter = (props: CountryFilterProps) => {
     <TextInput
       testID='text-input-country-filter'
       autoCorrect={false}
+      autoFocus={autoFocus}
+      placeholder={placeholder}
       placeholderTextColor={filterPlaceholderTextColor}
       style={[
         styles.input,
@@ -37,9 +46,4 @@ export const CountryFilter = (props: CountryFilterProps) => {
       {...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 =
@@ -170,20 +166,18 @@ const ItemSeparatorComponent = () => {
 
 const { height } = Dimensions.get('window')
 
-export const CountryList = (props: CountryListProps) => {
-  const {
-    data,
-    withAlphaFilter,
-    withEmoji,
-    withFlag,
-    withCallingCode,
-    withCurrency,
-    onSelect,
-    filter,
-    flatListProps,
-    filterFocus,
-  } = props
-
+export const CountryList = ({
+  data,
+  filterFocus,
+  withAlphaFilter,
+  withEmoji,
+  withFlag,
+  withCallingCode,
+  withCurrency,
+  onSelect,
+  filter,
+  flatListProps,
+}: CountryListProps) => {
   const flatListRef = useRef<FlatList<Country>>(null)
   const [letter, setLetter] = useState<string>('')
   const { itemHeight, backgroundColor } = useTheme()
@@ -256,7 +250,3 @@ export const CountryList = (props: CountryListProps) => {
     </View>
   )
 }
-
-CountryList.defaultProps = {
-  filterFocus: undefined,
-}

src/CountryModal.tsx

@@ -13,8 +13,9 @@ const styles = StyleSheet.create({
 
 export const CountryModal = ({
   children,
-  withModal,
-  disableNativeModal,
+  withModal = true,
+  disableNativeModal = false,
+  animationType = 'slide',
   ...props
 }: ModalProps & {
   children: React.ReactNode
@@ -35,19 +36,12 @@ export const CountryModal = ({
   }, [disableNativeModal])
   if (withModal) {
     if (Platform.OS === 'web') {
-      return <Modal {...props}>{content}</Modal>
+      return <Modal {...props} animationType={animationType}>{content}</Modal>
     }
     if (disableNativeModal) {
       return null
     }
-    return <Modal {...props}>{content}</Modal>
+    return <Modal {...props} animationType={animationType} >{content}</Modal>
   }
   return content
 }
-
-CountryModal.defaultProps = {
-  animationType: 'slide',
-  animated: true,
-  withModal: true,
-  disableNativeModal: false,
-}

src/CountryPicker.tsx

@@ -22,31 +22,19 @@ interface State {
   filterFocus?: boolean
 }
 
-interface RenderFlagButtonProps
-  extends React.ComponentProps<typeof FlagButton> {
+interface RenderFlagButtonProps extends React.ComponentProps<typeof FlagButton> {
   renderFlagButton?(props: React.ComponentProps<typeof FlagButton>): ReactNode
 }
 
-interface RenderCountryFilterProps
-  extends React.ComponentProps<typeof CountryFilter> {
-  renderCountryFilter?(
-    props: React.ComponentProps<typeof CountryFilter>,
-  ): ReactNode
+interface RenderCountryFilterProps extends React.ComponentProps<typeof CountryFilter> {
+  renderCountryFilter?(props: React.ComponentProps<typeof CountryFilter>): ReactNode
 }
 
 const renderFlagButton = (props: RenderFlagButtonProps): ReactNode =>
-  props.renderFlagButton ? (
-    props.renderFlagButton(props)
-  ) : (
-    <FlagButton {...props} />
-  )
+  props.renderFlagButton ? props.renderFlagButton(props) : <FlagButton {...props} />
 
 const renderFilter = (props: RenderCountryFilterProps): ReactNode =>
-  props.renderCountryFilter ? (
-    props.renderCountryFilter(props)
-  ) : (
-    <CountryFilter {...props} />
-  )
+  props.renderCountryFilter ? props.renderCountryFilter(props) : <CountryFilter {...props} />
 
 interface CountryPickerProps {
   allowFontScaling?: boolean
@@ -79,50 +67,48 @@ interface CountryPickerProps {
   closeButtonStyle?: StyleProp<ViewStyle>
   closeButtonImageStyle?: StyleProp<ImageStyle>
   renderFlagButton?(props: React.ComponentProps<typeof FlagButton>): ReactNode
-  renderCountryFilter?(
-    props: React.ComponentProps<typeof CountryFilter>,
-  ): ReactNode
+  renderCountryFilter?(props: React.ComponentProps<typeof CountryFilter>): ReactNode
   onSelect(country: Country): void
   onOpen?(): void
   onClose?(): void
 }
 
-export const CountryPicker = (props: CountryPickerProps) => {
-  const {
-    allowFontScaling,
-    countryCode,
-    region,
-    subregion,
-    countryCodes,
-    renderFlagButton: renderButton,
-    renderCountryFilter,
-    filterProps,
-    modalProps,
-    flatListProps,
-    onSelect,
-    withEmoji,
-    withFilter,
-    withCloseButton,
-    withCountryNameButton,
-    withCallingCodeButton,
-    withCurrencyButton,
-    containerButtonStyle,
-    withAlphaFilter,
-    withCallingCode,
-    withCurrency,
-    withFlag,
-    withModal,
-    disableNativeModal,
-    withFlagButton,
-    onClose: handleClose,
-    onOpen: handleOpen,
-    closeButtonImage,
-    closeButtonStyle,
-    closeButtonImageStyle,
-    excludeCountries,
-    placeholder,
-    preferredCountries,
-  } = props
+export const CountryPicker = ({
+  allowFontScaling = true,
+  countryCode,
+  region,
+  subregion,
+  countryCodes,
+  renderFlagButton: renderButton,
+  renderCountryFilter,
+  filterProps,
+  modalProps,
+  flatListProps,
+  onSelect,
+  withEmoji,
+  withFilter,
+  withCloseButton,
+  withCountryNameButton,
+  withCallingCodeButton,
+  withCurrencyButton,
+  containerButtonStyle,
+  withAlphaFilter = false,
+  withCallingCode = false,
+  withCurrency,
+  withFlag,
+  withModal = true,
+  disableNativeModal,
+  withFlagButton,
+  onClose: handleClose,
+  onOpen: handleOpen,
+  closeButtonImage,
+  closeButtonStyle,
+  closeButtonImageStyle,
+  excludeCountries,
+  placeholder = 'Select Country',
+  preferredCountries,
+  ...props
+}: CountryPickerProps) => {
   const [state, setState] = useState<State>({
     visible: props.visible || false,
     countries: [],
@@ -133,33 +119,34 @@ export const CountryPicker = (props: CountryPickerProps) => {
   const { visible, filter, countries, filterFocus } = state
 
   useEffect(() => {
-    if (state.visible !== props.visible) {
-      setState({ ...state, visible: props.visible || false })
+    if (state.visible !== visible) {
+      setState((prevState) => ({ ...prevState, visible: visible || false }))
     }
-  }, [props.visible])
+  }, [visible])
 
   const onOpen = () => {
-    setState({ ...state, visible: true })
+    setState((prevState) => ({ ...prevState, visible: true }))
     if (handleOpen) {
       handleOpen()
     }
   }
+
   const onClose = () => {
-    setState({ ...state, filter: '', visible: false })
+    setState((prevState) => ({ ...prevState, filter: '', visible: false }))
     if (handleClose) {
       handleClose()
     }
   }
 
-  const setFilter = (filter: string) => setState({ ...state, filter })
+  const setFilter = (filter: string) => setState((prevState) => ({ ...prevState, filter }))
   const setCountries = (countries: Country[]) =>
-    setState({ ...state, countries })
+    setState((prevState) => ({ ...prevState, countries }))
   const onSelectClose = (country: Country) => {
     onSelect(country)
     onClose()
   }
-  const onFocus = () => setState({ ...state, filterFocus: true })
-  const onBlur = () => setState({ ...state, filterFocus: false })
+  const onFocus = () => setState((prevState) => ({ ...prevState, filterFocus: true }))
+  const onBlur = () => setState((prevState) => ({ ...prevState, filterFocus: false }))
   const flagProp = {
     allowFontScaling,
     countryCode,
@@ -171,7 +158,7 @@ export const CountryPicker = (props: CountryPickerProps) => {
     renderFlagButton: renderButton,
     onOpen,
     containerButtonStyle,
-    placeholder: placeholder || 'Select Country',
+    placeholder,
   }
 
   useEffect(() => {
@@ -186,7 +173,9 @@ export const CountryPicker = (props: CountryPickerProps) => {
       preferredCountries,
       withAlphaFilter,
     )
-      .then((countries) => (cancel ? null : setCountries(countries)))
+      .then((countries) => {
+        if (!cancel) setCountries(countries)
+      })
       .catch(console.warn)
 
     return () => {
@@ -243,11 +232,3 @@ export const CountryPicker = (props: CountryPickerProps) => {
     </>
   )
 }
-
-CountryPicker.defaultProps = {
-  withModal: true,
-  withAlphaFilter: false,
-  withCallingCode: false,
-  placeholder: 'Select Country',
-  allowFontScaling: true,
-}