diff --git a/package.json b/package.json
index cf4ffe6f..376c97d1 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@bigbinary/neetoui-rn",
   "version": "2.0.6",
-  "main": ".",
+  "main": "./src/index.js",
   "author": "BigBinary",
   "license": "MIT",
   "description": "The neetoUI-RN library drives the experience in all neeto product's React Native applications built at BigBinary.",
@@ -40,43 +40,37 @@
   },
   "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-calendars": ">=1.1313.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-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 +122,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",
diff --git a/patches/react-native-fast-image+8.6.3.patch b/patches/react-native-fast-image+8.6.3.patch
deleted file mode 100644
index 760d13bb..00000000
--- a/patches/react-native-fast-image+8.6.3.patch
+++ /dev/null
@@ -1,358 +0,0 @@
-diff --git a/node_modules/react-native-fast-image/LICENSE b/node_modules/react-native-fast-image/LICENSE
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/README.md b/node_modules/react-native-fast-image/README.md
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/RNFastImage.podspec b/node_modules/react-native-fast-image/RNFastImage.podspec
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/android/build.gradle b/node_modules/react-native-fast-image/android/build.gradle
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/android/src/main/AndroidManifest.xml b/node_modules/react-native-fast-image/android/src/main/AndroidManifest.xml
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageCacheControl.java b/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageCacheControl.java
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageGlideModule.java b/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageGlideModule.java
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageOkHttpProgressGlideModule.java b/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageOkHttpProgressGlideModule.java
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageProgressListener.java b/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageProgressListener.java
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageRequestListener.java b/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageRequestListener.java
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageSource.java b/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageSource.java
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewConverter.java b/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewConverter.java
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java b/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewModule.java b/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewModule.java
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewPackage.java b/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewPackage.java
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewWithUrl.java b/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewWithUrl.java
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/dist/index.cjs.js b/node_modules/react-native-fast-image/dist/index.cjs.js
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/dist/index.cjs.js.flow b/node_modules/react-native-fast-image/dist/index.cjs.js.flow
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/dist/index.d.ts b/node_modules/react-native-fast-image/dist/index.d.ts
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/dist/index.d.ts.map b/node_modules/react-native-fast-image/dist/index.d.ts.map
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/dist/index.js b/node_modules/react-native-fast-image/dist/index.js
-old mode 100644
-new mode 100755
-index 58e0308..2746610
---- a/node_modules/react-native-fast-image/dist/index.js
-+++ b/node_modules/react-native-fast-image/dist/index.js
-@@ -1,137 +1,128 @@
--import _extends from '@babel/runtime/helpers/extends';
--import React, { forwardRef, memo } from 'react';
--import { NativeModules, StyleSheet, requireNativeComponent, Image, View, Platform } from 'react-native';
-+import React, { forwardRef, memo } from 'react'
-+import {
-+    View,
-+    Image,
-+    NativeModules,
-+    requireNativeComponent,
-+    StyleSheet,
-+    Platform,
-+} from 'react-native'
-+
-+const FastImageViewNativeModule = NativeModules.FastImageView
- 
--const resizeMode = {
--  contain: 'contain',
--  cover: 'cover',
--  stretch: 'stretch',
--  center: 'center'
--};
--const priority = {
--  low: 'low',
--  normal: 'normal',
--  high: 'high'
--};
--const cacheControl = {
--  // Ignore headers, use uri as cache key, fetch only if not in cache.
--  immutable: 'immutable',
--  // Respect http headers, no aggressive caching.
--  web: 'web',
--  // Only load from cache.
--  cacheOnly: 'cacheOnly'
--};
--
--const resolveDefaultSource = defaultSource => {
--  if (!defaultSource) {
--    return null;
--  }
--
--  if (Platform.OS === 'android') {
--    // Android receives a URI string, and resolves into a Drawable using RN's methods.
--    const resolved = Image.resolveAssetSource(defaultSource);
--
--    if (resolved) {
--      return resolved.uri;
-+function FastImageBase({
-+    source,
-+    tintColor,
-+    onLoadStart,
-+    onProgress,
-+    onLoad,
-+    onError,
-+    onLoadEnd,
-+    style,
-+    children,
-+    fallback,
-+    forwardedRef,
-+    ...props
-+}) {
-+    if (fallback || Platform.OS === 'web') {
-+        return (
-+            <View style={[styles.imageContainer, style]} ref={forwardedRef}>
-+                <Image
-+                    {...props}
-+                    tintColor={tintColor}
-+                    style={StyleSheet.absoluteFill}
-+                    source={source}
-+                    onLoadStart={onLoadStart}
-+                    onProgress={onProgress}
-+                    onLoad={onLoad}
-+                    onError={onError}
-+                    onLoadEnd={onLoadEnd}
-+                />
-+                {children}
-+            </View>
-+        )
-     }
- 
--    return null;
--  } // iOS or other number mapped assets
--  // In iOS the number is passed, and bridged automatically into a UIImage
-+    return (
-+        <View style={[styles.imageContainer, style]} ref={forwardedRef}>
-+            <FastImageView
-+                {...props}
-+                tintColor={tintColor}
-+                style={StyleSheet.absoluteFill}
-+                source={Image.resolveAssetSource(source)}
-+                onFastImageLoadStart={onLoadStart}
-+                onFastImageProgress={onProgress}
-+                onFastImageLoad={onLoad}
-+                onFastImageError={onError}
-+                onFastImageLoadEnd={onLoadEnd}
-+            />
-+            {children}
-+        </View>
-+    )
-+}
- 
-+const FastImageMemo = memo(FastImageBase)
- 
--  return defaultSource;
--};
-+const FastImage = forwardRef((props, ref) => (
-+    <FastImageMemo forwardedRef={ref} {...props} />
-+))
- 
--function FastImageBase({
--  source,
--  defaultSource,
--  tintColor,
--  onLoadStart,
--  onProgress,
--  onLoad,
--  onError,
--  onLoadEnd,
--  style,
--  fallback,
--  children,
--  // eslint-disable-next-line no-shadow
--  resizeMode = 'cover',
--  forwardedRef,
--  ...props
--}) {
--  if (fallback) {
--    const cleanedSource = { ...source
--    };
--    delete cleanedSource.cache;
--    const resolvedSource = Image.resolveAssetSource(cleanedSource);
--    return /*#__PURE__*/React.createElement(View, {
--      style: [styles.imageContainer, style],
--      ref: forwardedRef
--    }, /*#__PURE__*/React.createElement(Image, _extends({}, props, {
--      style: [StyleSheet.absoluteFill, {
--        tintColor
--      }],
--      source: resolvedSource,
--      defaultSource: defaultSource,
--      onLoadStart: onLoadStart,
--      onProgress: onProgress,
--      onLoad: onLoad,
--      onError: onError,
--      onLoadEnd: onLoadEnd,
--      resizeMode: resizeMode
--    })), children);
--  }
-+FastImage.displayName = 'FastImage'
- 
--  const resolvedSource = Image.resolveAssetSource(source);
--  const resolvedDefaultSource = resolveDefaultSource(defaultSource);
--  return /*#__PURE__*/React.createElement(View, {
--    style: [styles.imageContainer, style],
--    ref: forwardedRef
--  }, /*#__PURE__*/React.createElement(FastImageView, _extends({}, props, {
--    tintColor: tintColor,
--    style: StyleSheet.absoluteFill,
--    source: resolvedSource,
--    defaultSource: resolvedDefaultSource,
--    onFastImageLoadStart: onLoadStart,
--    onFastImageProgress: onProgress,
--    onFastImageLoad: onLoad,
--    onFastImageError: onError,
--    onFastImageLoadEnd: onLoadEnd,
--    resizeMode: resizeMode
--  })), children);
-+const styles = StyleSheet.create({
-+    imageContainer: {
-+        overflow: 'hidden',
-+    },
-+})
-+
-+FastImage.resizeMode = {
-+    contain: 'contain',
-+    cover: 'cover',
-+    stretch: 'stretch',
-+    center: 'center',
- }
- 
--const FastImageMemo = /*#__PURE__*/memo(FastImageBase);
--const FastImageComponent = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(FastImageMemo, _extends({
--  forwardedRef: ref
--}, props)));
--FastImageComponent.displayName = 'FastImage';
--const FastImage = FastImageComponent;
--FastImage.resizeMode = resizeMode;
--FastImage.cacheControl = cacheControl;
--FastImage.priority = priority;
--
--FastImage.preload = sources => NativeModules.FastImageView.preload(sources);
-+FastImage.priority = {
-+    // lower than usual.
-+    low: 'low',
-+    // normal, the default.
-+    normal: 'normal',
-+    // higher than usual.
-+    high: 'high',
-+}
- 
--FastImage.clearMemoryCache = () => NativeModules.FastImageView.clearMemoryCache();
-+FastImage.cacheControl = {
-+    // Ignore headers, use uri as cache key, fetch only if not in cache.
-+    immutable: 'immutable',
-+    // Respect http headers, no aggressive caching.
-+    web: 'web',
-+    // Only load from cache.
-+    cacheOnly: 'cacheOnly',
-+}
- 
--FastImage.clearDiskCache = () => NativeModules.FastImageView.clearDiskCache();
-+FastImage.preload = sources => {
-+    if (Platform.OS !== 'web') {
-+        FastImageViewNativeModule.preload(sources)
-+    }
-+}
- 
--const styles = StyleSheet.create({
--  imageContainer: {
--    overflow: 'hidden'
--  }
--}); // Types of requireNativeComponent are not correct.
-+FastImage.defaultProps = {
-+    resizeMode: FastImage.resizeMode.cover,
-+}
- 
--const FastImageView = requireNativeComponent('FastImageView', FastImage, {
--  nativeOnly: {
--    onFastImageLoadStart: true,
--    onFastImageProgress: true,
--    onFastImageLoad: true,
--    onFastImageError: true,
--    onFastImageLoadEnd: true
--  }
--});
-+let FastImageView
-+if (Platform.OS === 'web') {
-+    FastImageView = Image
-+} else {
-+    FastImageView = requireNativeComponent('FastImageView', FastImage, {
-+        nativeOnly: {
-+            onFastImageLoadStart: true,
-+            onFastImageProgress: true,
-+            onFastImageLoad: true,
-+            onFastImageError: true,
-+            onFastImageLoadEnd: true,
-+        },
-+    })
-+}
- 
--export default FastImage;
-+export default FastImage
-\ No newline at end of file
-diff --git a/node_modules/react-native-fast-image/dist/index.js.flow b/node_modules/react-native-fast-image/dist/index.js.flow
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/dist/index.test.d.ts b/node_modules/react-native-fast-image/dist/index.test.d.ts
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/dist/index.test.d.ts.map b/node_modules/react-native-fast-image/dist/index.test.d.ts.map
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/ios/FastImage.xcodeproj/project.pbxproj b/node_modules/react-native-fast-image/ios/FastImage.xcodeproj/project.pbxproj
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/ios/FastImage.xcodeproj/xcshareddata/xcschemes/FastImage-tvOS.xcscheme b/node_modules/react-native-fast-image/ios/FastImage.xcodeproj/xcshareddata/xcschemes/FastImage-tvOS.xcscheme
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/ios/FastImage/FFFastImageSource.h b/node_modules/react-native-fast-image/ios/FastImage/FFFastImageSource.h
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/ios/FastImage/FFFastImageSource.m b/node_modules/react-native-fast-image/ios/FastImage/FFFastImageSource.m
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.h b/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.h
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.m b/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.m
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/ios/FastImage/FFFastImageViewManager.h b/node_modules/react-native-fast-image/ios/FastImage/FFFastImageViewManager.h
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/ios/FastImage/FFFastImageViewManager.m b/node_modules/react-native-fast-image/ios/FastImage/FFFastImageViewManager.m
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/ios/FastImage/RCTConvert+FFFastImage.h b/node_modules/react-native-fast-image/ios/FastImage/RCTConvert+FFFastImage.h
-old mode 100644
-new mode 100755
-diff --git a/node_modules/react-native-fast-image/ios/FastImage/RCTConvert+FFFastImage.m b/node_modules/react-native-fast-image/ios/FastImage/RCTConvert+FFFastImage.m
-old mode 100644
-new mode 100755
diff --git a/src/components/AnimatedImage.jsx b/src/components/AnimatedImage.jsx
deleted file mode 100644
index 7a68138e..00000000
--- a/src/components/AnimatedImage.jsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import React, { useState } from "react";
-
-import PropTypes from "prop-types";
-import RNFImage from "react-native-fast-image";
-import Animated, {
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from "react-native-reanimated";
-import { moderateScale } from "react-native-size-matters";
-import styled from "styled-components/native";
-import { flexbox, space, border, color, layout } from "styled-system";
-
-import ImagePlaceholder from "@assets/images/image-placeholder.svg";
-
-import { Container } from "./Container";
-import { Loader } from "./Loader";
-
-import { theme } from "../theme";
-
-const StyledImage = styled(RNFImage)`
-  ${flexbox}
-  ${space}
-  ${border}
-  ${color}
-  ${layout}
-`;
-
-/**
- * AnimatedImage can be used to display a placeholder before image is loaded with animation.
- *
- * <div class="screenshots">
- *   <img src="screenshots/avatar/images.png" />
- *   <img src="screenshots/avatar/texts.png" />
- * </div>
- *
- *  ## Usage
- * ```js
- * import * as React from 'react';
- * import { Typography, Avatar } from '@bigbinary/neetoui-rn';
- *
- * export default function Main() {
- *  return (
- *    <Container>
- *     <AnimatedImage
- *      imageHeight={moderateScale(139)}
- *      imageWidth={moderateScale(255)}
- *      imageUrl="https://picsum.photos/255/139"
- *     />
- *   </Container>
- *  );
- * }
- * ```
- */
-
-const borderRadius = moderateScale(10);
-export const AnimatedImage = ({
-  imageHeight = 139,
-  imageWidth = 255,
-  imageUrl,
-  ...rest
-}) => {
-  const opacity = useSharedValue(0);
-  const [isImageLoaded, setIsImageLoaded] = useState(false);
-
-  const profileImageStyle = useAnimatedStyle(() => ({
-    opacity: withTiming(opacity.value, {
-      duration: 300,
-      easing: Easing.bezier(0.25, 0.1, 0.25, 1),
-    }),
-    height: imageHeight,
-    width: imageWidth,
-    alignSelf: "center",
-    borderRadius,
-  }));
-
-  return (
-    <Container
-      alignItems="center"
-      borderRadius={moderateScale(10)}
-      justifyContent="center"
-      overflow="hidden"
-    >
-      <Animated.View style={profileImageStyle}>
-        <StyledImage
-          height={imageHeight}
-          width={imageWidth}
-          source={{
-            uri: imageUrl,
-            headers: {
-              Accept: "*/*",
-              "Content-Type": "application/json",
-              Pragma: "no-cache",
-            },
-          }}
-          onLoad={() => {
-            setIsImageLoaded(true);
-            opacity.value = 1;
-          }}
-          onLoadStart={() => {
-            setIsImageLoaded(false);
-            opacity.value = 0;
-          }}
-          {...rest}
-        />
-      </Animated.View>
-      {!isImageLoaded && (
-        <Container position="absolute">
-          <ImagePlaceholder />
-          <Container
-            bottom={moderateScale(15)}
-            position="absolute"
-            right={moderateScale(15)}
-          >
-            <Loader color={theme.colors.font.grey600} />
-          </Container>
-        </Container>
-      )}
-    </Container>
-  );
-};
-
-AnimatedImage.defaultProps = {
-  alignItems: "center",
-  justifyContent: "center",
-};
-
-AnimatedImage.propTypes = {
-  /**
-   * Height for image.
-   */
-  imageHeight: PropTypes.number | PropTypes.string,
-  /**
-   * Width for image.
-   */
-  imageWidth: PropTypes.number,
-  /**
-   * Url to display the Image. It accepts a standard React Native Image source prop Or a function that returns an Image.
-   */
-  imageUrl: PropTypes.string,
-};
diff --git a/src/components/Avatar.jsx b/src/components/Avatar.jsx
index 18e6a34e..db289b7a 100644
--- a/src/components/Avatar.jsx
+++ b/src/components/Avatar.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,
 };
diff --git a/src/components/BottomSheet.jsx b/src/components/BottomSheet.jsx
index 7460d17e..88113538 100644
--- a/src/components/BottomSheet.jsx
+++ b/src/components/BottomSheet.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.
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index b17197d2..348ba15b 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.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,
diff --git a/src/components/ButtonGroup.jsx b/src/components/ButtonGroup.jsx
index c2cb9291..d8024e1b 100644
--- a/src/components/ButtonGroup.jsx
+++ b/src/components/ButtonGroup.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.
diff --git a/src/components/CheckBox.jsx b/src/components/CheckBox.jsx
index c5efc2c6..1d48e0c7 100644
--- a/src/components/CheckBox.jsx
+++ b/src/components/CheckBox.jsx
@@ -59,13 +59,13 @@ import { Typography } from "./Typography";
  */
 
 export const CheckBox = ({
-  checked,
-  onSelect,
+  checked = false,
+  onSelect = () => {},
   disabled,
   label,
   checkIconStyle,
   labelStyle,
-  isRequiredLabel,
+  isRequiredLabel = false,
   ...rest
 }) => {
   const theme = useContext(ThemeContext);
@@ -153,9 +153,3 @@ CheckBox.propTypes = {
    */
   isRequiredLabel: PropTypes.bool,
 };
-
-CheckBox.defaultProps = {
-  checked: false,
-  onSelect: () => {},
-  isRequiredLabel: false,
-};
diff --git a/src/components/Chip.jsx b/src/components/Chip.jsx
index 3b9bad30..aa23a5ae 100644
--- a/src/components/Chip.jsx
+++ b/src/components/Chip.jsx
@@ -62,16 +62,16 @@ const commonContainerStyle = {
 export const Chip = ({
   label,
   LeftIcon,
-  variant,
-  labelColor,
-  closeIconBackground,
-  closeIconColor,
+  variant = "outlined",
+  labelColor = "font.primary",
+  closeIconBackground = "background.grey500",
+  closeIconColor = "white",
   onClose,
   onChipPress,
-  isDisabled,
-  closeIconSize,
-  closeIcon: CloseIcon,
-  closeIconProps,
+  isDisabled = false,
+  closeIconSize = moderateScale(14),
+  closeIcon: CloseIcon = Close,
+  closeIconProps = { viewBox: "0 0 25 25" },
   containerStyle,
   closeIconContainerStyle,
 }) => (
@@ -117,17 +117,6 @@ export const Chip = ({
   </Container>
 );
 
-Chip.defaultProps = {
-  variant: "outlined",
-  labelColor: "font.primary",
-  closeIconBackground: "background.grey500",
-  closeIconColor: "white",
-  closeIconProps: { viewBox: "0 0 25 25" },
-  isDisabled: false,
-  closeIconSize: moderateScale(14),
-  closeIcon: Close,
-};
-
 Chip.propTypes = {
   /**
    * Takes the text that needs to be displayed inside the chip.
diff --git a/src/components/Container.jsx b/src/components/Container.jsx
index 9de7c018..41508960 100644
--- a/src/components/Container.jsx
+++ b/src/components/Container.jsx
@@ -13,14 +13,16 @@ const View = styled.View`
   ${layout}
 `;
 
-export const Container = ({ children, ...rest }) => (
-  <View {...rest}>{children}</View>
+export const Container = ({
+  children,
+  color = "background.primary",
+  ...rest
+}) => (
+  <View color={color} {...rest}>
+    {children}
+  </View>
 );
 
-Container.defaultProps = {
-  color: "background.primary",
-};
-
 Container.propTypes = {
   ...propTypes.flexbox,
   ...propTypes.space,
diff --git a/src/components/Divider.jsx b/src/components/Divider.jsx
index 5711dbbf..7cd6658d 100644
--- a/src/components/Divider.jsx
+++ b/src/components/Divider.jsx
@@ -37,7 +37,12 @@ const View = styled.View`
   ${layout}
 `;
 
-export const Divider = ({ thickness, orientation, bg, ...rest }) => {
+export const Divider = ({
+  thickness = moderateScale(1),
+  orientation = "horizontal",
+  bg = "background.grey400",
+  ...rest
+}) => {
   const isHorizontal = orientation === "horizontal";
   const lineStyles = isHorizontal
     ? {
@@ -53,12 +58,6 @@ export const Divider = ({ thickness, orientation, bg, ...rest }) => {
   return thickness > 0 && <View bg={bg} {...lineStyles} />;
 };
 
-Divider.defaultProps = {
-  bg: "background.grey400",
-  orientation: "horizontal",
-  thickness: moderateScale(1),
-};
-
 Divider.propTypes = {
   ...propTypes.flexbox,
   ...propTypes.space,
diff --git a/src/components/FAB.jsx b/src/components/FAB.jsx
index 3208e6bb..8edd6739 100644
--- a/src/components/FAB.jsx
+++ b/src/components/FAB.jsx
@@ -48,7 +48,18 @@ import { Touchable } from "./Touchable";
  */
 
 // eslint-disable-next-line @bigbinary/neeto/no-dangling-constants
-export const FAB = ({ Icon, bg, disabled, variant, onPress, ...rest }) => {
+export const FAB = ({
+  Icon,
+  bg,
+  disabled,
+  variant = "solid",
+  onPress,
+  size = moderateScale(56),
+  alignItems = "center",
+  justifyContent = "center",
+  borderRadius = moderateScale(28),
+  ...rest
+}) => {
   const shadowStyle = {
     shadowColor: theme.colors.background.grey800,
     shadowOffset: {
@@ -73,6 +84,10 @@ export const FAB = ({ Icon, bg, disabled, variant, onPress, ...rest }) => {
       variant={variant}
       onPress={onPress}
       {...(variant !== "inverse" ? { borderColor: bg } : {})}
+      alignItems={alignItems}
+      borderRadius={borderRadius}
+      justifyContent={justifyContent}
+      size={size}
       {...rest}
     >
       <Icon />
@@ -80,14 +95,6 @@ export const FAB = ({ Icon, bg, disabled, variant, onPress, ...rest }) => {
   );
 };
 
-FAB.defaultProps = {
-  variant: "solid",
-  size: moderateScale(56),
-  alignItems: "center",
-  justifyContent: "center",
-  borderRadius: moderateScale(28),
-};
-
 FAB.propTypes = {
   ...propTypes.flexbox,
   ...propTypes.position,
diff --git a/src/components/Loader.jsx b/src/components/Loader.jsx
index a48c7b65..cc9d5867 100644
--- a/src/components/Loader.jsx
+++ b/src/components/Loader.jsx
@@ -48,7 +48,10 @@ const AnimatedCircle = Animated.createAnimatedComponent(Circle);
  *
  */
 
-export const Loader = ({ color, size }) => {
+export const Loader = ({
+  color = theme.colors.background.lightBlue400,
+  size = "s",
+}) => {
   const progress = useSharedValue(0);
   const width = LOADER_WIDTH[size];
   const stroke_width = width * 0.15;
@@ -116,8 +119,3 @@ Loader.propTypes = {
    */
   color: PropTypes.string,
 };
-
-Loader.defaultProps = {
-  size: "s",
-  color: theme.colors.background.lightBlue400,
-};
diff --git a/src/components/MultiSelect.jsx b/src/components/MultiSelect.jsx
index 2fb5208b..f8af9b5a 100644
--- a/src/components/MultiSelect.jsx
+++ b/src/components/MultiSelect.jsx
@@ -176,15 +176,15 @@ const AnimatedLabel = Animated.createAnimatedComponent(Typography);
 
 export const MultiSelect = ({
   options,
-  label,
-  value,
-  labelExtractor,
-  valueExtractor,
-  onSelect,
-  deletedValue,
-  isLoading,
-  isSearchable,
-  showCreateOption,
+  label = null,
+  value = null,
+  labelExtractor = option => option?.label,
+  valueExtractor = option => option?.value,
+  onSelect = () => {},
+  deletedValue = () => {},
+  isLoading = false,
+  isSearchable = false,
+  showCreateOption = false,
   labelStyle,
   containerStyle,
   inputContainerStyle,
@@ -192,26 +192,26 @@ export const MultiSelect = ({
   itemContainerStyle,
   multiSelectedItemContainerStyle,
   multiSelectedItemLabelStyle,
-  selectedValue,
+  selectedValue = () => {},
   CreateItemComponent,
-  showCreateOptionLoader,
+  showCreateOptionLoader = false,
   createSearchedOptionLabelStyle,
-  onPressCreateOption,
+  onPressCreateOption = () => {},
   createSearchedOptionContainerStyle,
-  onDonePress,
+  onDonePress = () => {},
   disabled,
   noResultsLabelContainerStyle,
   noResultsLabelStyle,
   noResultsLabel,
   NoResultsComponent,
-  maxItemSize,
+  maxItemSize = 5,
   moreItemLabelContainerStyle,
   moreItemLabelStyle,
   MoreItemComponent,
-  onBackdropPress,
-  searchBarProps,
-  confirmationAlertObj,
-  isRequiredLabel,
+  onBackdropPress = () => {},
+  searchBarProps = {},
+  confirmationAlertObj = {},
+  isRequiredLabel = false,
   ...rest
 }) => {
   const theme = useContext(ThemeContext);
@@ -623,24 +623,3 @@ MultiSelect.propTypes = {
    */
   isRequiredLabel: PropTypes.bool,
 };
-
-MultiSelect.defaultProps = {
-  label: null,
-  labelExtractor: option => option?.label,
-  valueExtractor: option => option?.value,
-  value: null,
-  onSelect: () => {},
-  selectedValue: () => {},
-  deletedValue: () => {},
-  isLoading: false,
-  isSearchable: false,
-  showCreateOption: false,
-  showCreateOptionLoader: false,
-  onPressCreateOption: () => {},
-  onDonePress: () => {},
-  maxItemSize: 5,
-  onBackdropPress: () => {},
-  searchBarProps: {},
-  confirmationAlertObj: {},
-  isRequiredLabel: false,
-};
diff --git a/src/components/OtpInputs.jsx b/src/components/OtpInputs.jsx
index 8c665482..955cb0d0 100644
--- a/src/components/OtpInputs.jsx
+++ b/src/components/OtpInputs.jsx
@@ -82,8 +82,8 @@ export const OtpInputs = ({
   numberOfInputs = 4,
   error = false,
   code = "",
-  containerStyles,
-  textStyles,
+  containerStyles = {},
+  textStyles = {},
 }) => {
   const inputRef = React.useRef();
   useEffect(() => {
@@ -162,11 +162,6 @@ export const OtpInputs = ({
   );
 };
 
-OtpInputs.defaultProps = {
-  containerStyles: {},
-  textStyles: {},
-};
-
 OtpInputs.propTypes = {
   /**
    * This would be OTP code.
diff --git a/src/components/RadioButton.jsx b/src/components/RadioButton.jsx
index ce687ddc..76de4975 100644
--- a/src/components/RadioButton.jsx
+++ b/src/components/RadioButton.jsx
@@ -57,8 +57,8 @@ import { Typography } from "./Typography";
  */
 
 export const RadioButton = ({
-  selected,
-  onSelect,
+  selected = false,
+  onSelect = () => {},
   disabled,
   label,
   selectIconStyle,
@@ -149,8 +149,3 @@ RadioButton.propTypes = {
    */
   labelStyle: Proptypes.object,
 };
-
-RadioButton.defaultProps = {
-  selected: false,
-  onSelect: () => {},
-};
diff --git a/src/components/RichTextEditor.jsx b/src/components/RichTextEditor.jsx
index ba0452ab..3098caa4 100644
--- a/src/components/RichTextEditor.jsx
+++ b/src/components/RichTextEditor.jsx
@@ -76,11 +76,11 @@ export const ScrollView = styled.ScrollView.attrs(() => ({
 
 export const RichTextEditor = ({
   onChange,
-  placeholderText,
+  placeholderText = "Type here...",
   children,
   toolbarActions,
-  editorProps,
-  toolBarProps,
+  editorProps = {},
+  toolBarProps = {},
   richTextRef: externalRichTextRef,
   ...rest
 }) => {
@@ -134,13 +134,6 @@ export const RichTextEditor = ({
   );
 };
 
-RichTextEditor.defaultProps = {
-  editorProps: {},
-  toolBarProps: {},
-  toolbarWrapperStyle: {},
-  placeholderText: "Type here...",
-};
-
 RichTextEditor.propTypes = {
   /**
    * Callback that is called when the text input's text changes.
diff --git a/src/components/SegmentedTopBar/Tab.jsx b/src/components/SegmentedTopBar/Tab.jsx
index 8d9e0bc7..60cfc232 100644
--- a/src/components/SegmentedTopBar/Tab.jsx
+++ b/src/components/SegmentedTopBar/Tab.jsx
@@ -8,7 +8,7 @@ import { Touchable } from "../Touchable";
 import { Typography } from "../Typography";
 
 export const Tab = forwardRef(
-  ({ label, value, navigation, flex, count }, ref) => {
+  ({ label, value, navigation, flex = 1, count }, ref) => {
     const handleOnPress = useCallback(
       () => navigation.navigate(value),
       [navigation, value]
@@ -70,7 +70,3 @@ Tab.propTypes = {
   navigation: PropTypes.object,
   count: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
-
-Tab.defaultProps = {
-  flex: 1,
-};
diff --git a/src/components/SegmentedTopBar/index.jsx b/src/components/SegmentedTopBar/index.jsx
index 95796714..f7af625f 100644
--- a/src/components/SegmentedTopBar/index.jsx
+++ b/src/components/SegmentedTopBar/index.jsx
@@ -60,7 +60,7 @@ import { Tab } from "./Tab";
 export const SegmentedTopBar = ({
   state: { routes, index },
   navigation,
-  height,
+  height = moderateScale(48),
   descriptors,
 }) => {
   const containerRef = useRef();
@@ -169,8 +169,3 @@ SegmentedTopBar.propTypes = {
   navigation: PropTypes.object,
   descriptors: PropTypes.object,
 };
-
-SegmentedTopBar.defaultProps = {
-  tabs: [],
-  height: moderateScale(48),
-};
diff --git a/src/components/Toast.jsx b/src/components/Toast.jsx
index 093bd247..9cc708d6 100644
--- a/src/components/Toast.jsx
+++ b/src/components/Toast.jsx
@@ -196,11 +196,6 @@ export const Toast = ({ toasterConfig, ...rest }) => {
 Toast.show = T.show;
 Toast.hide = T.hide;
 
-Toast.defaultProps = {
-  text1: "",
-  text2: "",
-};
-
 Toast.propTypes = {
   /**
    * configuration
diff --git a/src/components/Touchable.jsx b/src/components/Touchable.jsx
index 6f5742bc..c38c3a5c 100644
--- a/src/components/Touchable.jsx
+++ b/src/components/Touchable.jsx
@@ -76,7 +76,7 @@ const defaultRippleConfig = {
 };
 
 export const Touchable = React.forwardRef((props, ref) => {
-  const { children, elevation, rippleConfig, ...rest } = props;
+  const { children, elevation, rippleConfig = {}, ...rest } = props;
   const shadowStyles = elevation ? getShadowStyles(elevation) : {};
 
   const rippleProps = {
@@ -126,8 +126,4 @@ Touchable.propTypes = {
   }),
 };
 
-Touchable.defaultProps = {
-  rippleConfig: {},
-};
-
 Touchable.displayName = "Touchable";
diff --git a/src/components/TouchableWithoutFeedback.jsx b/src/components/TouchableWithoutFeedback.jsx
index 2a6a7c5e..2d828600 100644
--- a/src/components/TouchableWithoutFeedback.jsx
+++ b/src/components/TouchableWithoutFeedback.jsx
@@ -40,8 +40,6 @@ const TouchableWithoutFeedback = ({ onPress, onPressIn, ...props }) => {
   );
 };
 
-TouchableWithoutFeedback.defaultProps = {};
-
 TouchableWithoutFeedback.propTypes = {
   onPress: PropTypes.func,
   onPressIn: PropTypes.func,
diff --git a/src/components/Typography.jsx b/src/components/Typography.jsx
index 9402ea56..dfee1c50 100644
--- a/src/components/Typography.jsx
+++ b/src/components/Typography.jsx
@@ -88,6 +88,7 @@ export const Typography = ({
   children,
   fontSize,
   lineHeightMultiplier = 1.3,
+  textStyle = "defaultTextStyle",
   style,
   ...rest
 }) => {
@@ -120,6 +121,7 @@ export const Typography = ({
       android_hyphenationFrequency="full"
       fontSize={fontSize}
       textBreakStrategy="simple"
+      textStyle={textStyle}
       {...rest}
       style={[
         Platform.OS === "android" && {
@@ -145,8 +147,3 @@ Typography.propTypes = {
   lineHeightMultiplier: PropTypes.number,
   style: PropTypes.object,
 };
-
-Typography.defaultProps = {
-  textStyle: "defaultTextStyle",
-  lineHeightMultiplier: 1.3,
-};
diff --git a/src/components/index.js b/src/components/index.js
index 742a610c..954aec8f 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -34,7 +34,6 @@ export { Accordion } from "./Accordion";
 export { Calendar } from "./Calendar";
 export { FlashList } from "./FlashList";
 export { BottomTabBar } from "./BottomTabBar";
-export { AnimatedImage } from "./AnimatedImage";
 export { NotificationPreferenceList } from "./NotificationPreferenceList";
 export { OrganizationItem } from "./OrganizationItem";
 export { ChatInput } from "./ChatInput/ChatInput";
diff --git a/storybook/stories/AnimatedImage.stories.jsx b/storybook/stories/AnimatedImage.stories.jsx
deleted file mode 100644
index edef266b..00000000
--- a/storybook/stories/AnimatedImage.stories.jsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from "react";
-import { Platform } from "react-native";
-
-import { Container, AnimatedImage, Typography } from "@components";
-
-const imageUrl = "https://picsum.photos/255/139";
-
-const AnimatedImageStories = {
-  title: "AnimatedImages",
-  component: AnimatedImage,
-  args: {
-    imageUrl,
-    imageHeight: 255,
-    imageWidth: 255,
-  },
-  parameters: {
-    notes: `
-AnimatedImage can be used to display a placeholder before image is loaded with animation.
-
-![image](assets/screenshots/avatar/images.png)
-
-![image](assets/screenshots/avatar/texts.png)
-
-## Usage
-
->import * as React from 'react';
->import { Typography, Avatar } from '@bigbinary/neetoui-rn';
->
-
->export default function Main() {
-> return (
->   <Container>
->     <AnimatedImage
->      imageHeight={23}
->      imageWidth={23}
->      imageUrl='/example'
->     />
->  </Container>
->  );
->}
-`},
-};
-export default AnimatedImageStories;
-
-export const AnimatedImageDemo = args => {
-  if (Platform.OS === "web") {
-    return (
-      <Container alignItems="center" flex={1} justifyContent="center">
-        <Typography>
-          This story is disabled on web due to animation compatibility issues.
-        </Typography>
-      </Container>
-    );
-  }
-
-  return (
-    <Container alignItems="center" flex={1} justifyContent="center">
-      <AnimatedImage {...args} />
-    </Container>
-  );
-};
-
-export const AnimatedImages = () => {
-  // Disable on web platform
-  if (Platform.OS === "web") {
-    return (
-      <Container alignItems="center" flex={1} justifyContent="center">
-        <Typography>
-          This story is disabled on web due to animation compatibility issues.
-        </Typography>
-      </Container>
-    );
-  }
-
-  return (
-    <Container alignItems="center" flex={1} justifyContent="center">
-      <AnimatedImage
-        imageHeight={139}
-        imageUrl="https://picsum.photos/255/139"
-        imageWidth={255}
-        resizeMode="cover"
-      />
-      <Typography fontSize="xl">Image with Placeholder</Typography>
-    </Container>
-  );
-};
diff --git a/storybook/stories/ChatInput.stories.jsx b/storybook/stories/ChatInput.stories.jsx
index e82c0851..607e7269 100644
--- a/storybook/stories/ChatInput.stories.jsx
+++ b/storybook/stories/ChatInput.stories.jsx
@@ -1,12 +1,6 @@
 import React, { useRef } from "react";
 
-import {
-  ChatInput,
-  Button,
-  Typography,
-  AnimatedImage,
-  Container,
-} from "@components";
+import { ChatInput, Button, Typography, Container } from "@components";
 
 export const ChatInputs = () => {
   const chatInputRef = useRef();
@@ -57,16 +51,6 @@ export const ChatInputs = () => {
           suggestions={suggestions}
           toEmails={["oliver@example.com"]}
           value={value}
-          Attachments={
-            <Container alignItems="flex-start">
-              <AnimatedImage
-                imageHeight={30}
-                imageUrl="https://picsum.photos/255/139"
-                imageWidth={30}
-                resizeMode="cover"
-              />
-            </Container>
-          }
           onChangeText={setValue}
           onAddNote={() => {
             alert("On Add Note");
diff --git a/yarn.lock b/yarn.lock
index 6bf35090..6535ca2a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1265,7 +1265,7 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.6", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.17.8", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.6.tgz#c05e610dc228855dc92ef1b53d07389ed8ab521d"
   integrity sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==
@@ -2166,11 +2166,6 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/eslint-plugin/-/eslint-plugin-1.3.0.tgz#9e558170c106bbafaa1ef502bd8e6d4651012bf9"
   integrity sha512-+zDZ20NUnSWghj7Ku5aFphMzuM9JulqCW+aPXT6IfIXFbb8tzYTTOSeRFOtuekJ99ibW2fUCSsjuKNlwDIbHFg==
 
-"@react-native-community/hooks@^2.8.1":
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/@react-native-community/hooks/-/hooks-2.8.1.tgz#6e785431db49318048fdd14b601998437b6cc200"
-  integrity sha512-DCmCIC0Gn9m6K0Mlg2MwNmTxMEpBu5lTLsI6b/XUAv/vLGa6o+X7RhCai4FWeqkjCU36+ZOwaLzDo4NBWMXaoQ==
-
 "@react-native-community/slider@^4.1.12":
   version "4.4.4"
   resolved "https://registry.yarnpkg.com/@react-native-community/slider/-/slider-4.4.4.tgz#0b2168cd0f53683c27b36b4917d01514d6dda1bb"
@@ -2181,7 +2176,7 @@
   resolved "https://registry.yarnpkg.com/@react-native/assets/-/assets-1.0.0.tgz#c6f9bf63d274bafc8e970628de24986b30a55c8e"
   integrity sha512-KrwSpS1tKI70wuKl68DwJZYEvXktDHdZMG0k2AXD/rJVSlB23/X2CB2cutVR0HwNMJIal9HOUOBB2rVfa6UGtQ==
 
-"@react-native/normalize-color@*", "@react-native/normalize-color@^2.1.0":
+"@react-native/normalize-color@*":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@react-native/normalize-color/-/normalize-color-2.1.0.tgz#939b87a9849e81687d3640c5efa2a486ac266f91"
   integrity sha512-Z1jQI2NpdFJCVgpY+8Dq/Bt3d+YUi1928Q+/CZm/oh66fzM0RUl54vvuXlPJKybH4pdCZey1eDTPaLHkMPNgWA==
@@ -6842,13 +6837,6 @@ create-react-context@0.3.0:
     gud "^1.0.0"
     warning "^4.0.3"
 
-cross-fetch@^3.1.5:
-  version "3.1.8"
-  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.8.tgz#0327eba65fd68a7d119f8fb2bf9334a1a7956f82"
-  integrity sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==
-  dependencies:
-    node-fetch "^2.6.12"
-
 cross-spawn@^6.0.0:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -6896,13 +6884,6 @@ css-color-keywords@^1.0.0:
   resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
   integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
 
-css-in-js-utils@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz#640ae6a33646d401fc720c54fc61c42cd76ae2bb"
-  integrity sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==
-  dependencies:
-    hyphenate-style-name "^1.0.3"
-
 css-loader@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.6.0.tgz#2e4b2c7e6e2d27f8c8f28f61bffcd2e6c91ef645"
@@ -8494,11 +8475,6 @@ fast-levenshtein@^2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
-fast-loops@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/fast-loops/-/fast-loops-1.1.3.tgz#ce96adb86d07e7bf9b4822ab9c6fac9964981f75"
-  integrity sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g==
-
 fast-url-parser@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/fast-url-parser/-/fast-url-parser-1.1.3.tgz#f4af3ea9f34d8a271cf58ad2b3759f431f0b318d"
@@ -8539,11 +8515,6 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "2.1.1"
 
-fbjs-css-vars@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8"
-  integrity sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==
-
 fbjs@^0.8.4:
   version "0.8.18"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.18.tgz#9835e0addb9aca2eff53295cd79ca1cfc7c9662a"
@@ -8557,19 +8528,6 @@ fbjs@^0.8.4:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.30"
 
-fbjs@^3.0.4:
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-3.0.5.tgz#aa0edb7d5caa6340011790bd9249dbef8a81128d"
-  integrity sha512-ztsSx77JBtkuMrEypfhgc3cI0+0h+svqeie7xHbh1k/IKdcydnvadp/mUaGgjAOXQmQSxsqgaRhS3q9fy+1kxg==
-  dependencies:
-    cross-fetch "^3.1.5"
-    fbjs-css-vars "^1.0.0"
-    loose-envify "^1.0.0"
-    object-assign "^4.1.0"
-    promise "^7.1.1"
-    setimmediate "^1.0.5"
-    ua-parser-js "^1.0.35"
-
 fd-slicer@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
@@ -9723,11 +9681,6 @@ husky@^7.0.0:
   resolved "https://registry.yarnpkg.com/husky/-/husky-7.0.4.tgz#242048245dc49c8fb1bf0cc7cfb98dd722531535"
   integrity sha512-vbaCKN2QLtP/vD4yvs6iz6hBEo6wkSzs8HpRah1Z6aGmF2KW5PdYuAd7uX5a+OyBZHBhd+TFLqgjUgytQr4RvQ==
 
-hyphenate-style-name@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
-  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
-
 iconv-lite@0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -9878,14 +9831,6 @@ inline-style-parser@0.1.1:
   resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1"
   integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==
 
-inline-style-prefixer@^6.0.1:
-  version "6.0.4"
-  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-6.0.4.tgz#4290ed453ab0e4441583284ad86e41ad88384f44"
-  integrity sha512-FwXmZC2zbeeS7NzGjJ6pAiqRhXR0ugUShSNb6GApMl6da0/XGc4MOJsoWAywia52EEWbXNSy0pzkwz/+Y+swSg==
-  dependencies:
-    css-in-js-utils "^3.1.0"
-    fast-loops "^1.1.3"
-
 internal-slot@^1.0.2, internal-slot@^1.0.4, internal-slot@^1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.6.tgz#37e756098c4911c5e912b8edbf71ed3aa116f930"
@@ -11765,11 +11710,6 @@ memoize-one@^5.0.0, memoize-one@^5.2.1:
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
   integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
 
-memoize-one@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
-  integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
-
 memoizerific@^1.11.3:
   version "1.11.3"
   resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a"
@@ -12624,7 +12564,7 @@ node-fetch@^1.0.1:
     encoding "^0.1.11"
     is-stream "^1.0.1"
 
-node-fetch@^2.2.0, node-fetch@^2.6.0, node-fetch@^2.6.1, node-fetch@^2.6.12, node-fetch@^2.6.7:
+node-fetch@^2.2.0, node-fetch@^2.6.0, node-fetch@^2.6.1, node-fetch@^2.6.7:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
   integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
@@ -13593,7 +13533,7 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@@ -14162,10 +14102,10 @@ react-native-animatable@1.3.3:
   dependencies:
     prop-types "^15.7.2"
 
-react-native-calendars@^1.1285.0:
-  version "1.1302.0"
-  resolved "https://registry.yarnpkg.com/react-native-calendars/-/react-native-calendars-1.1302.0.tgz#1b81074d08a9aa5aadcd2fb546d08517d4974952"
-  integrity sha512-QZdkFYVKafxjc/oHmbmzyEhMkF0sWl+1hYd9FbKQFcf/c3D0K+sfG81A40C1YsOR8nxb1nq2OpsNT81CGd1L4Q==
+react-native-calendars@>=1.1313.0:
+  version "1.1314.0"
+  resolved "https://registry.yarnpkg.com/react-native-calendars/-/react-native-calendars-1.1314.0.tgz#4a318c385ae370bf782b79039c4c6f96abed29a7"
+  integrity sha512-4DLAVto8Qo9L3ggL2vsY9Gk8FFpJWtne8F/3wN8yUb7Xha9/SKS4B+vs7xlhWjKeqZUHws/Vi/q/6IZ8s60kcQ==
   dependencies:
     hoist-non-react-statics "^3.3.1"
     lodash "^4.17.15"
@@ -14200,11 +14140,6 @@ react-native-device-info@^10.3.0:
   resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-10.12.0.tgz#be4e71cbcc9a05e8643b1a419a4450d4cef9bbcc"
   integrity sha512-gnBkjyZNEqRd+5BNrdzuvmlraHTCH/to2x0Gp9rtDt0O9xWWW1MTYohUVWX9A0Ad2HVYcGanDCIvjWp4ngMZFg==
 
-react-native-fast-image@^8.6.3:
-  version "8.6.3"
-  resolved "https://registry.yarnpkg.com/react-native-fast-image/-/react-native-fast-image-8.6.3.tgz#6edc3f9190092a909d636d93eecbcc54a8822255"
-  integrity sha512-Sdw4ESidXCXOmQ9EcYguNY2swyoWmx53kym2zRsvi+VeFCHEdkO+WG1DK+6W81juot40bbfLNhkc63QnWtesNg==
-
 react-native-gesture-handler@^2.4.0:
   version "2.14.0"
   resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.14.0.tgz#d6aec0d8b2e55c67557fd6107e828c0a1a248be8"
@@ -14271,11 +14206,6 @@ react-native-reanimated@3.6.0:
     convert-source-map "^2.0.0"
     invariant "^2.2.4"
 
-react-native-safe-area-context@^3.3.2:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-3.4.1.tgz#c967a52903d55fe010b2428e5368b42f1debc0a7"
-  integrity sha512-xfpVd0CiZR7oBhuwJ2HcZMehg5bjha1Ohu1XHpcT+9ykula0TgovH2BNU0R5Krzf/jBR1LMjR6VabxdlUjqxcA==
-
 react-native-screens@^3.15.0:
   version "3.29.0"
   resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.29.0.tgz#1dee0326defbc1d4ef4e68287abb32a8e6b76b29"
@@ -14351,20 +14281,6 @@ react-native-web-image-loader@^0.1.1:
     loader-utils "^2.0.0"
     schema-utils "^2.6.6"
 
-react-native-web@^0.19.9:
-  version "0.19.9"
-  resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.19.9.tgz#6ee43e6c64d886b1d739f100fed07927541ee003"
-  integrity sha512-m69arZbS6FV+BNSKE6R/NQwUX+CzxCkYM7AJlSLlS8dz3BDzlaxG8Bzqtzv/r3r1YFowhnZLBXVKIwovKDw49g==
-  dependencies:
-    "@babel/runtime" "^7.18.6"
-    "@react-native/normalize-color" "^2.1.0"
-    fbjs "^3.0.4"
-    inline-style-prefixer "^6.0.1"
-    memoize-one "^6.0.0"
-    nullthrows "^1.1.1"
-    postcss-value-parser "^4.2.0"
-    styleq "^0.1.3"
-
 react-native-webview@^11.26.0:
   version "11.26.1"
   resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-11.26.1.tgz#658c09ed5162dc170b361e48c2dd26c9712879da"
@@ -16170,11 +16086,6 @@ styled-system@^5.1.5:
     "@styled-system/variant" "^5.1.5"
     object-assign "^4.1.1"
 
-styleq@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/styleq/-/styleq-0.1.3.tgz#8efb2892debd51ce7b31dc09c227ad920decab71"
-  integrity sha512-3ZUifmCDCQanjeej1f6kyl/BeP/Vae5EYkQ9iJfUm/QwZvlgnZzyflqAsAWYURdtea8Vkvswu2GrC57h3qffcA==
-
 sudo-prompt@^9.0.0:
   version "9.2.1"
   resolved "https://registry.yarnpkg.com/sudo-prompt/-/sudo-prompt-9.2.1.tgz#77efb84309c9ca489527a4e749f287e6bdd52afd"
@@ -16762,11 +16673,6 @@ ua-parser-js@^0.7.30:
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.37.tgz#e464e66dac2d33a7a1251d7d7a99d6157ec27832"
   integrity sha512-xV8kqRKM+jhMvcHWUKthV9fNebIzrNy//2O9ZwWcfiBFR5f25XVZPLlEajk/sf3Ra15V92isyQqnIEXRDaZWEA==
 
-ua-parser-js@^1.0.35:
-  version "1.0.37"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.37.tgz#b5dc7b163a5c1f0c510b08446aed4da92c46373f"
-  integrity sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==
-
 uglify-es@^3.1.9:
   version "3.3.9"
   resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"