Fixed #16, #17, #20, #21, #22, #23

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>
   ) 

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,15 +199,15 @@ 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}}
         component={SendCoins1Screen}
       />
       <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 = {

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",

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>

src/components/CreateAccountWIdget/Style.ts

@@ -8,7 +8,7 @@ const Styles = StyleSheet.create({
     paddingVertical: "5%",
   },
   formView: {
-    marginTop: "5%",
+    marginTop: "4%",
     alignItems: "center",
     width:"100%",
   },

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%', 

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;

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 

src/components/SignKey/Style.ts

@@ -22,7 +22,7 @@ const Style = StyleSheet.create({
     alignItems: "center",
   }, 
   numberText: {
-    fontSize: 20,
+    fontSize: 16,
     color: "#63737E",
     // fontWeight: "bold",
   }, 

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() {  

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>
   );
 };