Card component is converted to Typescript

lib/src/components/Card/Card.style.ts

@@ -0,0 +1,69 @@
+import { ViewStyle, TextStyle, StyleSheet, Dimensions } from "react-native";
+const { width: ScreenWidth } = Dimensions.get("window");
+
+interface Style {
+  contentContainer: ViewStyle;
+  topRightTextStyle: TextStyle;
+  bottomRightTextStyle: TextStyle;
+  topRightContainer: ViewStyle;
+  bottomRightContainer: ViewStyle;
+  shadowStyle: ViewStyle;
+}
+
+export const _container = (
+  containerHeight: number | undefined,
+  iconDisable: boolean,
+  borderRadius: number,
+  backgroundColor: string,
+): ViewStyle => ({
+  backgroundColor,
+  height: containerHeight,
+  width: ScreenWidth * 0.92,
+  borderRadius: borderRadius || 15,
+  overflow: iconDisable ? "visible" : "hidden",
+});
+
+export default StyleSheet.create<Style>({
+  contentContainer: {
+    margin: 16,
+  },
+  bottomRightContainer: {
+    bottom: -5,
+    opacity: 1,
+    position: "absolute",
+    alignSelf: "flex-end",
+    justifyContent: "flex-end",
+  },
+  topRightContainer: {
+    top: 0,
+    opacity: 1,
+    position: "absolute",
+    alignSelf: "flex-end",
+    justifyContent: "flex-end",
+  },
+  bottomRightTextStyle: {
+    fontSize: 20,
+    lineHeight: 22,
+    letterSpacing: 0,
+    color: "#505e80",
+    textAlign: "right",
+    alignContent: "flex-end",
+  },
+  topRightTextStyle: {
+    fontSize: 14,
+    lineHeight: 18,
+    letterSpacing: 0,
+    color: "#505e80",
+    textAlign: "right",
+    alignContent: "flex-end",
+  },
+  shadowStyle: {
+    shadowRadius: 8,
+    shadowOpacity: 0.2,
+    shadowColor: "#757575",
+    shadowOffset: {
+      width: 0,
+      height: 3,
+    },
+  },
+});

lib/src/components/Card/Card.tsx

@@ -0,0 +1,91 @@
+import * as React from "react";
+import { View, Text, StyleProp, ViewStyle, TextStyle } from "react-native";
+import Androw from "react-native-androw";
+import RNBounceable from "@freakycoder/react-native-bounceable";
+/**
+ * ? Local Imports
+ */
+import styles, { _container } from "./Card.style";
+import TextContainer from "./components/TextContainer/TextContainer";
+import IconContainer from "./components/IconContainer/IconContainer";
+
+type CustomStyleProp = StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>;
+type CustomTextStyleProp = StyleProp<TextStyle> | Array<StyleProp<TextStyle>>;
+
+interface IRNNewComponentProps {
+  style?: CustomStyleProp;
+  onPress?: () => void;
+  iconDisable?: boolean;
+  borderRadius?: number;
+  topRightText?: string;
+  backgroundColor?: string;
+  bottomRightText?: string;
+  containerHeight?: number;
+  topRightComponent?: JSX.Element;
+  bottomRightComponent?: JSX.Element;
+  shadowStyle?: CustomStyleProp;
+  topRightTextStyle?: CustomTextStyleProp;
+  bottomRightTextStyle?: CustomTextStyleProp;
+}
+
+const RNNewComponent: React.FC<IRNNewComponentProps> = ({
+  style,
+  onPress,
+  shadowStyle,
+  topRightText,
+  bottomRightText,
+  topRightTextStyle,
+  topRightComponent,
+  bottomRightTextStyle,
+  bottomRightComponent,
+  borderRadius = 15,
+  iconDisable = false,
+  backgroundColor = "#fff",
+  containerHeight = undefined,
+  ...rest
+}) => {
+  const renderTopRightComponent = () =>
+    topRightComponent || (
+      <View style={styles.topRightContainer}>
+        <Text style={[styles.topRightTextStyle, topRightTextStyle]}>
+          {topRightText}
+        </Text>
+      </View>
+    );
+
+  const renderBottomRightComponent = () =>
+    bottomRightComponent || (
+      <View style={styles.bottomRightContainer}>
+        <Text style={[styles.bottomRightTextStyle, bottomRightTextStyle]}>
+          {bottomRightText}
+        </Text>
+      </View>
+    );
+
+  return (
+    <Androw style={[styles.shadowStyle, shadowStyle]}>
+      <RNBounceable
+        {...rest}
+        style={[
+          _container(
+            containerHeight,
+            iconDisable,
+            borderRadius,
+            backgroundColor,
+          ),
+          style,
+        ]}
+        onPress={onPress}
+      >
+        <View style={styles.contentContainer}>
+          <IconContainer {...rest} />
+          <TextContainer {...rest} />
+          {renderTopRightComponent()}
+          {renderBottomRightComponent()}
+        </View>
+      </RNBounceable>
+    </Androw>
+  );
+};
+
+export default RNNewComponent;

lib/src/components/Card/components/TextContainer/TextContainer.tsx

@@ -12,26 +12,26 @@ type CustomStyleProp = StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>;
 type CustomTextStyleProp = StyleProp<TextStyle> | Array<StyleProp<TextStyle>>;
 
 interface ITextContainerProps {
-  title: string;
-  description: string;
+  title?: string;
+  description?: string;
   iconDisable?: boolean;
-  descriptionNumberOfLines: number;
-  style?: CustomStyleProp;
+  descriptionNumberOfLines?: number;
+  textContainerStyle?: CustomStyleProp;
   titleTextStyle?: CustomTextStyleProp;
   descriptionTextStyle?: CustomTextStyleProp;
 }
 
 const TextContainer: React.FC<ITextContainerProps> = ({
-  style,
   title,
   description,
   titleTextStyle,
+  textContainerStyle,
   iconDisable = false,
   descriptionTextStyle,
   descriptionNumberOfLines = 3,
 }) => {
   return (
-    <View style={[_container(iconDisable), style]}>
+    <View style={[_container(iconDisable), textContainerStyle]}>
       <Text style={[styles.titleTextStyle, titleTextStyle]}>{title}</Text>
       <Text
         numberOfLines={descriptionNumberOfLines}