diff --git a/README.md b/README.md
index 77b77ab..af03af4 100644
--- a/README.md
+++ b/README.md
@@ -48,12 +48,8 @@ npm i WrathChaos/react-native-dynamic-vector-icons#expo
 ###### IMPORTANT! You need install them.
 
 ```js
-"react": ">= 16.x.x",
-"react-native": ">= 0.55.x",
 "react-native-spinkit": ">= 1.5.0",
-"react-native-vector-icons": ">= 6.x.x",
-"react-native-dynamic-vector-icons": ">= x.x.x",
-"@freakycoder/react-native-helpers": ">= 0.1.0",
+"@freakycoder/react-native-bounceable": ">= 0.2.2",
 ```
 
 # Usage
@@ -78,13 +74,8 @@ There are two modes in the library:
 ```jsx
 <SearchBar
   placeholder="Search here"
-  onChangeText={(text) => {
-    console.log(text);
-  }}
-  onPressCancel={() => {
-    this.filterList("");
-  }}
   onPress={() => alert("onPress")}
+  onChangeText={(text) => console.log(text)}
 />
 ```
 
@@ -100,12 +91,9 @@ You can check the example for the advanced usage
   cancelIconColor="#c6c6c6"
   backgroundColor="#353d5e"
   placeholder="Search here"
-  onChangeText={(text) => {
-    this.filterList(text);
-  }}
-  onPressCancel={() => {
-    this.filterList("");
-  }}
+  onChangeText={(text) => this.filterList(text)}
+  onSearchPress={() => console.log("Search Icon is pressed")}
+  onClearPress={() => this.filterList("")}
   onPress={() => alert("onPress")}
 />
 ```
@@ -160,43 +148,30 @@ export default class Test extends Component {
 
 ### Configuration - Props
 
-| Property            |      Type       |      Default      | Description                                                                                           |
-| ------------------- | :-------------: | :---------------: | ----------------------------------------------------------------------------------------------------- |
-| autoFocus           |     boolean     |       true        | change the autoFocus mode for the TextInput                                                           |
-| backgroundColor     |      color      |       #fff        | change the background color of the search bar                                                         |
-| borderRadius        |     number      |        10         | change the border radius of the search bar                                                            |
-| cancelButtonDisable |     boolean     |       false       | disable cancel button component                                                                       |
-| cancelComponent     |    component    |     component     | set your own component instead of cancel component                                                    |
-| cancelIconColor     |      color      |      #b3b6c3      | change the cancel icon color                                                                          |
-| cancelIconComponent |    component    |       Icon        | set your own component instead of Icon for the cancel component (right component)                     |
-| cancelIconName      |     string      |       clear       | change the cancel icon                                                                                |
-| cancelIconSize      |     number      |        23         | change the cancel icon size                                                                           |
-| cancelIconType      |     string      |   MaterialIcons   | change the cancel icon style                                                                          |
-| fontColor           |      color      |      #b3b6c3      | change the font color                                                                                 |
-| fontFamily          |     string      |     undefined     | set the font family for the text input in the search bar                                              |
-| fontSize            |     number      |        13         | change the font size                                                                                  |
-| height              | string / number |        35         | change the height of the search bar                                                                   |
-| iconColor           |      color      |      #807DE7      | change the icon color                                                                                 |
-| iconComponent       |    component    |       Icon        | set your own component instead of Icon                                                                |
-| iconName            |     string      |      search       | change the icon                                                                                       |
-| iconSize            |     number      |        20         | change the icon size                                                                                  |
-| iconType            |     string      |     Octicons      | change the icon style                                                                                 |
-| noExtraMargin       |     boolean     |       false       | remove extra padding on iPhone X devices                                                              |
-| onChangeText        |    function     |     function      | set your own function for the onChangeText logic                                                      |
-| onPress             |    function     |     function      | set your own function for the onPress functionality                                                   |
-| onPressCancel       |    function     |     function      | set your own function for the cancel button's onPress functionality                                   |
-| onPressToFocus      |     boolean     |       false       | when enable it, onPress will automatically focus on the TextInput and opens the soft virtual keyboard |
-| placeholder         |     string      |       null        | set your own placeholder string                                                                       |
-| shadowColor         |      color      |      #757575      | change the shadow color                                                                               |
-| shadowStyle         |      style      |   shadow style    | set your own shadow style                                                                             |
-| spinnerColor        |      color      |      #fdfdfd      | change the spinner color                                                                              |
-| spinnerSize         |     number      |      default      | change the spinner size                                                                               |
-| spinnerType         |     string      |      Circle       | change the spinner type                                                                               |
-| spinnerVisibility   |     boolean     |       false       | change the spinner visibility                                                                         |
-| textInputComponent  |    component    | Text OR TextInput | set your own component instead of Text OR TextInput for the center component                          |
-| textInputDisable    |     boolean     |       false       | disable the text input, and Text component will be available instead                                  |
-| textInputValue      |     string      |       value       | set the value of the text input                                                                       |
-| width               | string / number | ScreenWidth\*0.93 | change the width of the search bar                                                                    |
+| Property              |    Type    |     Default      | Description                                                              |
+| --------------------- | :--------: | :--------------: | ------------------------------------------------------------------------ |
+| style                 | ViewStyle  |     default      | set or override the style object for the main search view                |
+| darkMode              |  boolean   |      false       | enable the dark mode                                                     |
+| onChangeText          |  function  |     function     | set your own function for the onChangeText logic                         |
+| onPress               |  function  |     function     | set your own function for the onPress functionality                      |
+| onSearchPress         |  function  |     function     | set your own function for the **search** button's onPress functionality  |
+| onClearPress          |  function  |     function     | set your own function for the **clear** button's onPress functionality   |
+| onBlur                |  function  |     function     | set your own function for the text input's onBlur functionality          |
+| onFocus               |  function  |     function     | set your own function for the text input's onBlur functionality          |
+| textInputStyle        | TextStyle  |     default      | set or override the style object for the text input                      |
+| searchIconImageStyle  | ImageStyle |     default      | set or override the style object for the search icon image style         |
+| clearIconImageStyle   | ImageStyle |     default      | set or override the style object for the clear icon image style          |
+| ImageComponent        | component  |      Image       | set your own Image component instead of react-native's default Image one |
+| searchIconComponent   | component  |     default      | set your own component instead of Icon for the **search** component      |
+| clearIconComponent    | component  |     default      | set your own component instead of Icon for the **clear** component       |
+| searchIconImageSource |  ISource   |     default      | change the search icon image source                                      |
+| clearIconImageSource  |  ISource   |     default      | change the clear icon image source                                       |
+| clearIconImageSource  |  ISource   |     default      | change the clear icon image source                                       |
+| placeholder           |   string   | "Search here..." | set your own placeholder string                                          |
+| spinnerColor          |   color    |     #fdfdfd      | change the spinner color                                                 |
+| spinnerSize           |   number   |     default      | change the spinner size                                                  |
+| spinnerType           |   string   |      Circle      | change the spinner type                                                  |
+| spinnerVisibility     |  boolean   |      false       | change the spinner visibility                                            |
 
 ## Expo Compatibility
 
@@ -218,7 +193,7 @@ Dynamic Search Bar is usable with Expo. You just need to add a peer dependency:
 apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
 ```
 
-#### Animations are not working on the Android like the example ?
+#### Animations are not working on the Android like the example?
 
 -> You need to enable experimental LayoutAnimation on the android. Here is how to do it:
 
@@ -227,7 +202,6 @@ import { UIManager } from 'react-native';
 
 constructor() {
     super();
-
     if (Platform.OS === 'android') {
       UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
     }
@@ -236,7 +210,8 @@ constructor() {
 
 ### Roadmap
 
-- [ ] Full code refactoring with better Typescript
+- [x] ~~Completely rewritten with better coding and less dependency~~
+- [x] ~~Full code refactoring with better Typescript~~
 - [x] ~~LICENSE~~
 - [x] ~~Write an article about the lib on Medium~~
 - [x] ~~Typescript Challenge!~~
diff --git a/example/App.tsx b/example/App.tsx
index d89858e..e91c1a8 100644
--- a/example/App.tsx
+++ b/example/App.tsx
@@ -7,7 +7,7 @@ import { ScreenWidth } from "@freakycoder/react-native-helpers";
 /**
  * ? Local Imports
  */
-import SearchBar from "./lib/SearchBar";
+import SearchBar from "./build/dist/SearchBar";
 import styles, { centerSubtitleStyle } from "./styles";
 // Static Data
 import staticData from "./src/data/staticData";
@@ -82,7 +82,7 @@ export default class App extends Component<IProps, IState> {
         centerSubtitle={item.change}
         shadowStyle={styles.cardShadowStyle}
         centerSubtitleStyle={centerSubtitleStyle(item)}
-        // rightComponent={this.renderRightComponent(item)}
+        rightComponent={this.renderRightComponent(item)}
       />
     );
   }
@@ -94,18 +94,17 @@ export default class App extends Component<IProps, IState> {
         <StatusBar barStyle={"light-content"} />
         <View style={styles.container}>
           <SearchBar
-            // style={{
-            //   height: 50,
-            // }}
+            darkMode
             placeholder="Search"
             spinnerVisibility={spinnerVisibility}
+            style={{ backgroundColor: "#353d5e" }}
             onChangeText={(text) => {
               if (text.length === 0)
                 this.setState({ spinnerVisibility: false });
               else this.setState({ spinnerVisibility: true });
               this.filterList(text);
             }}
-            onCancelPress={() => {
+            onClearPress={() => {
               this.filterList("");
             }}
           />
diff --git a/example/lib/SearchBar.style.ts b/example/lib/SearchBar.style.ts
deleted file mode 100644
index f9de01b..0000000
--- a/example/lib/SearchBar.style.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { ViewStyle, ImageStyle, TextStyle, StyleSheet } from "react-native";
-
-interface Style {
-  container: ViewStyle;
-  searchContainer: ViewStyle;
-  searchIconImageStyle: ImageStyle;
-  textInputStyle: TextStyle;
-  cancelIconImageStyle: ImageStyle;
-  cancelIconContainer: ViewStyle;
-  spinnerContainer: ViewStyle;
-}
-
-export default StyleSheet.create<Style>({
-  container: {
-    height: 40,
-    width: "90%",
-    borderRadius: 12,
-    alignSelf: "center",
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: "#fff",
-    shadowRadius: 8,
-    shadowOpacity: 0.3,
-    shadowColor: "#757575",
-    shadowOffset: {
-      width: 0,
-      height: 3,
-    },
-  },
-  searchContainer: {
-    marginLeft: 12,
-  },
-  searchIconImageStyle: {
-    width: 18,
-    height: 18,
-  },
-  textInputStyle: {
-    width: "80%",
-    marginLeft: 12,
-    color: "#19191a",
-  },
-  cancelIconImageStyle: {
-    width: 18,
-    height: 18,
-  },
-  cancelIconContainer: {
-    marginRight: 8,
-    marginLeft: "auto",
-  },
-  spinnerContainer: {
-    marginLeft: 12,
-  },
-});
diff --git a/example/lib/SearchBar.tsx b/example/lib/SearchBar.tsx
deleted file mode 100644
index 8ab7620..0000000
--- a/example/lib/SearchBar.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import React, { Component } from "react";
-import {
-  Text,
-  View,
-  Image,
-  TextInput,
-  ViewStyle,
-  TextStyle,
-  ImageStyle,
-  TextInputProps,
-  TouchableWithoutFeedbackProps,
-} from "react-native";
-import Spinner from "react-native-spinkit";
-import RNBounceable from "@freakycoder/react-native-bounceable";
-/**
- * ? Local Imports
- */
-import styles from "./SearchBar.style";
-
-const defaultSearchIcon = require("./local-assets/search-icon.png");
-const defaultCancelIcon = require("./local-assets/cancel-icon.png");
-
-export interface ISource {
-  source: string | { uri: string };
-}
-export interface ISearchBarProps
-  extends TouchableWithoutFeedbackProps,
-    TextInputProps {
-  placeholder?: string;
-  ImageComponent?: any;
-  spinnerType?: string;
-  spinnerSize?: number;
-  spinnerColor?: string;
-  spinnerVisibility?: boolean;
-  searchIconComponent?: React.ReactChild;
-  cancelIconComponent?: React.ReactChild;
-  searchIconImageSource?: ISource;
-  cancelIconImageSource?: ISource;
-  style?: ViewStyle | Array<ViewStyle> | undefined;
-  textInputStyle?: TextStyle | Array<TextStyle>;
-  searchIconImageStyle?: ImageStyle | Array<ImageStyle>;
-  cancelIconImageStyle?: ImageStyle | Array<ImageStyle>;
-  onBlur?: () => void;
-  onFocus?: () => void;
-  onPress?: () => void;
-  onSearchPress?: () => void;
-  onCancelPress?: () => void;
-}
-
-interface IState {}
-
-export default class SearchBar extends Component<ISearchBarProps, IState> {
-  inputRef: TextInput | null = null;
-
-  handleSearchBarPress = () => {
-    this.inputRef?.focus();
-    this.props.onPress && this.props.onPress();
-  };
-
-  handleOnCancelPress = () => {
-    this.inputRef?.clear();
-    this.props.onCancelPress && this.props.onCancelPress();
-  };
-
-  /* -------------------------------------------------------------------------- */
-  /*                               Render Methods                               */
-  /* -------------------------------------------------------------------------- */
-
-  renderSpinner = () => {
-    const {
-      spinnerSize = 15,
-      spinnerType = "FadingCircleAlt",
-      spinnerColor = "#19191a",
-      spinnerVisibility = false,
-    } = this.props;
-    return (
-      <View style={styles.spinnerContainer}>
-        <Spinner
-          size={spinnerSize}
-          type={spinnerType}
-          color={spinnerColor}
-          isVisible={spinnerVisibility}
-        />
-      </View>
-    );
-  };
-
-  renderSearchIcon = () => {
-    const {
-      onSearchPress,
-      searchIconComponent,
-      searchIconImageStyle,
-      ImageComponent = Image,
-      searchIconImageSource = defaultSearchIcon,
-    } = this.props;
-    return (
-      <RNBounceable style={styles.searchContainer} onPress={onSearchPress}>
-        {searchIconComponent || (
-          <ImageComponent
-            resizeMode="contain"
-            source={searchIconImageSource}
-            style={[styles.searchIconImageStyle, searchIconImageStyle]}
-          />
-        )}
-      </RNBounceable>
-    );
-  };
-
-  renderTextInput = () => {
-    const {
-      onBlur,
-      onFocus,
-      textInputStyle,
-      placeholder = "Search here...",
-    } = this.props;
-    return (
-      <TextInput
-        {...this.props}
-        onBlur={onBlur}
-        onFocus={onFocus}
-        ref={(ref) => (this.inputRef = ref)}
-        style={[styles.textInputStyle, textInputStyle]}
-        placeholder={placeholder}
-      />
-    );
-  };
-
-  renderCancelIcon = () => {
-    const {
-      cancelIconComponent,
-      cancelIconImageStyle,
-      ImageComponent = Image,
-      cancelIconImageSource = defaultCancelIcon,
-    } = this.props;
-    return (
-      <RNBounceable
-        bounceEffect={0.8}
-        style={styles.cancelIconContainer}
-        onPress={this.handleOnCancelPress}
-      >
-        {cancelIconComponent || (
-          <ImageComponent
-            resizeMode="contain"
-            source={cancelIconImageSource}
-            style={[styles.cancelIconImageStyle, cancelIconImageStyle]}
-          />
-        )}
-      </RNBounceable>
-    );
-  };
-
-  render() {
-    const { style, spinnerVisibility } = this.props;
-    return (
-      <RNBounceable
-        {...this.props}
-        bounceEffect={0.97}
-        style={[styles.container, style]}
-        onPress={this.handleSearchBarPress}
-      >
-        {spinnerVisibility ? this.renderSpinner() : this.renderSearchIcon()}
-        {this.renderTextInput()}
-        {this.renderCancelIcon()}
-      </RNBounceable>
-    );
-  }
-}
diff --git a/example/lib/local-assets/cancel-icon.png b/example/lib/local-assets/cancel-icon.png
deleted file mode 100644
index e4ff3b9..0000000
Binary files a/example/lib/local-assets/cancel-icon.png and /dev/null differ
diff --git a/example/lib/local-assets/search-icon.png b/example/lib/local-assets/search-icon.png
deleted file mode 100644
index 553185b..0000000
Binary files a/example/lib/local-assets/search-icon.png and /dev/null differ
diff --git a/lib/SearchBar.style.ts b/lib/SearchBar.style.ts
index f9de01b..580ea5e 100644
--- a/lib/SearchBar.style.ts
+++ b/lib/SearchBar.style.ts
@@ -1,32 +1,36 @@
 import { ViewStyle, ImageStyle, TextStyle, StyleSheet } from "react-native";
 
 interface Style {
-  container: ViewStyle;
   searchContainer: ViewStyle;
   searchIconImageStyle: ImageStyle;
-  textInputStyle: TextStyle;
-  cancelIconImageStyle: ImageStyle;
-  cancelIconContainer: ViewStyle;
+  clearIconImageStyle: ImageStyle;
+  clearIconContainer: ViewStyle;
   spinnerContainer: ViewStyle;
 }
+export const _container = (darkMode: boolean): ViewStyle => ({
+  height: 40,
+  width: "90%",
+  borderRadius: 12,
+  alignSelf: "center",
+  flexDirection: "row",
+  alignItems: "center",
+  backgroundColor: darkMode ? "#19191a" : "#fdfdfd",
+  shadowColor: darkMode ? "#19191a" : "#757575",
+  shadowRadius: 8,
+  shadowOpacity: 0.3,
+  shadowOffset: {
+    width: 0,
+    height: 3,
+  },
+});
+
+export const _textInputStyle = (darkMode: boolean): TextStyle => ({
+  width: "80%",
+  marginLeft: 12,
+  color: darkMode ? "#fdfdfd" : "#19191a",
+});
 
 export default StyleSheet.create<Style>({
-  container: {
-    height: 40,
-    width: "90%",
-    borderRadius: 12,
-    alignSelf: "center",
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: "#fff",
-    shadowRadius: 8,
-    shadowOpacity: 0.3,
-    shadowColor: "#757575",
-    shadowOffset: {
-      width: 0,
-      height: 3,
-    },
-  },
   searchContainer: {
     marginLeft: 12,
   },
@@ -34,17 +38,12 @@ export default StyleSheet.create<Style>({
     width: 18,
     height: 18,
   },
-  textInputStyle: {
-    width: "80%",
-    marginLeft: 12,
-    color: "#19191a",
-  },
-  cancelIconImageStyle: {
-    width: 18,
-    height: 18,
+  clearIconImageStyle: {
+    width: 15,
+    height: 15,
   },
-  cancelIconContainer: {
-    marginRight: 8,
+  clearIconContainer: {
+    marginRight: 12,
     marginLeft: "auto",
   },
   spinnerContainer: {
diff --git a/lib/SearchBar.tsx b/lib/SearchBar.tsx
index 8ab7620..c8390f6 100644
--- a/lib/SearchBar.tsx
+++ b/lib/SearchBar.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import * as React from "react";
 import {
   Text,
   View,
@@ -15,10 +15,12 @@ import RNBounceable from "@freakycoder/react-native-bounceable";
 /**
  * ? Local Imports
  */
-import styles from "./SearchBar.style";
+import styles, { _container, _textInputStyle } from "./SearchBar.style";
 
 const defaultSearchIcon = require("./local-assets/search-icon.png");
-const defaultCancelIcon = require("./local-assets/cancel-icon.png");
+const whiteSearchIcon = require("./local-assets/search-icon-white.png");
+const defaultClearIcon = require("./local-assets/clear-icon.png");
+const whiteClearIcon = require("./local-assets/clear-icon-white.png");
 
 export interface ISource {
   source: string | { uri: string };
@@ -26,6 +28,7 @@ export interface ISource {
 export interface ISearchBarProps
   extends TouchableWithoutFeedbackProps,
     TextInputProps {
+  darkMode?: boolean;
   placeholder?: string;
   ImageComponent?: any;
   spinnerType?: string;
@@ -33,23 +36,26 @@ export interface ISearchBarProps
   spinnerColor?: string;
   spinnerVisibility?: boolean;
   searchIconComponent?: React.ReactChild;
-  cancelIconComponent?: React.ReactChild;
+  clearIconComponent?: React.ReactChild;
   searchIconImageSource?: ISource;
-  cancelIconImageSource?: ISource;
+  clearIconImageSource?: ISource;
   style?: ViewStyle | Array<ViewStyle> | undefined;
   textInputStyle?: TextStyle | Array<TextStyle>;
   searchIconImageStyle?: ImageStyle | Array<ImageStyle>;
-  cancelIconImageStyle?: ImageStyle | Array<ImageStyle>;
+  clearIconImageStyle?: ImageStyle | Array<ImageStyle>;
   onBlur?: () => void;
   onFocus?: () => void;
   onPress?: () => void;
   onSearchPress?: () => void;
-  onCancelPress?: () => void;
+  onClearPress?: () => void;
 }
 
 interface IState {}
 
-export default class SearchBar extends Component<ISearchBarProps, IState> {
+export default class SearchBar extends React.Component<
+  ISearchBarProps,
+  IState
+> {
   inputRef: TextInput | null = null;
 
   handleSearchBarPress = () => {
@@ -57,9 +63,9 @@ export default class SearchBar extends Component<ISearchBarProps, IState> {
     this.props.onPress && this.props.onPress();
   };
 
-  handleOnCancelPress = () => {
+  handleOnClearPress = () => {
     this.inputRef?.clear();
-    this.props.onCancelPress && this.props.onCancelPress();
+    this.props.onClearPress && this.props.onClearPress();
   };
 
   /* -------------------------------------------------------------------------- */
@@ -68,9 +74,10 @@ export default class SearchBar extends Component<ISearchBarProps, IState> {
 
   renderSpinner = () => {
     const {
+      darkMode = false,
       spinnerSize = 15,
       spinnerType = "FadingCircleAlt",
-      spinnerColor = "#19191a",
+      spinnerColor = darkMode ? "#fdfdfd" : "#19191a",
       spinnerVisibility = false,
     } = this.props;
     return (
@@ -88,10 +95,11 @@ export default class SearchBar extends Component<ISearchBarProps, IState> {
   renderSearchIcon = () => {
     const {
       onSearchPress,
+      darkMode = false,
       searchIconComponent,
       searchIconImageStyle,
       ImageComponent = Image,
-      searchIconImageSource = defaultSearchIcon,
+      searchIconImageSource = darkMode ? whiteSearchIcon : defaultSearchIcon,
     } = this.props;
     return (
       <RNBounceable style={styles.searchContainer} onPress={onSearchPress}>
@@ -111,38 +119,41 @@ export default class SearchBar extends Component<ISearchBarProps, IState> {
       onBlur,
       onFocus,
       textInputStyle,
+      darkMode = false,
       placeholder = "Search here...",
     } = this.props;
     return (
       <TextInput
+        placeholderTextColor={darkMode ? "#fdfdfd" : "#19191a"}
         {...this.props}
         onBlur={onBlur}
         onFocus={onFocus}
         ref={(ref) => (this.inputRef = ref)}
-        style={[styles.textInputStyle, textInputStyle]}
+        style={[_textInputStyle(darkMode), textInputStyle]}
         placeholder={placeholder}
       />
     );
   };
 
-  renderCancelIcon = () => {
+  renderClearIcon = () => {
     const {
-      cancelIconComponent,
-      cancelIconImageStyle,
+      darkMode = false,
+      clearIconComponent,
+      clearIconImageStyle,
       ImageComponent = Image,
-      cancelIconImageSource = defaultCancelIcon,
+      clearIconImageSource = darkMode ? whiteClearIcon : defaultClearIcon,
     } = this.props;
     return (
       <RNBounceable
         bounceEffect={0.8}
-        style={styles.cancelIconContainer}
-        onPress={this.handleOnCancelPress}
+        style={styles.clearIconContainer}
+        onPress={this.handleOnClearPress}
       >
-        {cancelIconComponent || (
+        {clearIconComponent || (
           <ImageComponent
             resizeMode="contain"
-            source={cancelIconImageSource}
-            style={[styles.cancelIconImageStyle, cancelIconImageStyle]}
+            source={clearIconImageSource}
+            style={[styles.clearIconImageStyle, clearIconImageStyle]}
           />
         )}
       </RNBounceable>
@@ -150,17 +161,17 @@ export default class SearchBar extends Component<ISearchBarProps, IState> {
   };
 
   render() {
-    const { style, spinnerVisibility } = this.props;
+    const { style, darkMode = false, spinnerVisibility } = this.props;
     return (
       <RNBounceable
         {...this.props}
         bounceEffect={0.97}
-        style={[styles.container, style]}
+        style={[_container(darkMode), style]}
         onPress={this.handleSearchBarPress}
       >
         {spinnerVisibility ? this.renderSpinner() : this.renderSearchIcon()}
         {this.renderTextInput()}
-        {this.renderCancelIcon()}
+        {this.renderClearIcon()}
       </RNBounceable>
     );
   }
diff --git a/lib/local-assets/cancel-icon.png b/lib/local-assets/cancel-icon.png
deleted file mode 100644
index e4ff3b9..0000000
Binary files a/lib/local-assets/cancel-icon.png and /dev/null differ
diff --git a/lib/local-assets/clear-icon-white.png b/lib/local-assets/clear-icon-white.png
new file mode 100644
index 0000000..9259c72
Binary files /dev/null and b/lib/local-assets/clear-icon-white.png differ
diff --git a/lib/local-assets/clear-icon.png b/lib/local-assets/clear-icon.png
new file mode 100644
index 0000000..1247862
Binary files /dev/null and b/lib/local-assets/clear-icon.png differ
diff --git a/lib/local-assets/search-icon-white.png b/lib/local-assets/search-icon-white.png
new file mode 100644
index 0000000..8b5e837
Binary files /dev/null and b/lib/local-assets/search-icon-white.png differ
diff --git a/package.json b/package.json
index 0580546..3b44cf3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-dynamic-search-bar",
-  "version": "1.4.0",
+  "version": "2.0.0",
   "description": "Fully customizable and dynamic Search Bar for React Native.",
   "keywords": [
     "gradient",
@@ -33,8 +33,8 @@
     "postversion": "git push && git push --tags"
   },
   "peerDependencies": {
-    "react": ">= 16.x.x",
-    "react-native": ">=0.63.x"
+    "react-native-spinkit": ">= 1.5.0",
+    "@freakycoder/react-native-bounceable": ">= 0.2.2"
   },
   "devDependencies": {
     "@types/react": "^16.9.53",
diff --git a/temp/App.tsx b/temp/App.tsx
deleted file mode 100644
index ea4f127..0000000
--- a/temp/App.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import React, { Component } from "react";
-import {
-  View,
-  Platform,
-  FlatList,
-  StatusBar,
-  UIManager,
-  SafeAreaView,
-  LayoutAnimation,
-} from "react-native";
-import { LineChart } from "react-native-svg-charts";
-// import SearchBar from "react-native-dynamic-search-bar";
-import SearchBar from "./lib/SearchBar";
-import GradientCard from "react-native-gradient-card-view";
-import { ScreenWidth } from "@freakycoder/react-native-helpers";
-import { CustomLayoutSpring } from "react-native-animation-layout";
-// Static Data
-import staticData from "./src/data/staticData";
-import styles, { centerSubtitleStyle } from "./styles";
-
-export default class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      page: 1,
-      seed: 1,
-      query: "",
-      isLoading: true,
-      refreshing: false,
-      dataBackup: staticData,
-      dataSource: staticData,
-      spinnerVisibility: false,
-    };
-
-    if (Platform.OS === "android") {
-      UIManager.setLayoutAnimationEnabledExperimental &&
-        UIManager.setLayoutAnimationEnabledExperimental(true);
-    }
-  }
-
-  filterList = (text) => {
-    var newData = this.state.dataBackup;
-    newData = this.state.dataBackup.filter((item) => {
-      const itemData = item.name.toLowerCase();
-      const textData = text.toLowerCase();
-      return itemData.indexOf(textData) > -1;
-    });
-    LayoutAnimation.configureNext(CustomLayoutSpring(null, null, "scaleXY"));
-    this.setState({
-      query: text,
-      dataSource: newData,
-    });
-  };
-
-  renderRightComponent = (item) => (
-    <View>
-      <LineChart
-        data={item.data}
-        style={styles.chartStyle}
-        contentInset={styles.chartContentInset}
-        svg={{
-          strokeWidth: 1.5,
-          fill: item.fillColor,
-          stroke: item.strokeColor,
-        }}
-      />
-    </View>
-  );
-
-  renderItem(item) {
-    return (
-      <GradientCard
-        key={item.name}
-        title={item.name}
-        style={styles.cardStyle}
-        imageSource={item.image}
-        centerTitle={item.value}
-        subtitle={item.shortName}
-        width={ScreenWidth * 0.9}
-        centerSubtitle={item.change}
-        shadowStyle={styles.cardShadowStyle}
-        centerSubtitleStyle={centerSubtitleStyle(item)}
-        rightComponent={this.renderRightComponent(item)}
-      />
-    );
-  }
-
-  onRefresh = () => {
-    this.setState({
-      dataSource: [],
-      isLoading: false,
-      refreshing: true,
-      seed: 1,
-      page: 1,
-    });
-    // this.fetchData();
-  };
-
-  loadMore = () => {
-    this.setState({
-      // refreshing: true,
-      page: this.state.page + 1,
-    });
-    // this.fetchData();
-  };
-
-  render() {
-    const { spinnerVisibility } = this.state;
-    return (
-      <SafeAreaView style={styles.safeAreaViewStyle}>
-        <StatusBar barStyle={"light-content"} />
-        <View style={styles.container}>
-          <SearchBar
-            // width={300}
-            // height={50}
-            onPressToFocus
-            autoFocus={false}
-            fontColor="#c6c6c6"
-            iconColor="#c6c6c6"
-            placeholder="Search"
-            shadowColor="#282828"
-            cancelIconColor="#c6c6c6"
-            backgroundColor="#353d5e"
-            spinnerVisibility={spinnerVisibility}
-            onChangeText={(text) => {
-              if (text.length === 0)
-                this.setState({ spinnerVisibility: false });
-              else this.setState({ spinnerVisibility: true });
-              this.filterList(text);
-            }}
-            onPressCancel={() => {
-              this.filterList("");
-            }}
-            // onPress={() => alert("onPress")}
-            // onKeyPress={() => alert("onKeyPress")}
-          />
-          <View style={styles.flatListStyle}>
-            <FlatList
-              onRefresh={this.onRefresh}
-              data={this.state.dataSource}
-              onEndReached={this.loadMore}
-              refreshing={this.state.refreshing}
-              renderItem={({ item }) => this.renderItem(item)}
-            />
-          </View>
-        </View>
-      </SafeAreaView>
-    );
-  }
-}
diff --git a/temp/assets/AquariusCoin.png b/temp/assets/AquariusCoin.png
deleted file mode 100755
index 1caa76f..0000000
Binary files a/temp/assets/AquariusCoin.png and /dev/null differ
diff --git a/temp/assets/Augur.png b/temp/assets/Augur.png
deleted file mode 100755
index 1e29aef..0000000
Binary files a/temp/assets/Augur.png and /dev/null differ
diff --git a/temp/assets/BitConnect.png b/temp/assets/BitConnect.png
deleted file mode 100755
index 2f89920..0000000
Binary files a/temp/assets/BitConnect.png and /dev/null differ
diff --git a/temp/assets/BitShares.png b/temp/assets/BitShares.png
deleted file mode 100755
index 67058f5..0000000
Binary files a/temp/assets/BitShares.png and /dev/null differ
diff --git a/temp/assets/Bitcoin.png b/temp/assets/Bitcoin.png
deleted file mode 100755
index 2adc562..0000000
Binary files a/temp/assets/Bitcoin.png and /dev/null differ
diff --git a/temp/assets/ByteCoin.png b/temp/assets/ByteCoin.png
deleted file mode 100755
index ef3bd02..0000000
Binary files a/temp/assets/ByteCoin.png and /dev/null differ
diff --git a/temp/assets/Dash.png b/temp/assets/Dash.png
deleted file mode 100755
index 0b53391..0000000
Binary files a/temp/assets/Dash.png and /dev/null differ
diff --git a/temp/assets/Decred.png b/temp/assets/Decred.png
deleted file mode 100755
index 6c3ffd8..0000000
Binary files a/temp/assets/Decred.png and /dev/null differ
diff --git a/temp/assets/EOS.png b/temp/assets/EOS.png
deleted file mode 100755
index 86c913c..0000000
Binary files a/temp/assets/EOS.png and /dev/null differ
diff --git a/temp/assets/Ethereum.png b/temp/assets/Ethereum.png
deleted file mode 100755
index 205f739..0000000
Binary files a/temp/assets/Ethereum.png and /dev/null differ
diff --git a/temp/assets/Golem.png b/temp/assets/Golem.png
deleted file mode 100755
index 086c9d7..0000000
Binary files a/temp/assets/Golem.png and /dev/null differ
diff --git a/temp/assets/IOTA.png b/temp/assets/IOTA.png
deleted file mode 100755
index c7fd85d..0000000
Binary files a/temp/assets/IOTA.png and /dev/null differ
diff --git a/temp/assets/Iconomi.png b/temp/assets/Iconomi.png
deleted file mode 100755
index 9180338..0000000
Binary files a/temp/assets/Iconomi.png and /dev/null differ
diff --git a/temp/assets/LanaCoin.png b/temp/assets/LanaCoin.png
deleted file mode 100755
index 3e74e21..0000000
Binary files a/temp/assets/LanaCoin.png and /dev/null differ
diff --git a/temp/assets/Litecoin.png b/temp/assets/Litecoin.png
deleted file mode 100755
index e65b41a..0000000
Binary files a/temp/assets/Litecoin.png and /dev/null differ
diff --git a/temp/assets/Monero.png b/temp/assets/Monero.png
deleted file mode 100755
index ac94b3e..0000000
Binary files a/temp/assets/Monero.png and /dev/null differ
diff --git a/temp/assets/NEM.png b/temp/assets/NEM.png
deleted file mode 100755
index 61a0b13..0000000
Binary files a/temp/assets/NEM.png and /dev/null differ
diff --git a/temp/assets/Netko-coin.png b/temp/assets/Netko-coin.png
deleted file mode 100755
index 49ccb5d..0000000
Binary files a/temp/assets/Netko-coin.png and /dev/null differ
diff --git a/temp/assets/NevaCoin.png b/temp/assets/NevaCoin.png
deleted file mode 100755
index 97b96f0..0000000
Binary files a/temp/assets/NevaCoin.png and /dev/null differ
diff --git a/temp/assets/Ripple.png b/temp/assets/Ripple.png
deleted file mode 100755
index 873034b..0000000
Binary files a/temp/assets/Ripple.png and /dev/null differ
diff --git a/temp/assets/Siacoin.png b/temp/assets/Siacoin.png
deleted file mode 100755
index f1076a5..0000000
Binary files a/temp/assets/Siacoin.png and /dev/null differ
diff --git a/temp/assets/Steem.png b/temp/assets/Steem.png
deleted file mode 100755
index b58443f..0000000
Binary files a/temp/assets/Steem.png and /dev/null differ
diff --git a/temp/assets/Stratis.png b/temp/assets/Stratis.png
deleted file mode 100755
index 4604e5a..0000000
Binary files a/temp/assets/Stratis.png and /dev/null differ
diff --git a/temp/assets/Suncontract.png b/temp/assets/Suncontract.png
deleted file mode 100755
index 6acba97..0000000
Binary files a/temp/assets/Suncontract.png and /dev/null differ
diff --git a/temp/assets/TajCoin.png b/temp/assets/TajCoin.png
deleted file mode 100755
index 98e211b..0000000
Binary files a/temp/assets/TajCoin.png and /dev/null differ
diff --git a/temp/assets/Waves.png b/temp/assets/Waves.png
deleted file mode 100755
index 2f99803..0000000
Binary files a/temp/assets/Waves.png and /dev/null differ
diff --git a/temp/assets/Xaurum.png b/temp/assets/Xaurum.png
deleted file mode 100755
index 59dd8ce..0000000
Binary files a/temp/assets/Xaurum.png and /dev/null differ
diff --git a/temp/assets/Zcash.png b/temp/assets/Zcash.png
deleted file mode 100755
index 7d6ca49..0000000
Binary files a/temp/assets/Zcash.png and /dev/null differ
diff --git a/temp/lib copy/SearchBar.tsx b/temp/lib copy/SearchBar.tsx
deleted file mode 100644
index a66a1a8..0000000
--- a/temp/lib copy/SearchBar.tsx	
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { Component } from "react";
-import { Text, View } from "react-native";
-import Spinner from "react-native-spinkit";
-import RNBounceable from "@freakycoder/react-native-bounceable";
-/**
- * ? Local Imports
- */
-import styles from "./SearchBar.style.ts";
-
-interface ISearchBarProps {
-  onPress?: () => void;
-}
-
-interface IState {}
-
-export default class SearchBar extends Component<ISearchBarProps, IState> {
-  render() {
-    const { onPress } = this.props;
-    return (
-      <RNBounceable
-        style={{
-          height: 35,
-          width: "90%",
-          borderRadius: 12,
-          alignSelf: "center",
-          justifyContent: "center",
-          backgroundColor: "#fff",
-          shadowRadius: 8,
-          shadowOpacity: 0.3,
-          shadowColor: "#757575",
-          shadowOffset: {
-            width: 0,
-            height: 3,
-          },
-        }}
-        onPress={onPress}
-      >
-        <Text> textInComponent </Text>
-      </RNBounceable>
-    );
-  }
-}
diff --git a/temp/lib/SearchBar.style.ts b/temp/lib/SearchBar.style.ts
deleted file mode 100644
index 76fb77b..0000000
--- a/temp/lib/SearchBar.style.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import { Platform, ViewStyle, StyleSheet } from "react-native";
-import {
-  ScreenWidth,
-  isIPhoneXFamily,
-} from "@freakycoder/react-native-helpers";
-
-interface Style {
-  center: ViewStyle;
-  searchStyle: ViewStyle;
-  containerGlue: ViewStyle;
-  textInputContainer: ViewStyle;
-}
-
-export function container(props: any) {
-  const {
-    height = 35,
-    width = ScreenWidth * 0.93,
-    backgroundColor = "#fff",
-    borderRadius = 10,
-  } = props;
-
-  return {
-    width: width,
-    height: height,
-    borderRadius,
-    backgroundColor,
-    paddingLeft: 8,
-    paddingRight: 8,
-  };
-}
-
-export function textInputStyle(
-  fontSize: number = 13,
-  fontColor: string = "#b3b6c3",
-  height: number = 35,
-  width: number = ScreenWidth * 0.7
-) {
-  return {
-    ...Platform.select({
-      android: {
-        padding: 0,
-        margin: 0,
-        borderWidth: 0,
-      },
-      ios: {
-        bottom: 0,
-      },
-    }),
-    flex: 1,
-    marginLeft: 24,
-    color: fontColor,
-    fontSize: fontSize,
-    maxHeight: height - 8,
-    maxWidth: width * 0.75,
-  };
-}
-
-export function _shadowStyle(shadowColor: string = "#757575") {
-  return {
-    ...Platform.select({
-      ios: {
-        shadowColor,
-        shadowRadius: 5,
-        shadowOpacity: 0.3,
-        shadowOffset: { width: 2, height: 1 },
-      },
-      android: { elevation: 5 },
-    }),
-  };
-}
-
-export function ifIPhoneXHeader(noExtraMargin: boolean) {
-  if (noExtraMargin) return { marginTop: 16 };
-  return {
-    marginTop: isIPhoneXFamily() ? 44 : 16,
-  };
-}
-
-export default StyleSheet.create<Style>({
-  containerGlue: {
-    flex: 1,
-    flexDirection: "row",
-    justifyContent: "space-between",
-  },
-  searchStyle: {
-    flex: 1,
-    flexDirection: "row",
-  },
-  textInputContainer: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  center: {
-    alignSelf: "center",
-    alignContent: "center",
-  },
-});
diff --git a/temp/lib/SearchBar.tsx b/temp/lib/SearchBar.tsx
deleted file mode 100644
index 5626905..0000000
--- a/temp/lib/SearchBar.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-import * as React from "react";
-import { View, TextInput, TouchableOpacity } from "react-native";
-import Spinner from "react-native-spinkit";
-/**
- * ? Local Imports
- */
-import styles, {
-  container,
-  _shadowStyle,
-  textInputStyle,
-  ifIPhoneXHeader,
-} from "./SearchBar.style";
-import SearchIcon from "./components/SearchIcon/SearchIcon";
-import SearchCancel from "./components/SearchCancel/SearchCancel";
-import SearchTextInput from "./components/SearchTextInput/SearchTextInput";
-
-interface IProps {
-  width: number;
-  height: number;
-  autoFocus: boolean;
-  backgroundColor: string;
-  cancelComponent: any;
-  cancelIconColor: string;
-  cancelIconComponent: any;
-  cancelIconName: string;
-  cancelIconSize: number;
-  cancelIconType: string;
-  fontColor: string;
-  fontSize: number;
-  iconColor: string;
-  iconComponent: any;
-  iconName: string;
-  iconSize: number;
-  iconType: string;
-  noExtraMargin: boolean;
-  onPress: Function;
-  onPressCancel: Function;
-  onPressToFocus: Function;
-  placeholder: string;
-  shadowColor: string;
-  shadowStyle: any;
-  textInputComponent: any;
-  textInputDisable: boolean;
-  cancelButtonDisable: boolean;
-  spinnerType: any;
-  spinnerSize: number;
-  textInputValue: any;
-  spinnerColor: string;
-  spinnerVisibility: boolean;
-}
-
-interface IState {}
-
-let textInputRef: any = null;
-
-export default class SearchBar extends React.Component<IProps, IState> {
-  textInput: any = null;
-  public static defaultProps = {
-    spinnerSize: 16,
-    spinnerType: "Circle",
-    spinnerColor: "#fdfdfd",
-    spinnerVisibility: false,
-  };
-
-  render() {
-    const {
-      height,
-      width,
-      fontSize,
-      iconColor,
-      autoFocus,
-      iconComponent,
-      iconName,
-      iconSize,
-      iconType,
-      fontColor,
-      noExtraMargin,
-      onPress,
-      onPressCancel,
-      onPressToFocus,
-      placeholder,
-      shadowColor,
-      shadowStyle,
-      textInputComponent,
-      textInputDisable,
-      textInputValue,
-      spinnerColor,
-      spinnerSize,
-      spinnerType,
-      spinnerVisibility,
-      cancelIconName,
-      cancelIconType,
-      cancelIconSize,
-      cancelIconColor,
-      cancelComponent,
-      cancelIconComponent,
-      cancelButtonDisable,
-    } = this.props;
-
-    return (
-      <TouchableOpacity
-        style={[
-          styles.center,
-          container(this.props),
-          ifIPhoneXHeader(noExtraMargin),
-          shadowStyle || _shadowStyle(shadowColor),
-        ]}
-        onPress={() => {
-          onPressToFocus ? textInputRef.focus() : onPress();
-        }}
-      >
-        <View style={styles.containerGlue}>
-          <View style={styles.searchStyle}>
-            {spinnerVisibility ? (
-              <View
-                style={{
-                  left: 8,
-                  bottom: 3,
-                  alignContent: "center",
-                  justifyContent: "center",
-                }}
-              >
-                <Spinner
-                  type={spinnerType}
-                  size={spinnerSize}
-                  color={spinnerColor}
-                  {...this.props}
-                />
-              </View>
-            ) : (
-              <SearchIcon
-                iconName={iconName}
-                iconType={iconType}
-                iconSize={iconSize}
-                iconColor={iconColor}
-                iconComponent={iconComponent}
-              />
-            )}
-            <SearchTextInput
-              fontSize={fontSize}
-              fontColor={fontColor}
-              placeholder={placeholder}
-              textInputDisable={textInputDisable}
-              textInputComponent={
-                textInputComponent ||
-                (!textInputDisable && (
-                  <View style={styles.textInputContainer}>
-                    <TextInput
-                      autoFocus={autoFocus}
-                      value={textInputValue}
-                      placeholder={placeholder}
-                      placeholderTextColor={fontColor}
-                      style={textInputStyle(fontSize, fontColor, height, width)}
-                      ref={(c) => {
-                        this.textInput = c;
-                        textInputRef = c;
-                      }}
-                      {...this.props}
-                    />
-                  </View>
-                ))
-              }
-            />
-          </View>
-          <SearchCancel
-            cancelIconName={cancelIconName}
-            cancelIconType={cancelIconType}
-            cancelIconSize={cancelIconSize}
-            cancelIconColor={cancelIconColor}
-            cancelComponent={cancelComponent}
-            cancelIconComponent={cancelIconComponent}
-            cancelButtonDisable={cancelButtonDisable}
-            onPressCancel={() => {
-              if (onPressCancel) {
-                if (this.textInput) this.textInput.clear();
-                onPressCancel();
-              } else {
-                if (this.textInput) this.textInput.clear();
-              }
-            }}
-          />
-        </View>
-      </TouchableOpacity>
-    );
-  }
-}
diff --git a/temp/lib/components/SearchCancel/SearchCancel.style.ts b/temp/lib/components/SearchCancel/SearchCancel.style.ts
deleted file mode 100644
index 11ee16a..0000000
--- a/temp/lib/components/SearchCancel/SearchCancel.style.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ViewStyle, StyleSheet } from "react-native";
-
-interface Style {
-  container: ViewStyle;
-  iconContainer: ViewStyle;
-}
-
-export default StyleSheet.create<Style>({
-  container: {
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  iconContainer: {
-    alignContent: "center",
-    alignItems: "center",
-    justifyContent: "center"
-  }
-});
diff --git a/temp/lib/components/SearchCancel/SearchCancel.tsx b/temp/lib/components/SearchCancel/SearchCancel.tsx
deleted file mode 100644
index db6539e..0000000
--- a/temp/lib/components/SearchCancel/SearchCancel.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from "react";
-import {  Image, TouchableOpacity } from "react-native";
-/**
- * ? Local Imports
- */
-import styles from "./SearchCancel.style";
-
-export interface ISearchCancelProps {
-  cancelComponent?: any;
-  ImageComponent?: any;
-  cancelIconComponent?: any;
-  cancelButtonDisable: boolean;
-  onPressCancel: () => void;
-}
-
-interface IState {}
-
-export default class SearchCancel extends React.PureComponent<ISearchCancelProps, IState> {
-  public static defaultProps = {
-    cancelIconName: "clear",
-    cancelIconType: "MaterialIcons",
-    cancelIconSize: 23,
-    cancelIconColor: "#b3b6c3",
-  };
-
-  renderIcon(props: ISearchCancelProps) {
-    const {
-      onPressCancel,
-      ImageComponent = Image,
-      cancelIconComponent,
-      cancelButtonDisable,
-    } = props;
-
-    return (
-      !cancelButtonDisable && (
-        <TouchableOpacity onPress={onPressCancel} style={styles.iconContainer}>
-          {cancelIconComponent || (
-            <ImageComponent source={require("../../local-assets/cancel-icon.png")} style={{height:20, width:20}} />
-          )}
-        </TouchableOpacity>
-      )
-    );
-  }
-
-  render() {
-    const { cancelComponent } = this.props;
-    return cancelComponent || this.renderIcon(this.props);
-  }
-}
diff --git a/temp/lib/components/SearchIcon/SearchIcon.style.ts b/temp/lib/components/SearchIcon/SearchIcon.style.ts
deleted file mode 100644
index caf3644..0000000
--- a/temp/lib/components/SearchIcon/SearchIcon.style.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ViewStyle, StyleSheet } from "react-native";
-
-interface Style {
-  container: ViewStyle;
-}
-
-export default StyleSheet.create<Style>({
-  container: {
-    left: 8,
-    alignContent: "center",
-    justifyContent: "center"
-  }
-});
diff --git a/temp/lib/components/SearchIcon/SearchIcon.tsx b/temp/lib/components/SearchIcon/SearchIcon.tsx
deleted file mode 100644
index 4f1221d..0000000
--- a/temp/lib/components/SearchIcon/SearchIcon.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from "react";
-import { View, Image } from "react-native";
-/**
- * ? Local Imports
- */
-import styles from "./SearchIcon.style";
-
-export interface ISearchIconProps {
-  ImageComponent?: any;
-  searchIconComponent?: any;
-}
-
-interface IState {}
-
-export default class SearchIcon extends React.PureComponent<ISearchIconProps, IState> {
-  render() {
-    const {
-      searchIconComponent,
-      ImageComponent = Image
-    } = this.props;
-
-    return (
-      <View style={styles.container}>
-        {searchIconComponent || (
-          <ImageComponent source={require("../../local-assets/search-icon.png")} style={{height:20, width:20}} />
-        )}
-      </View>
-    );
-  }
-}
diff --git a/temp/lib/components/SearchTextInput/SearchTextInput.style.ts b/temp/lib/components/SearchTextInput/SearchTextInput.style.ts
deleted file mode 100644
index ee8eed6..0000000
--- a/temp/lib/components/SearchTextInput/SearchTextInput.style.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { ViewStyle, StyleSheet } from "react-native";
-
-interface Style {
-  container: ViewStyle;
-}
-
-export const textStyle = (
-  fontSize: number = 13,
-  fontColor: string = "#b3b6c3"
-) => {
-  return {
-    left: 24,
-    bottom: 1,
-    width: 100,
-    color: fontColor,
-    fontSize: fontSize,
-  };
-};
-
-export default StyleSheet.create<Style>({
-  container: {
-    width: 100,
-    alignContent: "center",
-    justifyContent: "center",
-  },
-});
diff --git a/temp/lib/components/SearchTextInput/SearchTextInput.tsx b/temp/lib/components/SearchTextInput/SearchTextInput.tsx
deleted file mode 100644
index 3abcaab..0000000
--- a/temp/lib/components/SearchTextInput/SearchTextInput.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from "react";
-import { Text, View } from "react-native";
-/**
- * ? Local Imports
- */
-import styles, { textStyle } from "./SearchTextInput.style";
-
-interface IProps {
-  fontSize: number;
-  fontColor: string;
-  placeholder: string;
-  textInputComponent: any;
-  textInputDisable: boolean;
-}
-
-interface IState {}
-
-export default class SearchTextInput extends React.Component<IProps, IState> {
-  renderContent(props) {
-    const { fontSize, fontColor, placeholder, textInputDisable } = props;
-    return (
-      textInputDisable && (
-        <Text style={[textStyle(fontSize, fontColor)]}>{placeholder}</Text>
-      )
-    );
-  }
-
-  render() {
-    const { textInputComponent } = this.props;
-    return (
-      <View>
-        {textInputComponent || (
-          <View style={styles.container}>{this.renderContent(this.props)}</View>
-        )}
-      </View>
-    );
-  }
-}
diff --git a/temp/lib/local-assets/cancel-icon.png b/temp/lib/local-assets/cancel-icon.png
deleted file mode 100644
index e4ff3b9..0000000
Binary files a/temp/lib/local-assets/cancel-icon.png and /dev/null differ
diff --git a/temp/lib/local-assets/search-icon.png b/temp/lib/local-assets/search-icon.png
deleted file mode 100644
index 553185b..0000000
Binary files a/temp/lib/local-assets/search-icon.png and /dev/null differ
diff --git a/temp/src/data/staticData.js b/temp/src/data/staticData.js
deleted file mode 100644
index 5cc60f4..0000000
--- a/temp/src/data/staticData.js
+++ /dev/null
@@ -1,186 +0,0 @@
-export default (staticData = [
-  {
-    name: "Bitcoin",
-    shortName: "BTC",
-    value: "$ 4081,95",
-    change: "+ 1,48 ↑",
-    fillColor: "rgba(163, 224, 97, 0.2)",
-    strokeColor: "rgba(163, 224, 97, 1.0)",
-    image: require("../../assets/BitConnect.png"),
-    data: [
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10
-    ]
-  },
-  {
-    name: "Ethereum",
-    shortName: "ETH",
-    value: "$ 141.39",
-    change: "+ 0,59 ↓",
-    fillColor: "rgba(234, 53, 53, 0.2)",
-    strokeColor: "rgba(234, 53, 53, 1.0)",
-    image: require("../../assets/Ethereum.png"),
-    data: [
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10
-    ]
-  },
-  {
-    name: "Litecoin",
-    shortName: "BCH",
-    value: "$ 1535.39",
-    change: "+ 1,51 ↓",
-    fillColor: "rgba(234, 53, 53, 0.2)",
-    strokeColor: "rgba(234, 53, 53, 1.0)",
-    image: require("../../assets/Litecoin.png"),
-    data: [
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10
-    ]
-  },
-  {
-    name: "Ripple",
-    shortName: "XRP",
-    value: "$ 4081,95",
-    change: "+ 1,48 ↑",
-    fillColor: "rgba(163, 224, 97, 0.2)",
-    strokeColor: "rgba(163, 224, 97, 1.0)",
-    image: require("../../assets/Ripple.png"),
-    data: [
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10
-    ]
-  },
-  {
-    name: "Dash",
-    shortName: "DSH",
-    value: "$ 141.39",
-    change: "+ 0,59 ↓",
-    fillColor: "rgba(234, 53, 53, 0.2)",
-    strokeColor: "rgba(234, 53, 53, 1.0)",
-    image: require("../../assets/Dash.png"),
-    data: [
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10
-    ]
-  },
-  {
-    name: "Iota",
-    shortName: "MIOTA",
-    value: "$ 141.39",
-    change: "+ 0,59 ↓",
-    fillColor: "rgba(234, 53, 53, 0.2)",
-    strokeColor: "rgba(234, 53, 53, 1.0)",
-    image: require("../../assets/IOTA.png"),
-    data: [
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10
-    ]
-  },
-  {
-    name: "Eos",
-    shortName: "EOS",
-    value: "$ 4081,95",
-    change: "+ 1,48 ↑",
-    fillColor: "rgba(163, 224, 97, 0.2)",
-    strokeColor: "rgba(163, 224, 97, 1.0)",
-    image: require("../../assets/EOS.png"),
-    data: [
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10
-    ]
-  },
-  {
-    name: "Neo",
-    shortName: "NEO",
-    value: "$ 141.39",
-    change: "+ 0,59 ↓",
-    fillColor: "rgba(234, 53, 53, 0.2)",
-    strokeColor: "rgba(234, 53, 53, 1.0)",
-    image: require("../../assets/Netko-coin.png"),
-    data: [
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10,
-      Math.random() * 10
-    ]
-  }
-]);
diff --git a/temp/styles.js b/temp/styles.js
deleted file mode 100644
index 76f3c96..0000000
--- a/temp/styles.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Platform } from "react-native";
-import { ScreenWidth } from "@freakycoder/react-native-helpers";
-
-export const centerSubtitleStyle = (item) => ({
-  fontSize: 12,
-  marginLeft: 8,
-  textAlign: "center",
-  color: item.strokeColor,
-});
-
-export default {
-  safeAreaViewStyle: {
-    flex: 1,
-    backgroundColor: "#21283d",
-  },
-  flatListStyle: {
-    marginTop: 12,
-  },
-  cardShadowStyle: {
-    ...Platform.select({
-      ios: {
-        shadowRadius: 3,
-        shadowOpacity: 0.4,
-        shadowColor: "#000",
-        shadowOffset: {
-          width: 3,
-          height: 3,
-        },
-      },
-      android: {
-        elevation: 3,
-      },
-    }),
-  },
-  cardStyle: {
-    marginTop: 16,
-    width: ScreenWidth,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  container: {
-    ...Platform.select({
-      android: {
-        top: 24,
-      },
-    }),
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: "#21283d",
-  },
-  welcome: {
-    margin: 10,
-    fontSize: 20,
-    textAlign: "center",
-  },
-  instructions: {
-    textAlign: "center",
-    color: "#333333",
-    marginBottom: 5,
-  },
-  chartStyle: {
-    height: 100,
-    width: 100,
-  },
-  chartContentInset: {
-    top: 30,
-    bottom: 30,
-  },
-};