Ready to publish

Author: WrathChaos

README.md

@@ -10,7 +10,11 @@
 
 <p align="center">
   <img alt="React Native Checkbox Card"
-        src="assets/Screenshots/typescript.jpg" />
+        src="assets/Screenshots/RN-Checkbox-Card.gif" />
+  <img alt="React Native Checkbox Card"
+        src="assets/Screenshots/RN-Checkbox-Card-2.gif" />
+  <img alt="React Native Checkbox Card"
+        src="assets/Screenshots/RN-Checkbox-Card-Light.gif" />
 </p>
 
 # Installation

assets/Screenshots/RN-Checkbox-Card-2.gif

@@ -1,40 +1,95 @@
 import React from "react";
-import { FlatList, StatusBar, SafeAreaView } from "react-native";
-
-import RNCheckboxCard from "./build/dist/RNCheckboxCard";
+import { View, Text, FlatList, StatusBar, SafeAreaView } from "react-native";
+import RNCheckboxCard from "react-native-checkbox-card";
 
 const staticData = [
   {
     id: 1,
     text: "Banana",
+    quantity: "(2)",
+  },
+  {
+    id: 2,
+    text: "Apple",
+    quantity: "(3)",
+  },
+  {
+    id: 3,
+    text: "Red wine",
+    quantity: "x1",
+  },
+  {
+    id: 4,
+    text: "Egg",
+    quantity: "x12",
+  },
+  {
+    id: 5,
+    text: "Flour",
+    quantity: "1 pack",
+  },
+
+  {
+    id: 6,
+    text: "Butter",
+    quantity: "1 whole",
+  },
+  {
+    id: 7,
+    text: "Brown rise",
+    quantity: "2 kg",
+  },
+  {
+    id: 8,
+    text: "Tomato sauce",
+    quantity: "x2",
   },
 ];
 
 const App = () => {
   const renderItem = (data: any) => {
-    const { text, id } = data.item;
+    const { text, quantity, id } = data.item;
 
     return (
-      <RNCheckboxCard
-        darkMode
-        text={text}
-        onPress={(checked: boolean) => console.log("Checked: ", checked)}
-      />
+      <View style={{ marginTop: 16 }}>
+        <RNCheckboxCard
+          // darkMode
+          text={text}
+          // quantity={quantity}
+          // enableQuantityText
+          onPress={(checked: boolean) => console.log("Checked: ", checked)}
+        />
+      </View>
     );
   };
 
+  const renderHeader = () => (
+    <View style={{ marginLeft: 24 }}>
+      <Text style={{ fontSize: 32, color: "#1b1b1b", fontWeight: "600" }}>
+        Shopping List
+      </Text>
+      <Text style={{ color: "#818181", fontSize: 16 }}>
+        Your daily shopping list
+      </Text>
+    </View>
+  );
+
   return (
     <>
-      <StatusBar barStyle="light-content" />
+      <StatusBar barStyle="dark-content" />
       <SafeAreaView
         style={{
           flex: 1,
-          alignItems: "center",
           justifyContent: "center",
-          backgroundColor: "#19191a",
+          backgroundColor: "#edf0f1",
         }}
       >
-        <FlatList data={staticData} renderItem={renderItem} />
+        {renderHeader()}
+        <FlatList
+          data={staticData}
+          style={{ marginTop: 24 }}
+          renderItem={renderItem}
+        />
       </SafeAreaView>
     </>
   );

assets/Screenshots/RN-Checkbox-Card-Light.gif

@@ -10,6 +10,7 @@ const { width: ScreenWidth } = Dimensions.get("window");
 interface Style {
   container: ViewStyle;
   rightIconContainer: ViewStyle;
+  textContainer: TextStyle;
   sortIconImageStyle: ImageStyle;
   quantityTextStyle: TextStyle;
   checkIconImageStyle: ImageStyle;
@@ -36,7 +37,6 @@ export const _textStyle = (
   checkedTextColor: string,
   uncheckedTextColor: string,
 ): TextStyle => ({
-  width: "80%",
   fontSize: 16,
   marginLeft: 16,
   fontWeight: "600",
@@ -74,6 +74,9 @@ export default StyleSheet.create<Style>({
     width: 10,
     height: 30,
   },
+  textContainer: {
+    width: "80%",
+  },
   quantityTextStyle: {
     color: "#ccc",
     marginLeft: 16,

assets/Screenshots/RN-Checkbox-Card.gif

@@ -126,7 +126,7 @@ export default class RNCheckboxCard extends React.Component<
       enableQuantityText = false,
     } = this.props;
     return (
-      <View>
+      <View style={styles.textContainer}>
         <Text
           numberOfLines={2}
           style={[

assets/Screenshots/typescript.jpg

@@ -9,7 +9,7 @@ type ThemeColorsType = {
 export const ThemeColors: ThemeColorsType = {
   light: {
     borderColor: "#797979",
-    backgroundColor: "#e5e5e5",
+    backgroundColor: "#fff",
     checkedTextColor: "#8b8ca5",
     uncheckedTextColor: "#2b2b2c",
   },