Replace defaultProps with JS default parameters and remove unused dependencies

- Migrate 21 function components from deprecated defaultProps to JS
  default parameters (React 18.3+ deprecation)
- Remove unused dependencies: @react-native-community/hooks,
  react-native-web, react-native-fast-image
- Move build-only deps to devDependencies: @babel/plugin-proposal-
  export-namespace-from, patch-package, react-native-gesture-handler,
  @bigbinary/neeto-commons-frontend (needed by eslint plugin)
- Remove AnimatedImage component and its storybook story
- Fix peerDependencies to use >= ranges instead of exact versions

Author: abhijithsheheer

package.json

@@ -40,43 +40,38 @@
   },
   "peerDependencies": {
     "react-native-device-info": "^10.3.0",
-    "react-native-reanimated": "3.6.0",
-    "react-native-safe-area-context": "^3.3.2",
+    "react-native-reanimated": ">=3.6.0",
+    "react-native-safe-area-context": ">=3.3.2",
     "react-native-svg": "*",
-    "react-native-webview": "11.14.4"
+    "react-native-webview": ">=11.14.4"
   },
   "dependencies": {
-    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-    "@bigbinary/neeto-commons-frontend": "^2.0.129",
     "@bigbinary/neeto-icons-rn": "^1.0.7",
-    "@react-native-community/hooks": "^2.8.1",
     "@shopify/flash-list": "^1.2.0",
     "@styled-system/prop-types": "^5.1.5",
     "dayjs": "^1.11.4",
     "node-html-parser": "^6.1.5",
-    "patch-package": "^8.0.0",
     "react-content-loader": "^6.2.0",
     "react-native-calendars": "^1.1285.0",
     "react-native-controlled-mentions": "^2.2.5",
-    "react-native-fast-image": "^8.6.3",
-    "react-native-gesture-handler": "^2.4.0",
     "react-native-modal": "^13.0.0",
+    "react-native-safe-area-context": "^3.3.2",
     "react-native-pell-rich-editor": "^1.9.0",
     "react-native-popover-view": "^5.1.7",
-    "react-native-safe-area-context": "^3.3.2",
     "react-native-size-matters": "^0.4.0",
     "react-native-snap-carousel": "4.0.0-beta.6",
     "react-native-toast-message": "^2.1.5",
-    "react-native-web": "^0.19.9",
     "styled-components": "^5.3.3",
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
     "@babel/cli": "^7.16.0",
     "@babel/core": "^7.12.9",
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/runtime": "^7.12.5",
     "@bigbinary/eslint-plugin-neeto": "^1.0.15",
+    "@bigbinary/neeto-commons-frontend": "^2.0.129",
     "@bigbinary/neeto-cist": "^1.0.6",
     "@react-native-async-storage/async-storage": "^1.15.11",
     "@react-native-community/datetimepicker": "^3.5.2",
@@ -128,12 +123,14 @@
     "jest": "^26.6.3",
     "lint-staged": "^12.0.3",
     "metro-react-native-babel-preset": "^0.66.2",
+    "patch-package": "^8.0.0",
     "prettier": "^2.3.1",
     "ramda": "^0.29.1",
     "react": "18.1.0",
     "react-dom": "^18.2.0",
     "react-native": "0.70.6",
     "react-native-device-info": "^10.3.0",
+    "react-native-gesture-handler": "^2.4.0",
     "react-native-pager-view": "^5.4.25",
     "react-native-reanimated": "3.6.0",
     "react-native-screens": "^3.15.0",

src/components/AnimatedImage.jsx

@@ -46,6 +46,8 @@ export const Avatar = ({
   bgColor = "background.lightBlue100",
   fontColor = "font.darkBlue100",
   imageUrl,
+  alignItems = "center",
+  justifyContent = "center",
   ...rest
 }) => {
   const opacity = useSharedValue(0);
@@ -82,9 +84,11 @@ export const Avatar = ({
 
   return (
     <Container
+      alignItems={alignItems}
       bg={bgColor}
       borderRadius={avatarSize / 2}
       height={avatarSize}
+      justifyContent={justifyContent}
       width={avatarSize}
       {...rest}
       flexDirection="row"
@@ -118,11 +122,6 @@ const styles = StyleSheet.create({
   },
 });
 
-Avatar.defaultProps = {
-  alignItems: "center",
-  justifyContent: "center",
-};
-
 Avatar.propTypes = {
   /**
    * Name to obtain user initials to show as the text in the Avatar.
@@ -144,4 +143,6 @@ Avatar.propTypes = {
    * Image to display for the Avatar. It accepts a standard React Native Image source prop Or a function that returns an Image.
    */
   imageUrl: PropTypes.string,
+  alignItems: PropTypes.string,
+  justifyContent: PropTypes.string,
 };

src/components/Avatar.jsx

@@ -143,19 +143,19 @@ Title.propTypes = {
  */
 
 export const BottomSheet = ({
-  showCreateOption,
-  CreateItemComponent,
-  showCreateOptionLoader,
+  showCreateOption = false,
+  CreateItemComponent = null,
+  showCreateOptionLoader = false,
   createSearchedOptionLabelStyle,
-  createOptionLabel,
-  onPressCreateOption,
+  createOptionLabel = null,
+  onPressCreateOption = () => {},
   createSearchedOptionContainerStyle,
   data = [],
   title,
   hide,
   isVisible,
   onItemPress,
-  bg,
+  bg = "background.primary",
   children,
   titleContainerStyle,
   titleTextStyle,
@@ -164,17 +164,17 @@ export const BottomSheet = ({
   ContentRow,
   contentType,
   canSearch,
-  onDonePress,
+  onDonePress = () => {},
   disabled,
   noResultsLabelContainerStyle,
   noResultsLabelStyle,
   noResultsLabel,
   NoResultsComponent,
-  labelExtractor,
-  valueExtractor,
+  labelExtractor = () => {},
+  valueExtractor = () => {},
   selectedItem,
-  onBackdropPress,
-  searchBarProps,
+  onBackdropPress = () => {},
+  searchBarProps = {},
   shouldHideKeyboardOnScrollBegin = true,
   shouldShowItemSeparator = true,
   flatListRef,
@@ -360,20 +360,6 @@ export const BottomSheet = ({
   );
 };
 
-BottomSheet.defaultProps = {
-  bg: "background.primary",
-  showCreateOption: false,
-  showCreateOptionLoader: false,
-  createOptionLabel: null,
-  onPressCreateOption: () => {},
-  CreateItemComponent: null,
-  onDonePress: () => {},
-  valueExtractor: () => {},
-  labelExtractor: () => {},
-  onBackdropPress: () => {},
-  searchBarProps: {},
-};
-
 BottomSheet.propTypes = {
   /**
    * List of items.

src/components/BottomSheet.jsx

@@ -75,17 +75,17 @@ export const BUTTON_VARIANTS = Object.freeze({
 export const Button = React.forwardRef(
   (
     {
-      variant,
+      variant = "solid",
       label,
       labelStyle,
       RightIcon,
       LeftIcon,
       disabled,
-      isLoading,
-      loadingText,
+      isLoading = false,
+      loadingText = "",
       fontFamily,
       color,
-      fontSize,
+      fontSize = "m",
       ...rest
     },
     ref
@@ -224,13 +224,6 @@ export const Button = React.forwardRef(
   }
 );
 
-Button.defaultProps = {
-  variant: "solid",
-  isLoading: false,
-  loadingText: "",
-  fontSize: "m",
-};
-
 Button.propTypes = {
   ...propTypes.buttonStyle,
   ...propTypes.flexbox,

src/components/Button.jsx

@@ -35,14 +35,14 @@ import { Typography } from "./Typography";
  */
 
 export const ButtonGroup = ({
-  activeColor,
-  inActiveColor,
+  activeColor = "background.grey600",
+  inActiveColor = "background.white",
   buttonItems,
   onPress,
   currentActiveBtn,
-  wrapperStyle,
-  buttonStyle,
-  buttonTextStyle,
+  wrapperStyle = {},
+  buttonStyle = {},
+  buttonTextStyle = { ellipsizeMode: "tail", numberOfLines: 1 },
 }) => (
   <Container
     alignSelf="center"
@@ -78,14 +78,6 @@ export const ButtonGroup = ({
   </Container>
 );
 
-ButtonGroup.defaultProps = {
-  activeColor: "background.grey600",
-  inActiveColor: "background.white",
-  wrapperStyle: {},
-  buttonTextStyle: { ellipsizeMode: "tail", numberOfLines: 1 },
-  buttonStyle: {},
-};
-
 ButtonGroup.propTypes = {
   /**
    * Sets active color to the selected button in buttonGroup.