feat: add country selection

__tests__/__snapshots__/App-test.tsx.snap

@@ -294,6 +294,7 @@ exports[`jest snapshot tests renders correctly 1`] = `
                           "backgroundColor": "#ffffff",
                         }
                       }
+                      testID="homeScreen"
                     >
                       <View>
                         <View

android/app/build.gradle

@@ -2,6 +2,11 @@ apply plugin: "com.android.application"
 
 import com.android.build.OutputFile
 
+project.ext.vectoricons = [
+    iconFontNames: ['Feather.ttf'] // Name of the font files you want to copy
+]
+apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
+
 /**
  * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
  * and bundleReleaseJsAndAssets).

app/components/CountriesAutocomplete/ListItem.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {Country} from 'countries-list';
+
+import Text from 'theme/Text';
+import TouchFeedback from 'theme/TouchFeedback';
+
+import style from './style';
+
+type ListItemProps = {
+  data: Country;
+  onPress: (...args: unknown[]) => void;
+  testID: string;
+};
+
+const ListItem: React.FC<ListItemProps> = props => (
+  <TouchFeedback
+    style={style.listItemContainer}
+    testID={props.testID}
+    onPress={props.onPress}>
+    <Text style={style.listItemName}>{props.data.emoji}</Text>
+    <Text style={style.listItemName}>
+      ({props.data.phone}) {props.data.name}
+    </Text>
+  </TouchFeedback>
+);
+
+export default ListItem;

app/components/CountriesAutocomplete/index.tsx

@@ -0,0 +1,78 @@
+/**
+ *
+ * CountriesAutocomplete
+ *
+ */
+
+import sortBy from 'lodash/sortBy';
+
+import React from 'react';
+import {FlatList, Text, View} from 'react-native';
+import {countries, Country} from 'countries-list';
+
+import Input from 'theme/Input';
+import useAutocomplete from 'theme/Autocomplete';
+
+import ListItem from './ListItem';
+import style from './style';
+
+interface ICountriesAutocompleteProps {
+  onSelect: (item: Country) => void;
+  testID?: string;
+}
+
+const countriesList: Country[] = Object.keys(countries).map(
+  key => countries[key],
+);
+
+const CountriesAutocomplete: React.FC<ICountriesAutocompleteProps> = props => {
+  const autocomplete = useAutocomplete({
+    data: countriesList,
+    filterKey: 'name',
+  });
+
+  return (
+    <>
+      <View
+        style={style.autocompleteContainer}
+        testID={props.testID || 'countriesAutocomplete'}>
+        <Input
+          {...autocomplete.inputProps}
+          placeholder="Search Countries"
+          clearButtonMode="never"
+          style={style.input}
+          autoFocus
+          testID="countriesAutocompleteInput"
+        />
+      </View>
+      {autocomplete.focus && autocomplete.data ? (
+        <FlatList
+          testID="countriesAutocompleteList"
+          style={style.listContainer}
+          data={sortBy(autocomplete.data, 'name').slice(0, 5)}
+          bounces={false}
+          keyboardShouldPersistTaps="always"
+          keyboardDismissMode="on-drag"
+          keyExtractor={({name}) => name}
+          renderItem={({item}: {item: Country; index: number}) => (
+            <ListItem
+              onPress={() => {
+                props.onSelect(item);
+                autocomplete.clear();
+              }}
+              data={item}
+              testID={`listItem-${item.name}`}
+            />
+          )}
+          ListEmptyComponent={
+            autocomplete.value ? (
+              <Text>No result for {autocomplete.value}.</Text>
+            ) : null
+          }
+        />
+      ) : null}
+    </>
+  );
+};
+
+export default CountriesAutocomplete;

app/components/CountriesAutocomplete/style.ts

@@ -0,0 +1,61 @@
+import {StyleSheet} from 'react-native';
+import Colors from 'theme/Colors';
+import Dimensions from 'theme/Dimensions';
+
+const style = StyleSheet.create({
+  selectedItemContainer: {
+    margin: Dimensions.space2x,
+    marginTop: Dimensions.space1x,
+    flexDirection: 'row',
+  },
+  autocompleteContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    position: 'relative',
+    paddingHorizontal: Dimensions.space2x,
+  },
+  input: {
+    marginHorizontal: 0,
+    opacity: 1,
+    width: '100%',
+  },
+  inputCloseBtnHolder: {
+    backgroundColor: Colors.translucentBlackMinor,
+    height: 36,
+    width: 36,
+    borderRadius: 20,
+    position: 'absolute',
+    right: 16,
+  },
+  inputCloseBtn: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  noResult: {
+    flex: 1,
+    textAlign: 'center',
+    paddingVertical: Dimensions.space1x,
+  },
+  listContainer: {
+    zIndex: 1000,
+    width: '100%',
+    paddingHorizontal: Dimensions.space2x,
+  },
+  listItemContainer: {
+    flexDirection: 'row',
+    padding: Dimensions.space1x,
+    paddingVertical: Dimensions.space2x,
+    alignItems: 'center',
+    width: '100%',
+    backgroundColor: Colors.white,
+    marginVertical: Dimensions.space1x,
+  },
+  listItemName: {
+    fontSize: 14,
+    marginLeft: 8,
+    fontWeight: '500',
+  },
+});
+
+export default style;

app/components/CountriesAutocomplete/tests/index.test.tsx

@@ -0,0 +1,66 @@
+import 'react-native';
+import React from 'react';
+import {render, fireEvent} from '@testing-library/react-native';
+
+import CountriesAutocomplete from '../index';
+
+const COUNTRY_NAME = 'Serbia';
+
+// Describing a test suite
+describe('<CountriesAutocomplete />', () => {
+  // Describing our test
+  it('Displays Searched Item', async () => {
+    // Mocking onPress method so we can check if its called or not
+    const onSelect = jest.fn();
+
+    // Rendering Button component using react-native-test-renderer.
+    const autocomplete = await render(
+      <CountriesAutocomplete onSelect={onSelect} />,
+    );
+
+    // Grabbing our input to perform actions on it.
+    const inputTestID = 'countriesAutocompleteInput';
+    const textInput = autocomplete.getByTestId(inputTestID);
+
+    /**
+     * RNTL gives us API to fire events on node
+     * Here we are firing on changeText event
+     */
+    fireEvent(textInput, 'focus');
+    fireEvent.changeText(textInput, COUNTRY_NAME);
+    expect(textInput.props.value).toBe(COUNTRY_NAME);
+
+    // Grabbing our input to perform actions on it.
+    const listItemTestID = `listItem-${COUNTRY_NAME}`;
+    const firstListItem = autocomplete.getByTestId(listItemTestID);
+    expect(firstListItem).toBeTruthy();
+  });
+
+  it('onSelect is called when item is pressed', async () => {
+    // Mocking onPress method so we can check if its called or not
+    const onSelect = jest.fn();
+
+    // Rendering Button component using react-native-test-renderer.
+    const {getByTestId} = await render(
+      <CountriesAutocomplete onSelect={onSelect} />,
+    );
+
+    // Grabbing our input to perform actions on it.
+    const inputTestID = 'countriesAutocompleteInput';
+    const textInput = getByTestId(inputTestID);
+
+    /**
+     * RNTL gives us API to fire events on node
+     * Here we are firing on focus & changeText event
+     */
+    fireEvent(textInput, 'focus');
+    fireEvent.changeText(textInput, COUNTRY_NAME);
+
+    // Grabbing our input to perform actions on it.
+    const listItemTestID = `listItem-${COUNTRY_NAME}`;
+    const firstListItem = getByTestId(listItemTestID);
+    fireEvent.press(firstListItem);
+
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+});

app/platform/LocalStorage/index.ts

@@ -0,0 +1,26 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+class LocalStorage {
+  setItem(key: string, data: unknown) {
+    return AsyncStorage.setItem(key, JSON.stringify(data));
+  }
+
+  async getItem(key: string) {
+    const data = await AsyncStorage.getItem(key);
+    try {
+      return JSON.parse(data || '');
+    } catch (e) {
+      return data;
+    }
+  }
+
+  mergeItem(key, data) {
+    AsyncStorage.mergeItem(key, JSON.stringify(data));
+  }
+
+  removeItem(key) {
+    AsyncStorage.removeItem(key);
+  }
+}
+
+export default new LocalStorage();

app/router/routeConfigs.ts

@@ -1,4 +1,4 @@
-import { HOME, SEARCH } from './routeNames';
+import {HOME, SEARCH} from './routeNames';
 
 const routeConfigs = {
   [SEARCH]: {

app/router/types.ts

@@ -1,4 +1,4 @@
 export type RootStackParamList = {
-  Home: {};
-  Search: {};
+  Home?: Record<string, unknown>;
+  Search?: Record<string, unknown>;
 };

app/screens/HomeScreen/index.tsx

@@ -1,5 +1,10 @@
+/**
+ *
+ * Home Screen
+ *
+ */
+
 import React, {useState} from 'react';
-// import Text from 'theme/Text';
 import {ScrollView, Text, View, Switch} from 'react-native';
 
 import {
@@ -23,7 +28,8 @@ function HomeScreen(props: HomeScreenProps): React.ReactChild {
   return (
     <ScrollView
       contentInsetAdjustmentBehavior="automatic"
-      style={styles.scrollView}>
+      style={styles.scrollView}
+      testID="homeScreen">
       <Header />
       {global.HermesInternal == null ? null : (
         <View style={styles.engine}>

app/screens/HomeScreen/style.ts

@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import {StyleSheet} from 'react-native';
 import Colors from 'theme/Colors';
 import Dimensions from 'theme/Dimensions';
 

app/screens/HomeScreen/types.ts

@@ -1,6 +1,6 @@
-import { RouteProp } from '@react-navigation/native';
-import { StackNavigationProp } from '@react-navigation/stack';
-import { RootStackParamList } from 'router/types';
+import {RouteProp} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
+import {RootStackParamList} from 'router/types';
 
 type HomeScreenRouteProp = RouteProp<RootStackParamList, 'Home'>;