From a60c53220761c685531b759abd714af5340d87dc Mon Sep 17 00:00:00 2001
From: Severyn <skatolyk@gmail.com>
Date: Sat, 7 Aug 2021 16:30:55 -0400
Subject: [PATCH] Fixed #16, #17, #20, #21, #22, #23

---
 App.tsx                                       | 12 ++--
 Navigator.tsx                                 | 68 +++++++++++++------
 package.json                                  |  1 +
 src/assets/svg/PullDown.svg                   |  3 +
 .../CreateAccountWidget.tsx                   |  4 +-
 src/components/CreateAccountWIdget/Style.ts   |  2 +-
 src/components/CustomButton/Style.ts          |  3 +-
 src/components/CustomButton/index.tsx         | 47 ++++++++-----
 .../CustomWidgets/DoneModalview.tsx           |  2 +-
 src/components/SignKey/Style.ts               |  2 +-
 src/views/Connect/Connect.tsx                 |  2 +-
 src/views/Friends/Friends.tsx                 | 23 ++++++-
 src/views/Login/Login.tsx                     | 10 ++-
 src/views/MyAccount/Overview.tsx              | 26 +++++++
 src/views/MyAccount/Style.ts                  |  7 ++
 src/views/SendCoins1/SendCoins1.tsx           | 12 ++--
 src/views/Settings/Settings.tsx               | 16 +++++
 src/views/Transactions/Transactions.tsx       | 30 ++++++--
 18 files changed, 205 insertions(+), 65 deletions(-)
 create mode 100644 src/assets/svg/PullDown.svg

diff --git a/App.tsx b/App.tsx
index bedd7d7a..75660cdc 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,18 +1,18 @@
-import * as React from "react"; 
+import React, { useEffect, useState } from "react";
 import { Provider } from 'react-redux'
 import Navigator from "./Navigator";
 import { PersistGate } from 'redux-persist/integration/react';
 import configureStore from './src/store/store'; 
 import { persistStore, persistReducer } from 'redux-persist';  
-const store = configureStore();
-//const prefix = Linking.createURL('/');
-const persistor = persistStore(store);  
+const store = configureStore(); 
+const persistor = persistStore(store);   
+
+const App = (props) => {   
 
-const App = (props) => {  
   return (
     <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
-      <Navigator />
+      <Navigator isLogin={false}/>
       </PersistGate>
     </Provider>
   ) 
diff --git a/Navigator.tsx b/Navigator.tsx
index 8a289b7e..3b3026c3 100644
--- a/Navigator.tsx
+++ b/Navigator.tsx
@@ -30,8 +30,9 @@ import ScanCode from "assets/svg/ScanCode.svg";
 import TNBLogo from "assets/svg/TNBLogo.svg";
 
 
-const Navigator = ({route}) => {
+const Navigator = ({route, isLogin}) => {
   const Stack = createStackNavigator(); 
+  
   return (
     <LinearGradient
       colors={["#62737E", "#040505"]}
@@ -42,14 +43,14 @@ const Navigator = ({route}) => {
     >
       <NavigationContainer theme={MainTheme}>
         <Stack.Navigator>
-          <Stack.Screen
+          {!isLogin &&<Stack.Screen
             name="connec"
             component={ConnectScreen}
             options={({ navigation }) =>
             qrCodeHeaderOptions("", navigation)
             }
             
-          />
+          />}
           <Stack.Screen
             name="createAccount"
             component={CreateAccountScreen}
@@ -68,7 +69,7 @@ const Navigator = ({route}) => {
           <Stack.Screen
             options={headerOptions}
             name="tab" 
-            component={TabNavigator}
+            component={TabNavigator}  
           />
         </Stack.Navigator>
       </NavigationContainer>
@@ -78,13 +79,13 @@ const Navigator = ({route}) => {
 
 const TabIcon = ({ icon, text, focused }) => {
   return (
-    <View style={{ alignItems: "center", justifyContent: "center", top: 10 }}>
+    <View style={{ alignItems: "center", justifyContent: "center", top: -6, borderTopColor:'red', borderTopWidth: focused ? 2 : 0, paddingTop:11}}>
       {icon}
       <Text
         style={{
           color: focused ? "#FFF" : "#62737E",
           fontSize: 10,
-          marginTop: 10,
+          marginTop: 8,
         }}
       >
         {text}
@@ -94,15 +95,15 @@ const TabIcon = ({ icon, text, focused }) => {
 };
 
 const TabNavigator = ({route}) => {
-  const Tab = createBottomTabNavigator();   
+  const Tab = createBottomTabNavigator();    
   return (
     <Tab.Navigator
       tabBarOptions={{ showLabel: false, style: tabStyle, keyboardHidesTabBar: true}}
-      initialRouteName="overview" 
+      initialRouteName="overview"   
     >
       <Tab.Screen
-        name="overview"
-        options={{
+        name="overview" 
+        options={{ 
           tabBarIcon: ({ focused }) => (
             <TabIcon
               text="My Accounts"
@@ -198,7 +199,7 @@ const OverviewStackScreen = ({route}) => {
       />
       <OverviewStack.Screen
         options={({ navigation }) =>
-          stackheaderOptions("Send Coins", navigation)
+          stackSendCoinheaderOptions("Send Coins", navigation)
         }
         name="sendcoins1"
         initialParams={{validator_accounts: route.params.validator_accounts, bank_url: route.params.bank_url}}
@@ -206,7 +207,7 @@ const OverviewStackScreen = ({route}) => {
       />
       <OverviewStack.Screen
         options={({ navigation }) =>
-          stackheaderOptions("Send Coins", navigation)
+          stackSendCoinheaderOptions("Send Coins", navigation)
         }
         name="sendcoins2"
         component={SendCoins2Screen}
@@ -251,11 +252,11 @@ const qrCodeHeaderOptions = (title, navigation) => {
       shadowOpacity: 0,
     }, 
     headerTitle: title,
-      headerRight: () => (
-        <TouchableOpacity onPress={openCameraWithPermission}>
-          <ScanCode />
-        </TouchableOpacity>
-      ), 
+      // headerRight: () => (
+      //   <TouchableOpacity onPress={openCameraWithPermission}>
+      //     <ScanCode />
+      //   </TouchableOpacity>
+      // ), 
     headerLeft: () => <TNBLogo />, 
   }; 
 };
@@ -295,7 +296,7 @@ const headerOptions = {
     shadowOpacity: 0,
   },
   headerTitle: "",
-  headerLeft: () => null,
+  headerLeft: () => null,   
 };
 
 
@@ -315,6 +316,29 @@ const stackheaderOptions = (title, navigation) => {
   };
 };
 
+const stackSendCoinheaderOptions = (title, navigation) => {
+  return {
+    headerStyle: {
+      elevation: 0,
+      shadowOpacity: 0,
+      backgroundColor: "transparent", 
+    },
+    headerLeft: () => (
+      <TouchableOpacity style={{left:10}} onPress={() => navigation.goBack(null)}>
+        <ArrowBack />
+      </TouchableOpacity>
+    ),
+    headerRight: () => (
+      <TouchableOpacity onPress={openCameraWithPermission}>
+        <ScanCode />
+      </TouchableOpacity>
+    ),
+    headerTitle: () => <Text style={headingStyle}>{title}</Text>,
+  };
+};
+
+     
+
 const tabStyle = {
   position: "absolute",
   bottom: 25,
@@ -323,9 +347,11 @@ const tabStyle = {
   elevation: 0,
   borderRadius: 16,
   height: 65,
-  backgroundColor: "#2B4150",
-  borderWidth: 0,
-  borderColor: "#62737E",
+  backgroundColor: "linear-gradient(20.23deg, rgba(53, 96, 104, 0.6) -4.86%, rgba(29, 39, 49, 0.6) 110.32%)",
+  //borderWidth: 0,
+  borderColor: "#62737E", 
+  // borderTopColor: 'red',
+  // borderTopWidth: 1,
 };
 
 const headingStyle = {
diff --git a/package.json b/package.json
index 136515f3..9248639c 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
     "react-native-spinkit": "^1.5.1",
     "react-native-svg": "^12.1.1",
     "react-native-svg-transformer": "^0.14.3",
+    "react-native-swipe-gestures": "^1.0.5",
     "react-native-tweetnacl": "^1.0.5",
     "react-native-uuid": "^2.0.1",
     "react-native-vector-icons": "^8.1.0",
diff --git a/src/assets/svg/PullDown.svg b/src/assets/svg/PullDown.svg
new file mode 100644
index 00000000..3aaca1ca
--- /dev/null
+++ b/src/assets/svg/PullDown.svg
@@ -0,0 +1,3 @@
+<svg width="50" height="5" viewBox="0 0 50 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="50" height="5" rx="2.5" fill="#395863"/>
+</svg>
diff --git a/src/components/CreateAccountWIdget/CreateAccountWidget.tsx b/src/components/CreateAccountWIdget/CreateAccountWidget.tsx
index 3de21801..7b95b790 100644
--- a/src/components/CreateAccountWIdget/CreateAccountWidget.tsx
+++ b/src/components/CreateAccountWIdget/CreateAccountWidget.tsx
@@ -11,7 +11,7 @@ import { BlurView, VibrancyView } from "@react-native-community/blur";
 import LinearGradient from 'react-native-linear-gradient';
 import {Account} from 'thenewboston/dist/index.js'  
 import { SigningKeyAction, AccountNumberAction } from '../../actions/loginActions';
-import { useSelector, useDispatch} from 'react-redux';
+import { useSelector, useDispatch} from 'react-redux'; 
 
 interface createAccount {
     title: string,
@@ -83,7 +83,7 @@ const CreateAccountWidget = (props: createAccount) => {
     
     return (
         <View style={Style.container}>
-        <View style={Style.formView}>
+        <View style={Style.formView}> 
           <Text style={[Typography.FONT_REGULAR, Style.heading]}>
             {props.title}
           </Text>
diff --git a/src/components/CreateAccountWIdget/Style.ts b/src/components/CreateAccountWIdget/Style.ts
index 1e3f836a..e02c159c 100644
--- a/src/components/CreateAccountWIdget/Style.ts
+++ b/src/components/CreateAccountWIdget/Style.ts
@@ -8,7 +8,7 @@ const Styles = StyleSheet.create({
     paddingVertical: "5%",
   },
   formView: {
-    marginTop: "5%",
+    marginTop: "4%",
     alignItems: "center",
     width:"100%",
   },
diff --git a/src/components/CustomButton/Style.ts b/src/components/CustomButton/Style.ts
index c1168112..2f017ca0 100644
--- a/src/components/CustomButton/Style.ts
+++ b/src/components/CustomButton/Style.ts
@@ -10,7 +10,8 @@ const Styles = StyleSheet.create({
     justifyContent: "center",
     marginTop: 25,
     marginBottom: 30,
-    borderRadius: 12, 
+    borderRadius: 12,   
+    
   },
   containerStyle:{
     width:'100%', 
diff --git a/src/components/CustomButton/index.tsx b/src/components/CustomButton/index.tsx
index 749985ec..1e7f2f4c 100644
--- a/src/components/CustomButton/index.tsx
+++ b/src/components/CustomButton/index.tsx
@@ -2,7 +2,8 @@ import { Button } from "react-native-elements";
 import { Colors } from "../../styles";
 import React from "react";
 import Style from "./Style";
-import { View } from "react-native";
+import { View, Text} from "react-native";
+import { TouchableOpacity } from "react-native-gesture-handler";
 
 type SelectProps = {
   title: any;
@@ -30,23 +31,33 @@ const CustomButton = ({
   loading,
   ...rest
 }: SelectProps) => (
-  <Button
-    {...rest}
-    type={buttonType}
-    title={title}
-    titleStyle={{
-      color: buttonColor,
-      fontSize: 16,
-      fontFamily: "Inter-Regular",
-    }}
-    buttonStyle={[Style.buttonStyle, customStyle]}
-    loadingProps={{ color: Colors.WHITE }}
-    containerStyle={Style.containerStyle}
-    // disabled={disabled}
-    disabled = {isDisable}
-    loading={loading}
-    onPress={()=>onPress()}
-  />
+  <TouchableOpacity 
+    onPress={()=>onPress()} 
+    disabled = {isDisable} 
+    containerStyle={Style.containerStyle} 
+    style ={[Style.buttonStyle, customStyle]}
+    activeOpacity={0.95}>
+   <Text style={{fontSize: 16, fontFamily: "Inter-Regular", color: buttonColor}}>
+   {title}
+   </Text>
+  </TouchableOpacity>
+  // <Button
+  //   {...rest}
+  //   type={buttonType}
+  //   title={title}
+  //   titleStyle={{
+  //     color: buttonColor,
+  //     fontSize: 16,
+  //     fontFamily: "Inter-Regular",
+  //   }}
+  //   buttonStyle={[Style.buttonStyle, customStyle]}
+  //   loadingProps={{ color: Colors.WHITE }}
+  //   containerStyle={Style.containerStyle}
+  //   // disabled={disabled}
+  //   disabled = {isDisable}
+  //   loading={loading}
+  //   onPress={()=>onPress()}
+  // />
 );
 
 export default CustomButton;
diff --git a/src/components/CustomWidgets/DoneModalview.tsx b/src/components/CustomWidgets/DoneModalview.tsx
index 79f25418..ef51f17a 100644
--- a/src/components/CustomWidgets/DoneModalview.tsx
+++ b/src/components/CustomWidgets/DoneModalview.tsx
@@ -1,7 +1,7 @@
 import { Colors, Custom, Typography } from "../../styles";
 import React, { useEffect, useState } from "react";
 import { ScrollView, Text, View } from "react-native";
-import DoneSvg from "../../assets/svg/Done.svg"
+import DoneSvg from "assets/svg/Done.svg"
  
 
 // components 
diff --git a/src/components/SignKey/Style.ts b/src/components/SignKey/Style.ts
index 16693ca9..f9e99081 100644
--- a/src/components/SignKey/Style.ts
+++ b/src/components/SignKey/Style.ts
@@ -22,7 +22,7 @@ const Style = StyleSheet.create({
     alignItems: "center",
   }, 
   numberText: {
-    fontSize: 20,
+    fontSize: 16,
     color: "#63737E",
     // fontWeight: "bold",
   }, 
diff --git a/src/views/Connect/Connect.tsx b/src/views/Connect/Connect.tsx
index d2b5a5e5..5dc2a8d6 100644
--- a/src/views/Connect/Connect.tsx
+++ b/src/views/Connect/Connect.tsx
@@ -61,7 +61,7 @@ const connectScreen = ({navigation: {navigate}}: connects) => {
   useEffect(() => {   
     LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
     getSeedESP();
-    handleLogin();
+    //handleLogin();
   }, []); 
 
   async function getSeedESP() {  
diff --git a/src/views/Friends/Friends.tsx b/src/views/Friends/Friends.tsx
index 21afb40c..435b5a0c 100644
--- a/src/views/Friends/Friends.tsx
+++ b/src/views/Friends/Friends.tsx
@@ -2,6 +2,7 @@ import { Colors, Custom, Typography } from "styles";
 import React, { useEffect, useState } from "react"; 
 import { ScrollView, Text, TouchableOpacity, View, Modal, ActivityIndicator} from "react-native";
 import { useSelector, useDispatch} from 'react-redux';
+import GestureRecognizer from 'react-native-swipe-gestures';
 
 import Style from "./Style"; 
 import Accounts from "../../components/Accounts/Accounts";
@@ -70,8 +71,28 @@ const FriendsScreen = ({ route, navigation }) => {
 
   }
 
+  const config = {
+    velocityThreshold: 0.3,
+    directionalOffsetThreshold: 50
+  };
+
+  const onSwipeRight = (state) =>{
+    navigation.navigate('transactions')
+  }
+
+  const onSwipeLeft = (state) =>{ 
+    navigation.navigate('settings')
+  }
+
+
   return (
     <View style={Style.container}  ref={(viewRef) => { setViewRef(viewRef); }}> 
+    <GestureRecognizer 
+        onSwipeLeft={(state) => onSwipeLeft(state)}
+        onSwipeRight={(state) => onSwipeRight(state)} 
+        config={config} 
+        style={Style.container}
+        >  
       <View style={{ alignItems: "center"}} >
         <Text style={Style.heading}>{'My friends'}</Text> 
         <Accounts
@@ -220,7 +241,7 @@ const FriendsScreen = ({ route, navigation }) => {
             }} /> 
         </LinearGradient>  
       </Modal>
-
+      </GestureRecognizer>
     </View>
   );
 };
diff --git a/src/views/Login/Login.tsx b/src/views/Login/Login.tsx
index c28202ed..a1fa5e6e 100644
--- a/src/views/Login/Login.tsx
+++ b/src/views/Login/Login.tsx
@@ -6,6 +6,8 @@ import { BlurView, VibrancyView } from "@react-native-community/blur";
 import LinearGradient from 'react-native-linear-gradient'; 
 import { TouchableOpacity } from "react-native-gesture-handler";  
 import {Account, Bank} from 'thenewboston' 
+import { useSelector, useDispatch} from 'react-redux';
+import { IAppState } from 'store/store'; 
 import Style from "./Style";
 
 import CustomButton from "components/CustomButton";
@@ -30,6 +32,7 @@ const LoginScreen = ({ navigation, route }:login) => {
   const [nickName, setNickName] = useState(route.params.nickName)
   const [accounts, setAccounts] = useState(route.params.accounts)
   const [validAccounts, setValidAccounts] = useState(route.params.validator_accounts)
+  const lNickname = useSelector((state: IAppState) => state.loginState.nickName);
  
   const goToPasswordLogin = () => { 
     navigation.navigate("loginPassword", { 
@@ -53,8 +56,11 @@ const LoginScreen = ({ navigation, route }:login) => {
       validator_accounts = [...validator_accounts, ...part_accounts.results]; 
     } 
     setValidAccounts(validator_accounts);
-    onLoginScreen();
-    console.log(allAccounts)
+    if(nickName == "" || nickName == null){
+      setNickName(lNickname)
+    }
+    onLoginScreen(); 
+    
   }
 
   useEffect(() => {  
diff --git a/src/views/MyAccount/Overview.tsx b/src/views/MyAccount/Overview.tsx
index 6ebad6da..0fd0bafc 100644
--- a/src/views/MyAccount/Overview.tsx
+++ b/src/views/MyAccount/Overview.tsx
@@ -17,6 +17,7 @@ import {
   NativeModules
 } from "react-native";
 import Style from "./Style"; 
+import GestureRecognizer from 'react-native-swipe-gestures';
 
 import Accounts from "components/Accounts/Accounts";
 import CustomButton from "components/CustomButton";
@@ -28,6 +29,7 @@ import InfoModalWidget from "components/InfoModalWidgets/InfoModalview";
 import { AccountAction } from 'actions/accountActions'
 import DeleteAccount from './DeleteAccount/DeleteAccount' 
 import Refresh from "assets/svg/Refresh.svg";  
+import DoneSvg from "assets/svg/PullDown.svg"
 
 const OverviewScreen = ({ route, navigation }) => {
  
@@ -184,8 +186,27 @@ const OverviewScreen = ({ route, navigation }) => {
     } 
   }
 
+  const config = {
+    velocityThreshold: 0.3,
+    directionalOffsetThreshold: 50
+  };
+
+  const onSwipeLeft = (state) =>{
+      navigation.navigate('transactions')
+  }
+
+  const onSwipeDown = (state) =>{
+    setModalVisible(false);
+  }
+
   return (
     <View style={Style.container}  ref={(viewRef) => { setViewRef(viewRef); }}> 
+      <GestureRecognizer  
+            onSwipeLeft={(state) => onSwipeLeft(state)} 
+            onSwipeDown={(state) => onSwipeDown(state)} 
+            config={config} 
+            style={Style.container}
+        >
       <View style={{ alignItems: "center"}} >
         <Text style={Style.heading}>{actName}</Text> 
         <Accounts
@@ -265,6 +286,10 @@ const OverviewScreen = ({ route, navigation }) => {
           reducedTransparencyFallbackColor="white"
         />
         <View style={Style.modalContainer}>
+          <View style= {Style.pulldonwContainer}>
+            <DoneSvg width="15%" height="5%" />
+          </View>
+        
           <ScrollView showsVerticalScrollIndicator={false}>
           <CreateAccountWidget title={"Create or Add Account"}
             navigation={navigation}
@@ -405,6 +430,7 @@ const OverviewScreen = ({ route, navigation }) => {
               /> 
           </LinearGradient>  
       </Modal>
+      </GestureRecognizer>
     </View>
   );
 };
diff --git a/src/views/MyAccount/Style.ts b/src/views/MyAccount/Style.ts
index d082d68d..cca54613 100644
--- a/src/views/MyAccount/Style.ts
+++ b/src/views/MyAccount/Style.ts
@@ -51,6 +51,13 @@ const Styles = StyleSheet.create({
     overflow: 'hidden',
     padding:15
   },
+  pulldonwContainer:{  
+    position:'absolute',
+    width:'100%', 
+    height:'100%',
+    alignSelf:'center',
+    alignItems:'center'
+  },
   doModalContainer:{
     height: '60%',
     width:'94%', 
diff --git a/src/views/SendCoins1/SendCoins1.tsx b/src/views/SendCoins1/SendCoins1.tsx
index 0c09df56..0d196967 100644
--- a/src/views/SendCoins1/SendCoins1.tsx
+++ b/src/views/SendCoins1/SendCoins1.tsx
@@ -10,7 +10,7 @@ import Style from "./Style";
 import CustomButton from "components/CustomButton"; 
 import CustomInput from "components/CustomInput"; 
 import { IAppState } from 'store/store';
-
+import { Button } from "react-native-elements";
 
 
 const SendCoins1Screen = (props) => {
@@ -49,9 +49,10 @@ const SendCoins1Screen = (props) => {
   ));
   const [tos, setTos] = useState(_tos);   
   const [from, setFrom] = useState("Select"); 
-  const [to, setTo] = useState("To"); 
+  const [to, setTo] = useState("To");  
+
+  useEffect(() => {   
 
-  useEffect(() => {  
     setTimeout(() => {
       var fromDatas: Array<ISingleSelectDataType> = [];
       froms.map((item, i) => {
@@ -69,6 +70,7 @@ const SendCoins1Screen = (props) => {
 
     }, 2000);
   }, []);
+ 
 
   const handleSubmit = () => {
     let selectFrom;
@@ -97,7 +99,7 @@ const SendCoins1Screen = (props) => {
   return (
     <View style={Style.container}>
       <ScrollView showsVerticalScrollIndicator={false}>
-        <View style={Style.formView}> 
+        <View style={Style.formView} > 
           <RNSingleSelect
             data={fromData}
             arrowImageStyle={{width: 15, height: 10}}
@@ -141,7 +143,7 @@ const SendCoins1Screen = (props) => {
               setMemo(value);
             }}
             autoCapitalize="none"
-          />
+          />  
 
           <CustomButton
             title="Next"
diff --git a/src/views/Settings/Settings.tsx b/src/views/Settings/Settings.tsx
index d3257de8..23b490e3 100644
--- a/src/views/Settings/Settings.tsx
+++ b/src/views/Settings/Settings.tsx
@@ -4,6 +4,7 @@ import { ScrollView, Text, View, BackHandler, Modal} from "react-native";
 import Style from "./Style";  
 import LinearGradient from 'react-native-linear-gradient';
 import { BlurView, VibrancyView } from "@react-native-community/blur"; 
+import GestureRecognizer from 'react-native-swipe-gestures';
 
 import CustomButton from "components/CustomButton";   
 import YesNoModalViewScreen from "components/InfoModalWidgets/YesNoModalview";  
@@ -24,9 +25,23 @@ const SettingsScreen = ({ route, navigation }) => {
     const onSetNickName = (updateName) =>{
         setlNickName(updateName)
     } 
+
+    const config = {
+        velocityThreshold: 0.3,
+        directionalOffsetThreshold: 50
+    };
+
+    const onSwipeRight = (state) =>{
+        navigation.navigate('friends')
+    }
     
     return (
         <View style={Style.container}  ref={(viewRef) => { setViewRef(viewRef); }}> 
+        <GestureRecognizer  
+            onSwipeRight={(state) => onSwipeRight(state)} 
+            config={config} 
+            style={Style.container}
+        >
             <View style={{ alignItems: "center"}} >
             <Text style={Style.heading}>{'Settings'}</Text>  
             </View>  
@@ -86,6 +101,7 @@ const SettingsScreen = ({ route, navigation }) => {
                     /> 
                 </LinearGradient>  
             </Modal>
+        </GestureRecognizer>
     </View> 
     );
 };
diff --git a/src/views/Transactions/Transactions.tsx b/src/views/Transactions/Transactions.tsx
index 8f8abda5..aa4edc9d 100644
--- a/src/views/Transactions/Transactions.tsx
+++ b/src/views/Transactions/Transactions.tsx
@@ -9,12 +9,13 @@ import {
 import {Account, Bank, Transaction} from 'thenewboston/dist/index.js';
 import Style from "./Style";
 import { useSelector, useDispatch} from 'react-redux';
+import GestureRecognizer from 'react-native-swipe-gestures';
 
 import { IAppState } from 'store/store'; 
 import CustomButton from "components/CustomButton";  
 import TransactionItem from "components/TransactionItem/TransactionItem"; 
 
-const TransactionsScreen = ({route}) => {
+const TransactionsScreen = ({route, navigation}) => { 
   const {nickname, bank_url, login} = route.params; 
   const [transactions, setTransactions] = useState(null);    
   const lAccounts = useSelector((state: IAppState) => state.accountState.account);
@@ -42,14 +43,33 @@ const TransactionsScreen = ({route}) => {
     
   }, []);
 
-  return (
-    <View style={Style.container}>
+  const config = {
+    velocityThreshold: 0.3,
+    directionalOffsetThreshold: 50
+  };
+
+  const onSwipeRight = (state) =>{
+    navigation.navigate('overview')
+  }
+
+  const onSwipeLeft = (state) =>{ 
+    navigation.navigate('friends')
+  }
+
+  return ( 
+     
+    <GestureRecognizer 
+        onSwipeLeft={(state) => onSwipeLeft(state)}
+        onSwipeRight={(state) => onSwipeRight(state)} 
+        config={config} 
+        style={Style.container}
+        >  
       <View style={{ alignItems: "center" }}>
         <Text style={[Custom.mb10, { color: "#62737E" }]}>{nickname}</Text>
         <Text style={Style.heading}>Transactions</Text>
       </View> 
       {spinVisible && <ActivityIndicator size="large" color="white" style={{justifyContent:'center', marginTop:'35%'}}></ActivityIndicator>}
-      {!spinVisible && <FlatList
+      {!spinVisible && <FlatList 
         data={transactions != null && transactions != null ? transactions : null}
         renderItem={({ item, index }) => (
           <TransactionItem
@@ -70,7 +90,7 @@ const TransactionsScreen = ({route}) => {
           loading={false}
           customStyle={Style.bottomArea}
       />
-    </View>
+    </GestureRecognizer>
   );
 };