TabStackCustom.tsx

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;