Added README.md file and added steps to setup app

Added screenshots
Fixed a bug

README.md

@@ -0,0 +1,86 @@
+<img src="assets/exchange.svg" alt="Logo" width="100" style="text-align: center;" >
+
+# Currency Converter (react-native)
+
+
+## How to run
+- Install nodejs
+- Install react-native globally (npm i -g react-native)
+- Install XCode or Android Studio
+- cd appFolder
+- npm i
+- npm run ios or npm i android
+
+
+
+This project contains react-native application to convert currencies with following features:
+
+## Screens:
+
+### Splash Screen
+
+This page is shown for a very short duration before loading app state like saved auth state, theme, favorite currencies.
+
+### Login
+This screen contains username and password inputs and a button. When login button is pressed, credentials are matched and if valid credentials are provided, it will navigate to Home screen. 
+Credentials:
+username: Admin
+password: Admin
+
+<img src="assets/login1.png" alt="Login Screen Keyboard Closed" width="250"/>
+<img src="assets/login2.png" alt="Login Screen Keyboard Open" width="250"/>
+
+### Home
+Home screen contains an animated logo showing base currency and target currency and two currency fields.
+Writing in one input, 2nd input shows converted value for target currency. User can switch base and target currencies either by clicking on animated logo icon or a conversion icon between two inputs. Every input field has a addon which shows selecetd currency. On clicking/toching addOn, Currencies List screen is shown.
+
+<img src="assets/home.png" alt="Home Screen" width="250"/>
+
+### Currencies List
+Currencies List screen contains all currencies supported by the currency api to fetch currencies exchange rates. 
+Api url: https://api.exchangeratesapi.io 
+
+<img src="assets/currencies.png" alt="Currencies Screen" width="250"/>
+
+### Themes
+Themes screen contains a FlatList which shows Theme item which contains name and color in every row. On clicking color circle/icon, app theme gets changed and applied all over app.
+
+<span style="color: #ff7875">*Red*</span>
+
+<span style="color: #ff7a45">*Volcano*</span>
+
+<span style="color: #ffa940">*Orange*</span>
+
+<span style="color: #ffc53d">*Gold*</span>
+
+<span style="color: #bae637">*Lime*</span>
+
+<span style="color: #73d13d">*Green*</span>
+
+<span style="color: #36cfc9">*Cyan*</span>
+
+<span style="color: #40a9ff">*Blue*</span>
+
+<span style="color: #597ef7">*Geekblue*</span>
+
+<span style="color: #9254de">*Purple*</span>
+
+<span style="color: #f759ab">*Magenta*</span>
+
+<span style="color: #737373">*Grey*</span>
+
+<img src="assets/themes.png" alt="Themes Screen" width="250"/>
+
+### Options
+This screen contains links to other pages in app like Themes, Favorties, an external link to Api being used for currency conversion and logout button which removes auth state and moves users to Login screen.
+
+<img src="assets/options.png" alt="Options Screen" width="250"/>
+
+### Favorites
+This page contains user's favorite currencies which user can mark favorite from Currency List screen.
+
+<img src="assets/favorites.png" alt="Favorties Screen" width="250"/>
+
+
+## Testing & Code Coverage
+This is a work in progress.

components/App.js

@@ -3,7 +3,7 @@
  */
 import 'react-native-gesture-handler';
 import React, { useEffect, useCallback } from 'react';
-import { Platform } from 'react-native';
+import { Keyboard } from 'react-native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
 import { Provider, useSelector, useDispatch } from 'react-redux';
@@ -82,6 +82,7 @@ function App() {
                     underlayColor="#fff"
                     onPress={() => {
                       navigation.navigate(SCREENS.OPTIONS);
+                      Keyboard.dismiss();
                     }}>
                     <HeaderMenuIcon icon={faBars} size={20} />
                   </HeaderIconContainer>
@@ -129,7 +130,6 @@ function App() {
 export default () => (
   <Provider store={store}>
     <PersistGate loading={<SplashScreen />} persistor={persistor}>
-      {/* {Platform.OS === 'ios' && <StatusBar barStyle="light-content" />} */}
       <App />
     </PersistGate>
   </Provider>

components/SvgLogo.js

@@ -85,7 +85,7 @@ function SvgLogo({ fill, width, height, showInfo, style }) {
                 fontWeight="bold"
                 textAnchor="middle"
                 transform={inverted ? 'rotate(180, 120, 135)' : 'rotate(0)'}>
-                {baseCurrency}
+                {inverted ? targetCurrency : baseCurrency}
               </Text>
             )}
           </G>
@@ -110,7 +110,7 @@ function SvgLogo({ fill, width, height, showInfo, style }) {
                 fontSize="30"
                 fontWeight="bold"
                 transform={inverted ? 'rotate(180, 375, 379)' : 'rotate(0)'}>
-                {targetCurrency}
+                {inverted ? baseCurrency : targetCurrency}
               </Text>
             )}
           </G>

ios/Podfile

@@ -77,7 +77,6 @@ target 'CurrencyConverter' do
   pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
   pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
 
-  pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-community/async-storage'
 
   target 'CurrencyConverterTests' do
     inherit! :complete

ios/Podfile.lock

@@ -499,6 +499,6 @@ SPEC CHECKSUMS:
   Yoga: 3ebccbdd559724312790e7742142d062476b698e
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: 1c7922a464f8c0e43ff6399d23bb349e56201d70
+PODFILE CHECKSUM: bc10d8d8dbd7687d7dc57d1130e5c52393a36c49
 
 COCOAPODS: 1.9.3

sagas/app.sagas.js

@@ -9,7 +9,6 @@ import {
   setAuthState,
   LOGIN,
   LOGOUT,
-  SET_THEME,
   INITIALIZE_APP_STATE,
 } from '../actions/app.actions';
 import { AUTH_STATES, THEMES_MAP, PRIMARY_INDEX } from '../constants';
@@ -42,38 +41,8 @@ function* watchLogout() {
     yield put(logout.error());
   }
 }
-// TODO: Need to remove this in redux-persist will perform well without issues
-function* watchInitializeAppState() {
-  try {
-    let appTheme = THEMES_MAP.Blue;
-    try {
-      authState = yield call(AsyncStorage.getItem, 'authState');
-    } catch (error) {
-      authState = AUTH_STATES.LOGGED_OUT;
-    }
-    try {
-      appTheme = yield call(AsyncStorage.getItem, 'appTheme');
-      appTheme = JSON.parse(appTheme);
-    } catch (error) {
-      appTheme = THEMES_MAP.Blue;
-    }
-    yield call(sleep, 500);
-    yield put(setAuthState(authState || AUTH_STATES.LOGGED_OUT));
-    let selectedTheme = appTheme || THEMES_MAP.Blue;
-    selectedTheme = {
-      ...selectedTheme,
-      get color() {
-        return selectedTheme.shades[PRIMARY_INDEX];
-      },
-    };
-    yield put(setTheme(selectedTheme));
-  } catch (e) {
-    console.log('Error', e);
-  }
-}
 
 export default [
   takeLatest(LOGIN.PENDING, watchLogin),
   takeLatest(LOGOUT.PENDING, watchLogout),
-  takeLatest(INITIALIZE_APP_STATE, watchInitializeAppState),
 ];