feat: Create Spinner component

Author: Sanjeev Yadav

src/App.tsx

@@ -5,7 +5,7 @@ import Navigator from './navigation';
 import { ApolloClient, ApolloProvider } from '@apollo/client';
 import { getApolloClient } from './apollo/client';
 import { theme } from './theme';
-import { ActivityIndicator } from 'react-native';
+import { Spinner } from './components';
 
 const App = (): React.ReactElement => {
   const [client, setClient] = useState<ApolloClient<any>>();
@@ -29,7 +29,7 @@ const App = (): React.ReactElement => {
   }
 
   // TODO: SplashScreen logic
-  return <ActivityIndicator color="black" size="large" />;
+  return <Spinner />;
 };
 
 export default App;

src/components/GenericTemplate/GenericTemplate.tsx

@@ -1,14 +1,8 @@
-import React, { useContext, ReactNode } from 'react';
-import {
-  View,
-  StyleSheet,
-  ScrollView,
-  ActivityIndicator,
-  ViewStyle,
-} from 'react-native';
-import { ThemeContext } from 'react-native-elements';
-import { SPACING } from '../../constants';
+import React, { ReactNode } from 'react';
+import { View, StyleSheet, ScrollView, ViewStyle } from 'react-native';
 import { Text } from 'react-native-elements';
+import { SPACING } from '../../constants';
+import Spinner from '../Spinner/Spinner';
 
 interface Props {
   /**
@@ -45,13 +39,12 @@ const GenericTemplate = ({
   errorMessage,
   style = {},
 }: Props): React.ReactElement => {
-  const { theme } = useContext(ThemeContext);
   const ViewGroup = scrollable ? ScrollView : View;
 
   const renderLoader = () =>
     loading && (
       <View style={styles.center}>
-        <ActivityIndicator size="large" color={theme.colors?.primary} />
+        <Spinner />
       </View>
     );
 

src/components/Spinner/Spinner.tsx

@@ -0,0 +1,37 @@
+import React, { useContext } from 'react';
+import { ActivityIndicator, ViewStyle } from 'react-native';
+import { ThemeContext } from 'react-native-elements';
+
+interface Props {
+  /**
+   * size of the spinner, can be
+   * 1. 'large'
+   * 2. 'small'
+   */
+  size?: 'large' | 'small';
+  /**
+   * custom color for the spinner
+   */
+  color?: string;
+  /**
+   * style containing padding & margin
+   */
+  style?: ViewStyle;
+}
+
+const Spinner = ({
+  size = 'large',
+  color,
+  style = {},
+}: Props): React.ReactElement => {
+  const { theme } = useContext(ThemeContext);
+  return (
+    <ActivityIndicator
+      style={style}
+      size={size}
+      color={color ?? theme.colors?.primary}
+    />
+  );
+};
+
+export default Spinner;

src/components/index.ts

@@ -6,6 +6,7 @@ import {
 import GenericTemplate from './GenericTemplate/GenericTemplate';
 import MediaGallery from './MediaGallery/MediaGallery';
 import ProductListItem from './ProductListItem/ProductListItem';
+import Spinner from './Spinner/Spinner';
 
 export {
   CategoryListItem,
@@ -14,4 +15,5 @@ export {
   GenericTemplate,
   MediaGallery,
   ProductListItem,
+  Spinner,
 };

src/screens/HomeScreen/FeaturedProductList.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { useNavigation } from '@react-navigation/native';
-import { ActivityIndicator, View, FlatList, StyleSheet } from 'react-native';
+import { View, FlatList, StyleSheet } from 'react-native';
 import { Text } from 'react-native-elements';
 import { ProductInListType } from '../../apollo/queries/productsFragment';
-import { ProductListItem } from '../../components';
+import { ProductListItem, Spinner } from '../../components';
 import { DIMENS, SPACING } from '../../constants';
 import { useCategoryProducts } from '../../logic';
 import { Routes } from '../../navigation';
@@ -55,11 +55,10 @@ const FeaturedProductList = ({
     );
   }
 
-  // TODO: Remove hard-coded values
   if (networkStatus === NetworkStatus.loading) {
     return (
       <View style={styles.loadingBox}>
-        <ActivityIndicator color="black" size="large" />
+        <Spinner />
       </View>
     );
   }

src/screens/ProductListScreen/ProductListScreen.tsx

@@ -1,18 +1,12 @@
 import React from 'react';
-import {
-  View,
-  RefreshControl,
-  StyleSheet,
-  ActivityIndicator,
-  FlatList,
-} from 'react-native';
+import { View, RefreshControl, StyleSheet, FlatList } from 'react-native';
 import { RouteProp } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { useCategoryProducts } from '../../logic';
 import { Routes, AppStackParamList } from '../../navigation';
 import { ProductInListType } from '../../apollo/queries/productsFragment';
 import { SPACING } from '../../constants';
-import { GenericTemplate, ProductListItem } from '../../components';
+import { GenericTemplate, ProductListItem, Spinner } from '../../components';
 import { NetworkStatus } from '@apollo/client';
 
 interface Props {
@@ -60,11 +54,10 @@ const ProductListScreen = ({
     );
   };
 
-  // TODO: remove hard-coded values
   const renderFooterComponent = () =>
     (networkStatus === NetworkStatus.fetchMore && (
       <View style={styles.footerContainer}>
-        <ActivityIndicator color="black" size="large" />
+        <Spinner />
       </View>
     )) || <></>;
 

src/screens/SearchScreen/SearchScreen.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { StyleSheet, FlatList, View, ActivityIndicator } from 'react-native';
-import { Text, SearchBar } from 'react-native-elements';
+import React, { useContext, useMemo } from 'react';
+import { StyleSheet, FlatList, View } from 'react-native';
+import { Text, SearchBar, ThemeContext } from 'react-native-elements';
 import { StackNavigationProp } from '@react-navigation/stack';
-import { GenericTemplate, ProductListItem } from '../../components';
+import { GenericTemplate, ProductListItem, Spinner } from '../../components';
 import { useSearch } from '../../logic';
 import { AppStackParamList, Routes } from '../../navigation';
 import { ProductInListType } from '../../apollo/queries/productsFragment';
@@ -26,6 +26,10 @@ const SearchScreen = ({ navigation }: Props): React.ReactElement => {
     loadMore,
     data: { products: { items: products = [] } = {} } = {},
   } = useSearch();
+  const { theme } = useContext(ThemeContext);
+  const loadingProps = useMemo(() => ({ color: theme.colors?.primary }), [
+    theme,
+  ]);
 
   const handleBackPress = () => navigation.pop();
 
@@ -66,11 +70,10 @@ const SearchScreen = ({ navigation }: Props): React.ReactElement => {
         </View>
       )) || <></>;
 
-  // TODO: Remove hard-coded values
   const renderFooterComponent = () =>
     (networkStatus === NetworkStatus.fetchMore && (
       <View style={styles.footerContainer}>
-        <ActivityIndicator color="black" size="large" />
+        <Spinner />
       </View>
     )) || <></>;
 
@@ -85,7 +88,7 @@ const SearchScreen = ({ navigation }: Props): React.ReactElement => {
           name: 'arrow-back',
           onPress: handleBackPress,
         }}
-        loadingProps={styles.searchBarLoading}
+        loadingProps={loadingProps}
         containerStyle={styles.searchBarContainer}
         inputContainerStyle={styles.searchBarInputContainer}
       />
@@ -130,9 +133,6 @@ const styles = StyleSheet.create({
     borderRadius: 0,
     backgroundColor: 'white',
   },
-  searchBarLoading: {
-    color: 'black',
-  },
   footerContainer: {
     alignItems: 'center',
     marginVertical: SPACING.small,