More customization

Author: kuraydev

README.md

@@ -34,7 +34,7 @@ npm i @freakycoder/react-native-empty-state
 ## Import
 
 ```jsx
-import MyComponent from "@freakycoder/react-native-empty-state";
+import EmptyState from "@freakycoder/react-native-empty-state";
 ```
 
 ## Fundamental Usage
@@ -64,24 +64,27 @@ should work of the example project.
 
 ## Fundamentals
 
-| Property    |  Type  |  Default  | Description           |
-| ----------- | :----: | :-------: | --------------------- |
-| title       | string | undefined | change the title      |
-| description | string | undefined | change the descrition |
+| Property    |  Type  |  Default  | Description            |
+| ----------- | :----: | :-------: | ---------------------- |
+| title       | string | undefined | change the title       |
+| description | string | undefined | change the description |
 
 ## Customization (Optionals)
 
-| Property             |   Type    |  Default  | Description                                                            |
-| -------------------- | :-------: | :-------: | ---------------------------------------------------------------------- |
-| enableButton         |  boolean  |   false   | let you enable the button (must use it for button)                     |
-| onPress              | function  | undefined | set your own logic for the button functionality when it is pressed     |
-| buttonText           |  string   | undefined | change the button's text                                               |
-| style                | ViewStyle |  default  | set or override the style object for the main container                |
-| buttonStyle          | ViewStyle |  default  | set or override the style object for the button style                  |
-| titleTextStyle       | TextStyle |  default  | set or override the style object for the title text style              |
-| buttonTextStyle      | TextStyle |  default  | set or override the style object for the button's text style           |
-| descriptionTextStyle | TextStyle |  default  | set or override the style object for the description text style        |
-| ImageComponent       |   Image   |  default  | set your own component instead of default react-native Image component |
+| Property                  |    Type    |  Default  | Description                                                            |
+| ------------------------- | :--------: | :-------: | ---------------------------------------------------------------------- |
+| enableButton              |  boolean   |   false   | let you enable the button (must use it for button)                     |
+| onPress                   |  function  | undefined | set your own logic for the button functionality when it is pressed     |
+| buttonText                |   string   | undefined | change the button's text                                               |
+| style                     | ViewStyle  |  default  | set or override the style object for the main container                |
+| buttonStyle               | ViewStyle  |  default  | set or override the style object for the button style                  |
+| titleTextStyle            | TextStyle  |  default  | set or override the style object for the title text style              |
+| buttonTextStyle           | TextStyle  |  default  | set or override the style object for the button's text style           |
+| descriptionTextStyle      | TextStyle  |  default  | set or override the style object for the description text style        |
+| containerGlueStyle        | ViewStyle  |  default  | set or override the style object for the container glue style          |
+| descriptionContainerStyle | ViewStyle  |  default  | set or override the style object for the description container style   |
+| imageStyle                | ImageStyle |  default  | set or override the style object for the image style                   |
+| ImageComponent            |   Image    |  default  | set your own component instead of default react-native Image component |
 
 ## Future Plans
 

lib/EmptyState.tsx

@@ -1,5 +1,12 @@
 import * as React from "react";
-import { Text, Image, View, ViewStyle, TextStyle } from "react-native";
+import {
+  Text,
+  Image,
+  View,
+  ViewStyle,
+  TextStyle,
+  ImageStyle,
+} from "react-native";
 import RNBounceable from "@freakycoder/react-native-bounceable";
 /**
  * ? Local Imports
@@ -18,9 +25,12 @@ export interface IEmptyStateProps {
   ImageComponent?: any;
   style?: ViewStyle;
   buttonStyle?: ViewStyle;
+  imageStyle?: ImageStyle;
   titleTextStyle?: TextStyle;
   buttonTextStyle?: TextStyle;
+  containerGlueStyle?: ViewStyle;
   descriptionTextStyle?: TextStyle;
+  descriptionContainerStyle?: ViewStyle;
   imageSource: ISource;
   onPress?: () => void;
 }
@@ -32,10 +42,13 @@ const EmptyState = (props: IEmptyStateProps) => {
     description,
     enableButton = false,
     style,
+    imageStyle,
     buttonStyle,
     titleTextStyle,
     buttonTextStyle,
+    containerGlueStyle,
     descriptionTextStyle,
+    descriptionContainerStyle,
     ImageComponent = Image,
     imageSource,
     onPress,
@@ -45,11 +58,11 @@ const EmptyState = (props: IEmptyStateProps) => {
       <ImageComponent
         resizeMode="contain"
         source={imageSource}
-        style={styles.imageStyle}
+        style={[styles.imageStyle, imageStyle]}
       />
-      <View style={styles.containerGlue}>
+      <View style={[styles.containerGlue, containerGlueStyle]}>
         <Text style={[styles.titleTextStyle, titleTextStyle]}>{title}</Text>
-        <View style={styles.descriptionContainer}>
+        <View style={[styles.descriptionContainer, descriptionContainerStyle]}>
           <Text style={[styles.descriptionTextStyle, descriptionTextStyle]}>
             {description}
           </Text>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@freakycoder/react-native-empty-state",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Empty State library which is fully customizable and simple for any state view use-cases",
   "main": "./build/dist/EmptyState.js",
   "repository": "git@github.com:WrathChaos/react-native-empty-state.git",