add a gif to readme, remove unused colors, font-sizes (maxkordiyak#1)

* add a gif to readme, remove unused colors, font-sizes

* add full-length gif

* add gif

Author: docker-run

README.md

@@ -3,6 +3,10 @@
 [![npm (scoped)](https://img.shields.io/badge/npm-v1.0.0-blue.svg)](https://www.npmjs.com/package/react-native-dropdown-autocomplete)
 
 Based on https://bit.ly/2AFjUsj, the most significant advantage of this package among all others is that you can have multiple autocomplete's on your page after following instructions below. Works on Android and IOS.
+<p align="center">
+<img src="https://media.giphy.com/media/AS6Ts8m31qVFNpVHUZ/giphy.gif" alt="Autocomplete demo">
+<img src="https://media.giphy.com/media/3qs6aVPvVVCBkty3v5/giphy.gif" alt="Autocomplete demo with pre-filled inputs">
+</p>
 
 ## Usage
 ##### Install the package
@@ -13,8 +17,9 @@ npm i react-native-dropdown-autocomplete
 ##### Wrap the page you want to have autocomplete on with ```withKeyboardAwareScrollView```:
 
 ```javascript
-import React from 'react';
-import {Ionicons} from '@expo/vector-icons';
+import React from "react";
+import {StyleSheet, View, SafeAreaView} from "react-native";
+import {Ionicons} from "@expo/vector-icons";
 import shortid from "shortid";
 import {Autocomplete, withKeyboardAwareScrollView} from "react-native-dropdown-autocomplete";
 
@@ -28,29 +33,33 @@ class HomeScreen extends Component {
   render() {
     const autocompletes = [...Array(10).keys()];
 
+    const apiUrl = "https://5b927fd14c818e001456e967.mockapi.io/branches";
+
     const {scrollToInput, onDropdownClose, onDropdownShow} = this.props;
 
     return (
       <View style={styles.autocompletesContainer}>
-        {autocompletes.map(() => (
-          <Autocomplete
-            key={shortid.generate()}
-            style={styles.input}
-            scrollToInput={ev => scrollToInput(ev)}
-            handleSelectItem={(item, id) => this.handleSelectItem(item, id)}
-            onDropdownClose={() => onDropdownClose()}
-            onDropdownShow={() => onDropdownShow()}
-            renderIcon={() => (
-              <Ionicons name="ios-paper-plane" size={20} color="black" />
-            )}
-            fetchDataUrl="https://5b927fd14c818e001456e967.mockapi.io/branches"
-            minimumCharactersCount={2}
-            highlightText
-            valueExtractor={item => item.name}
-            rightContent
-            rightTextExtractor={item => item.properties}
-          />
-        ))}
+        <SafeAreaView>
+          {autocompletes.map(() => (
+            <Autocomplete
+              key={shortid.generate()}
+              style={styles.input}
+              scrollToInput={ev => scrollToInput(ev)}
+              handleSelectItem={(item, id) => this.handleSelectItem(item, id)}
+              onDropdownClose={() => onDropdownClose()}
+              onDropdownShow={() => onDropdownShow()}
+              renderIcon={() => (
+                <Ionicons name="ios-add-circle-outline" size={20} color="#c7c6c1" style={styles.plus} />
+              )}
+              fetchDataUrl={apiUrl}
+              minimumCharactersCount={2}
+              highlightText
+              valueExtractor={item => item.name}
+              rightContent
+              rightTextExtractor={item => item.properties}
+            />
+          ))}
+        </SafeAreaView>
       </View>
     );
   }
@@ -60,6 +69,7 @@ const styles = StyleSheet.create({
     paddingTop: 0,
     zIndex: 1,
     width: "100%",
+    paddingHorizontal: 8,
   },
   input: {maxHeight: 40},
   inputContainer: {
@@ -70,7 +80,7 @@ const styles = StyleSheet.create({
     flexWrap: "wrap",
     alignItems: "center",
     borderBottomWidth: 1,
-    borderColor: theme.dividerColor,
+    borderColor: "#c7c6c1",
     paddingVertical: 13,
     paddingLeft: 12,
     paddingRight: "5%",
@@ -79,7 +89,7 @@ const styles = StyleSheet.create({
   },
   container: {
     flex: 1,
-    backgroundColor: theme.bgPrimary,
+    backgroundColor: "#ffffff",
   },
   plus: {
     position: "absolute",

components/Autocomplete/Autocomplete.styles.js

@@ -10,7 +10,7 @@ export const styles = StyleSheet.create({
     flexWrap: "wrap",
     alignItems: "center",
     borderBottomWidth: 1,
-    borderColor: theme.dividerColor,
+    borderColor: theme.divider,
     paddingVertical: 13,
     paddingLeft: 12,
     paddingRight: "5%",
@@ -23,6 +23,7 @@ export const styles = StyleSheet.create({
     flexWrap: "wrap",
     flexGrow: 1,
     flexShrink: 1,
+    marginVertical: 4,
   },
   plus: {
     position: "absolute",
@@ -36,15 +37,15 @@ export const styles = StyleSheet.create({
   },
   list: {
     minWidth: "80%",
-    backgroundColor: theme.bgPrimary,
+    backgroundColor: theme.backgroundPrimary,
     paddingTop: 0,
     marginTop: 0,
     borderWidth: 1,
     borderColor: theme.primary,
     maxHeight: 300,
   },
   listShadow: {
-    backgroundColor: theme.bgPrimary,
+    backgroundColor: theme.backgroundPrimary,
     position: "absolute",
     zIndex: 3,
     top: 50,
@@ -59,7 +60,7 @@ export const styles = StyleSheet.create({
   listFooter: {
     height: 16.7,
     borderTopWidth: 1,
-    borderTopColor: theme.dividerColor,
+    borderTopColor: theme.divider,
   },
   input: {
     fontSize: theme.sizes.size20,
@@ -81,13 +82,13 @@ export const styles = StyleSheet.create({
   },
   listItemText: {
     justifyContent: "center",
-    color: theme.listItemColor,
+    color: theme.listItem,
   },
   listHeader: {
     height: 41.8,
     justifyContent: "center",
     paddingTop: 0,
-    backgroundColor: theme.bgPrimary,
+    backgroundColor: theme.backgroundPrimary,
     borderBottomWidth: 1,
     borderBottomColor: theme.primary,
   },
@@ -96,7 +97,7 @@ export const styles = StyleSheet.create({
   },
   separator: {
     height: 1,
-    backgroundColor: theme.dividerColor,
+    backgroundColor: theme.divider,
   },
   sectionSeparator: {
     backgroundColor: theme.primary,

components/Dropdown/Dropdown.styles.js

@@ -26,7 +26,7 @@ export default StyleSheet.create({
     overflow: "hidden",
     alignItems: "center",
 
-    backgroundColor: "transparent" /* XXX: Required */,
+    backgroundColor: "transparent",
   },
   overlay: {
     ...StyleSheet.absoluteFillObject,
@@ -59,7 +59,7 @@ export default StyleSheet.create({
   },
   separator: {
     height: 1,
-    backgroundColor: theme.dividerColor,
+    backgroundColor: theme.divider,
   },
   listItem: {
     paddingLeft: 15,
@@ -70,22 +70,22 @@ export default StyleSheet.create({
   listFooter: {
     height: 16.7,
     borderTopWidth: 1,
-    borderTopColor: theme.dividerColor,
+    borderTopColor: theme.divider,
   },
   listHeader: {
     height: 41.8,
     justifyContent: "center",
     paddingTop: 0,
-    backgroundColor: theme.bgPrimary,
+    backgroundColor: theme.backgroundPrimary,
     borderBottomWidth: 1,
     borderBottomColor: theme.primary,
   },
   listItemText: {
     justifyContent: "center",
-    color: theme.listItemColor,
+    color: theme.listItem,
   },
   noData: {
-    color: theme.dividerColor,
+    color: theme.divider,
   },
   listHeaderText: {
     color: theme.textSubtitle,
@@ -96,9 +96,9 @@ export default StyleSheet.create({
     paddingRight: 8,
   },
   phone: {
-    color: theme.dividerColor,
+    color: theme.divider,
     textDecorationLine: "underline",
     textDecorationStyle: "solid",
-    textDecorationColor: theme.dividerColor,
+    textDecorationColor: theme.divider,
   },
 });

components/Dropdown/index.js

@@ -459,7 +459,7 @@ export default class Dropdown extends PureComponent {
       inputValue,
       rightContent,
       valueExtractor,
-        highLightColor,
+      highLightColor,
     } = this.props;
     if (item === NO_DATA) {
       return this.renderEmptyItem();
@@ -469,7 +469,7 @@ export default class Dropdown extends PureComponent {
       text = highlightString(
         String(valueExtractor(item)),
         inputValue,
-        highLightColor || theme.textInvert,
+        highLightColor || theme.primary,
       );
     } else {
       text = capitalizeFirstLetter(String(valueExtractor(item)));
@@ -507,11 +507,11 @@ export default class Dropdown extends PureComponent {
       },
       rightContent
         ? {
-            display: "flex",
-            flexDirection: "row",
-            justifyContent: "space-between",
-            alignItems: "center",
-          }
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }
         : {},
     ];
 

components/StyledText.js

@@ -104,7 +104,7 @@ const withKeyboardAwareScrollView = WrappedComponent => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: theme.bgPrimary,
+    backgroundColor: theme.backgroundPrimary,
     paddingBottom: isX ? 30 : 0,
   },
 });

components/TabBarIcon.js

@@ -1,30 +1,8 @@
 export const colors = {
-  lightBlue: "#f0f8f9",
-  redColor: "#dc4f2c",
-  whiteColor: "#ffffff",
-  whiteVeil: "rgba(255, 255, 255, 0.5)",
-  modalVeil: "rgba(255, 255, 255, 0.98)",
-  modalDarkVeil: "rgba(211, 211, 211, 0.9)",
-  modalShade: "rgba(0, 0, 0, 0.42)",
-  lightGreenColor: "#8cc63f",
-  greenColor: "#64a143",
-  darkGreenColor: "#129a8d",
-  blueColor: "#2392c5",
-  darkGrayColor: "#616261",
-  orangeColor: "#e6802d",
+  white: "#ffffff",
+  primary: "#129a8d",
   transparent: "rgba(255, 255, 255, 0)",
   darkConcrete: "#91928e",
-  defaultTextColor: "#0a0b09",
-  concrete: "#acada9",
-  lightGrayColor: "#c7c6c1",
-  yellowColor: "rgb(253, 189, 57)",
+  lightGray: "#c7c6c1",
   muddyGray: "#585a58",
-  darkMuddyGray: "#797b7a",
-  primaryGradient1: "#00a49a",
-  primaryGradient2: "#00a096",
-  primaryGradient3: "#00948b",
-  primaryGradient4: "#008d84",
-  whiteGradient: "rgba(255,255,255,0)",
-  whiteGradient1: "rgba(255,255,255,0.6)",
-  couponIndexBackground: "#bbe1e8",
 };