feat: ✨ Added isLoading and LoadingTintColor

timelessco · Aug 9, 2020 · 749674c · 749674c
1 parent 590cf3e
commit 749674c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/example/RNSearch/App.js b/example/RNSearch/App.js
@@ -3,7 +3,7 @@ import {
   SafeAreaView, StyleSheet,
   Text, TouchableOpacity
 } from 'react-native';
-import SearchComponent from 'react-native-search-component';
+import SearchComponent from './src/UISearchBar';
 
 const App = () => {
   const [theme, setTheme] = React.useState('LIGHT');
@@ -24,7 +24,7 @@ const App = () => {
       <TouchableOpacity style={{ paddingVertical: 12 }} onPress={toggleTheme}>
         <Text style={[styles.textStyle, { color: '#007AFF', fontSize: 18 }]}>Toggle Theme</Text>
       </TouchableOpacity>
-      <SearchComponent value={searchTerm} theme={theme} onChange={onChange} onSearchClear={onSearchClear} />
+      <SearchComponent isLoading={true} value={searchTerm} theme={theme} onChange={onChange} onSearchClear={onSearchClear} />
       <Text style={[themeBasedTextStyle, { textAlign: 'left', paddingLeft: 16, fontSize: 18 }]}> Search Term : {searchTerm}</Text>
     </SafeAreaView>
   );

diff --git a/example/RNSearch/src/UISearchBar/index.js b/example/RNSearch/src/UISearchBar/index.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Platform, StyleSheet, TextInput, TouchableOpacity, useWindowDimensions } from 'react-native';
+import { ActivityIndicator, Platform, StyleSheet, TextInput, TouchableOpacity, useWindowDimensions, View } from 'react-native';
 import Animated, { Easing, spring, timing, Value } from 'react-native-reanimated';
 import Svg, { Path } from 'react-native-svg';
 
@@ -56,7 +56,7 @@ const SearchComponent = (props) => {
   const handlePressCancel = useCallback(() => {
     searchTextInput?.blur();
     props?.onSearchClear();
-  })
+  });
   useEffect(() => {
     if (searchInputFocussed) {
       spring(textInputWidth, {
@@ -109,7 +109,11 @@ const SearchComponent = (props) => {
           placeholderTextColor={props?.placeholderTextColor || styledTheme[props?.theme].placeholderTextColor}
         />
         {
-          (searchInputFocussed && props?.value?.length > 0) && (
+          props?.isLoading ? (
+            <View style={styles.loadingIconWrapper} >
+              <ActivityIndicator size='small' color={props?.loadingTintColor} />
+            </View>
+          ) : (searchInputFocussed && props?.value?.length > 0) && (
             <TouchableOpacity style={styles.closeIconWrapper} onPress={handleClearSearch}>
               <CloseIcon />
             </TouchableOpacity>
@@ -154,7 +158,12 @@ const styles = StyleSheet.create({
     position: 'absolute',
     right: 8,
     top: Platform.OS === 'android' ? 21 : 18
-  }
+  },
+  loadingIconWrapper: {
+    position: 'absolute',
+    right: 10,
+    top: Platform.OS === 'android' ? 18 : 15
+  },
 })
 
 
@@ -164,7 +173,9 @@ SearchComponent.propTypes = {
   onChange: PropTypes.func.isRequired,
   value: PropTypes.string.isRequired,
   onSearchClear: PropTypes.func,
-  theme: PropTypes.oneOf(['LIGHT', 'DARK'])
+  theme: PropTypes.oneOf(['LIGHT', 'DARK']),
+  isLoading: PropTypes.bool,
+  loadingTintColor: PropTypes.string,
 }
 
 
@@ -174,7 +185,9 @@ SearchComponent.defaultProps = {
   onChange: () => { },
   value: '',
   onSearchClear: () => { },
-  theme: 'LIGHT'
+  theme: 'LIGHT',
+  isLoading: false,
+  loadingTintColor: '#636366',
 }
 
 export default SearchComponent;