diff --git a/src/assets/svg/index.html b/src/assets/svg/index.html
deleted file mode 100644
index adf63b111c3fd87eab98048bc3b5efd2eca0b058..0000000000000000000000000000000000000000
--- a/src/assets/svg/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<html>
-<head>
- <style>
- img {
- max-width: 30px;
- }
- </style>
-</head>
-<body style="background-color: gray">
- <img src="activities.svg" >
- <img src="attachments.svg" >
- <img src="bank.svg" >
- <img src="barcode.svg" >
- <img src="bell.svg" >
- <img src="building.svg" >
- <img src="connections.svg" >
- <img src="content.svg" >
- <img src="credential.svg" >
- <img src="credential-check.svg" >
- <img src="credential-round.svg" >
- <img src="credential_card.svg" >
- <img src="download.svg" >
- <img src="e-mail.svg" >
- <img src="exclamation.svg" >
- <img src="face-id.svg" >
- <img src="fingerprint.svg" >
- <img src="hash.svg" >
- <img src="id.svg" >
- <img src="import-wallet.svg" >
- <img src="index.html" >
- <img src="info.svg" >
- <img src="initialization.svg" >
- <img src="language.svg" >
- <img src="lock.svg" >
- <img src="lock_icon.svg" >
- <img src="logout.svg" >
- <img src="mnemonic.svg" >
- <img src="new_connection.svg" >
- <img src="person.svg" >
- <img src="phone.svg" >
- <img src="privacy.svg" >
- <img src="question.svg" >
- <img src="scan.svg" >
- <img src="seal_history.svg" >
- <img src="search.svg" >
- <img src="settings.svg" >
- <img src="turn.svg" >
- <img src="wallet.svg" >
-</body>
-</html>
diff --git a/src/assets/svg/scan-qr.svg b/src/assets/svg/scan-qr.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6fc54f77b0870b2494af0373cfca8878caa34321
--- /dev/null
+++ b/src/assets/svg/scan-qr.svg
@@ -0,0 +1,83 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="100%" viewBox="0 0 152 154" enable-background="new 0 0 152 154" xml:space="preserve">
+
+<path fill="#FFFFFF" opacity="1.000000" stroke="none"
+ d="
+M58.599457,22.392736
+ C58.941338,26.353436 58.941338,29.977104 58.941338,33.989258
+ C50.887131,33.989258 43.139553,33.989258 35.005928,33.989258
+ C35.005928,42.122940 35.005928,49.869415 35.005928,57.801895
+ C30.869040,57.801895 27.131340,57.801895 23.201620,57.801895
+ C23.201620,45.866089 23.201620,34.128132 23.201620,22.055704
+ C35.018871,22.055704 46.638226,22.055704 58.599457,22.392736
+z"/>
+<path fill="#FFFFFF" opacity="1.000000" stroke="none"
+ d="
+M111.002266,22.000000
+ C117.809959,22.000000 124.118515,22.000000 130.712769,22.000000
+ C130.712769,33.948997 130.712769,45.684761 130.712769,57.711327
+ C127.057076,57.711327 123.317024,57.711327 119.175781,57.711327
+ C119.175781,50.059387 119.175781,42.313435 119.175781,34.175735
+ C111.054062,34.175735 103.310219,34.175735 95.286407,34.175735
+ C95.286407,30.052572 95.286407,26.312593 95.286407,22.000000
+ C100.303696,22.000000 105.403412,22.000000 111.002266,22.000000
+z"/>
+<path fill="#FFFFFF" opacity="1.000000" stroke="none"
+ d="
+M46.985931,130.000000
+ C38.848377,130.000000 31.207720,130.000000 23.284264,130.000000
+ C23.284264,118.044586 23.284264,106.308586 23.284264,94.285248
+ C26.949869,94.285248 30.689878,94.285248 34.831436,94.285248
+ C34.831436,101.949181 34.831436,109.694382 34.831436,117.832001
+ C42.955017,117.832001 50.698219,117.832001 58.717693,117.832001
+ C58.717693,121.955772 58.717693,125.695663 58.717693,130.000000
+ C55.026810,130.000000 51.254818,130.000000 46.985931,130.000000
+z"/>
+<path fill="#FFFFFF" opacity="1.000000" stroke="none"
+ d="
+M95.002228,120.167786
+ C96.275635,119.126328 97.535484,118.109375 98.820557,118.076447
+ C105.310326,117.910149 111.806664,118.000008 118.702354,118.000008
+ C118.702354,110.182884 118.702354,102.437721 118.702354,94.347595
+ C122.829338,94.347595 126.569038,94.347595 130.658783,94.347595
+ C130.658783,105.828926 130.658783,117.571838 130.658783,129.658264
+ C119.161407,129.658264 107.421913,129.658264 95.000305,129.658264
+ C95.000305,126.816856 95.000305,123.731476 95.002228,120.167786
+z"/>
+<path fill="#FFFFFF" opacity="1.000000" stroke="none"
+ d="
+M55.049686,70.000000
+ C52.242882,70.000000 49.927132,70.000000 47.306309,70.000000
+ C47.306309,62.090122 47.306309,54.351261 47.306309,46.304596
+ C54.912769,46.304596 62.651733,46.304596 70.696960,46.304596
+ C70.696960,53.915993 70.696960,61.654903 70.696960,70.000000
+ C65.728073,70.000000 60.634407,70.000000 55.049686,70.000000
+z"/>
+<path fill="#FFFFFF" opacity="1.000000" stroke="none"
+ d="
+M93.022034,70.000000
+ C89.548790,70.000000 86.568657,70.000000 83.296051,70.000000
+ C83.296051,62.069641 83.296051,54.331253 83.296051,46.294830
+ C90.932602,46.294830 98.670944,46.294830 106.706345,46.294830
+ C106.706345,53.935070 106.706345,61.673363 106.706345,70.000000
+ C102.378632,70.000000 97.946892,70.000000 93.022034,70.000000
+z"/>
+<path fill="#FFFFFF" opacity="1.000000" stroke="none"
+ d="
+M71.000000,95.977966
+ C71.000000,99.451210 71.000000,102.431343 71.000000,105.703949
+ C63.069641,105.703949 55.331253,105.703949 47.294834,105.703949
+ C47.294834,98.067245 47.294834,90.328865 47.294834,82.293655
+ C54.935215,82.293655 62.673565,82.293655 71.000000,82.293655
+ C71.000000,86.621376 71.000000,91.053108 71.000000,95.977966
+z"/>
+<path fill="#FFFFFF" opacity="1.000000" stroke="none"
+ d="
+M83.000000,89.067169
+ C83.000000,86.591560 83.000000,84.607620 83.000000,82.312347
+ C90.897972,82.312347 98.636818,82.312347 106.689407,82.312347
+ C106.689407,89.899902 106.689407,97.639107 106.689407,105.690857
+ C99.096687,105.690857 91.357620,105.690857 83.000000,105.690857
+ C83.000000,100.409920 83.000000,94.984383 83.000000,89.067169
+z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/scan.svg b/src/assets/svg/scan.svg
deleted file mode 100644
index 9f13be809f4e831dfef6979252ec26b8ec15ac4c..0000000000000000000000000000000000000000
--- a/src/assets/svg/scan.svg
+++ /dev/null
@@ -1,29 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 27.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- viewBox="0 0 283.5 283.5" style="enable-background:new 0 0 283.5 283.5;" xml:space="preserve">
-<g id="Group_19" transform="translate(0)">
- <g id="Group_14" transform="translate(34.592 0)">
- <path id="Path_24" d="M199.6,112.8c-4.8,0-8.6-3.9-8.6-8.6c0,0,0,0,0,0V68.7c0-7.9-6.4-14.3-14.4-14.3H141c-4.8,0-8.6-3.9-8.6-8.6
- c0,0,0,0,0,0c0-4.8,3.9-8.6,8.6-8.6c0,0,0,0,0,0h35.5c17.5,0,31.6,14.2,31.7,31.6v35.5C208.2,109,204.3,112.8,199.6,112.8
- C199.6,112.8,199.6,112.8,199.6,112.8z"/>
- </g>
- <g id="Group_15" transform="translate(7.574 0)">
- <path id="Path_25" d="M37.6,112.8c-4.8,0-8.6-3.9-8.6-8.6c0,0,0,0,0,0V68.7C29,51.2,43.2,37,60.6,37h35.5c4.8,0,8.6,3.9,8.6,8.6
- c0,0,0,0,0,0c0,4.8-3.9,8.6-8.6,8.6c0,0,0,0,0,0H60.6c-7.9,0-14.4,6.4-14.4,14.3v35.5C46.3,109,42.4,112.8,37.6,112.8z"/>
- </g>
- <g id="Group_16" transform="translate(7.574 27.015)">
- <path id="Path_26" d="M96.2,216.2H60.6c-17.5,0-31.6-14.2-31.7-31.7V149c0-4.8,3.9-8.6,8.6-8.6c0,0,0,0,0,0c4.8,0,8.6,3.9,8.6,8.6
- c0,0,0,0,0,0v35.6c0,7.9,6.4,14.4,14.4,14.4h35.5c4.8,0,8.6,3.9,8.6,8.6c0,0,0,0,0,0C104.8,212.4,101,216.2,96.2,216.2z"/>
- </g>
- <g id="Group_17" transform="translate(34.592 27.015)">
- <path id="Path_27" d="M176.6,216.2H141c-4.8,0-8.6-3.9-8.6-8.6c0,0,0,0,0,0c0-4.8,3.9-8.6,8.6-8.6c0,0,0,0,0,0h35.5
- c7.9,0,14.4-6.4,14.4-14.4V149c0-4.8,3.9-8.6,8.6-8.6c0,0,0,0,0,0c4.8,0,8.6,3.9,8.6,8.6c0,0,0,0,0,0v35.6
- C208.2,202.1,194,216.2,176.6,216.2z"/>
- </g>
- <g id="Group_18" transform="translate(0 19.572)">
- <path id="Path_28" d="M274.9,129.2H8.6c-4.8,0-8.6-3.9-8.6-8.6c0,0,0,0,0,0c0-4.8,3.9-8.7,8.6-8.7c0,0,0,0,0,0h266.2
- c4.8,0,8.6,3.9,8.6,8.6c0,0,0,0,0,0C283.5,125.3,279.6,129.2,274.9,129.2C274.9,129.2,274.9,129.2,274.9,129.2z"/>
- </g>
-</g>
-</svg>
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index bacfff1fb22f4961c3bd44d26fbb4665118e5e6b..efa94ae7e140727c1db19a49f44a0586ac43044c 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -8,6 +8,7 @@ import {
Keyboard,
TextInput,
Text,
+ TouchableOpacity,
} from 'react-native';
import { StackScreenProps } from '@react-navigation/stack';
import { useNavigation } from '@react-navigation/core';
@@ -56,16 +57,17 @@ const SearchBar: React.FC<Props> = ({ searchPhrase, setSearchPhrase }) => {
}}
/>
{focused && (
- <Icon
- name="close"
- color={ColorPallet.grayscale.darkGrey}
- size={24}
- style={styles.closeIcon}
- onPress={cancel}
- />
+ <TouchableOpacity onPress={cancel}>
+ <Icon
+ name="close"
+ color={ColorPallet.grayscale.darkGrey}
+ size={24}
+ style={styles.closeIcon}
+ />
+ </TouchableOpacity>
)}
</View>
- <Pressable
+ <TouchableOpacity
style={styles.iconContainer}
onPress={() => {
navigation.navigate(Stacks.NotificationStack);
@@ -77,15 +79,15 @@ const SearchBar: React.FC<Props> = ({ searchPhrase, setSearchPhrase }) => {
<Text style={styles.badgeText}>{notifications.length < 100 ? notifications.length : 99}</Text>
</View>
)}
- </Pressable>
- <Pressable
+ </TouchableOpacity>
+ <TouchableOpacity
style={styles.iconContainer}
onPress={() => {
navigation.navigate(Stacks.SettingsStack);
}}
>
<SettingsSvg style={styles.settingsIcon} />
- </Pressable>
+ </TouchableOpacity>
</View>
);
};
diff --git a/src/navigators/TabStack.tsx b/src/navigators/TabStack.tsx
index f87a303ee95d357a2f1e91876f552ca6c015d0e0..97ff82f87f0e04d3dcb60f4f08a830727b9706a4 100644
--- a/src/navigators/TabStack.tsx
+++ b/src/navigators/TabStack.tsx
@@ -1,11 +1,10 @@
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import React from 'react';
import { useTranslation } from 'react-i18next';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { ColorPallet, TextTheme } from 'src/theme/theme';
import {
Screens,
- Stacks,
TabStackParams,
TabStacks,
} from 'src/type/navigators';
@@ -14,10 +13,10 @@ import SealStack from './SealStack';
import EmailStack from './EmailStack';
import CredentialStack from './CredentialStack';
import CredentialSvg from 'src/assets/svg/credential.svg';
-import ScanSvg from 'src/assets/svg/scan.svg';
import ConnectionsSvg from 'src/assets/svg/connections.svg';
import SealHistorySvg from 'src/assets/svg/seal_history.svg';
import EmailSvg from 'src/assets/svg/e-mail-black.svg';
+import TabStackCustom from "./TabStackCustom";
const MainTabNavigator = createBottomTabNavigator<TabStackParams>();
@@ -58,6 +57,7 @@ const TabStack: React.FC = () => {
return (
<MainTabNavigator.Navigator
+ tabBar={props => <TabStackCustom {...props} />}
screenOptions={{
tabBarStyle: styles.tabBarStyle,
tabBarActiveTintColor: ColorPallet.baseColors.white,
@@ -82,25 +82,6 @@ const TabStack: React.FC = () => {
unmountOnBlur: true,
}}
/>
- <MainTabNavigator.Screen
- name={TabStacks.ScanStack}
- options={{
- tabBarIcon: () => <TabBarIcon focused={false} Svg={ScanSvg} />,
- tabBarLabel: () => (
- <TabBarLabel label={t<string>('TabStack.Scan')} />
- ),
- tabBarAccessibilityLabel: t<string>('TabStack.Scan'),
- }}
- listeners={({ navigation }) => ({
- tabPress: e => {
- e.preventDefault();
- navigation.navigate(Screens.Scan);
- },
- })}
- >
- {/* Just a placeholder, the tab will navigate to a different stack */}
- {() => <View />}
- </MainTabNavigator.Screen>
<MainTabNavigator.Screen
name={TabStacks.ConnectionStack}
component={ContactStack}
diff --git a/src/navigators/TabStackCustom.tsx b/src/navigators/TabStackCustom.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..aba2424d802cf5f495bd04eb299a31d798e4874c
--- /dev/null
+++ b/src/navigators/TabStackCustom.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
+import { BottomTabBar } from '@react-navigation/bottom-tabs';
+import ScanQrSvg from 'src/assets/svg/scan-qr.svg';
+import {TextTheme} from "../theme/theme";
+import {useNavigation} from "@react-navigation/core";
+import {Screens} from "../type/navigators";
+
+function TabStackCustom(props: any) {
+ const navigation = useNavigation()
+ return (
+ <View style={styles.container}>
+ <BottomTabBar {...props} />
+ <TouchableOpacity
+ style={styles.floatingButton}
+ onPress={() => {
+ navigation.navigate(Screens.Scan);
+ }}
+ >
+ <ScanQrSvg
+ style={[
+ styles.svg
+ ]}
+ resizeMode="contain"
+ />
+ </TouchableOpacity>
+ </View>
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ position: 'relative',
+ },
+ floatingButton: {
+ position: 'absolute',
+ bottom: 100,
+ right: 10,
+
+ width: 56,
+ height: 56,
+ borderRadius: 28, // half of width/height to get a round shape
+ overflow: 'hidden', // this will ensure the gradient doesn't overflow the button
+ backgroundColor: '#42d0e2',
+ elevation: 4, // Shadow for Android
+ shadowOffset: { width: 0, height: 2 }, // Shadow for iOS
+ shadowOpacity: 0.3,
+ shadowRadius: 2, // Shadow for iOS
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ text: {
+ ...TextTheme.label,
+ },
+ buttonContainer: {
+
+ },
+ svg: {
+ width: 34,
+ height: 34,
+ }
+});
+
+export default TabStackCustom;
\ No newline at end of file