listen bottom tab bar press event in component

37 Views Asked by At

is it possible to listen to bottom tab bar press event in the component and perform some logic in that component

naviagtor.ts

<Tab.Navigator initialRouteName="Cloud" screenOptions={{
                headerShown: false,
                tabBarHideOnKeyboard: true,
                tabBarStyle: { backgroundColor: COLORS.primary }
            }}>
                <Tab.Screen name="Back"
                    options={{
                        tabBarItemStyle: styles.iconspacing,
                        tabBarLabel: ({ focused }) => <Text style={[{ color: focused ? COLORS.light_green : COLORS.white }, styles.lable]}>Zurück</Text>,
                        tabBarIcon: ({ focused }) => {
                            return (<FontAwesomeIcon icon={faArrowLeft} color={focused ? COLORS.light_green : COLORS.white} size={20} />)
                        },
                    }} component={WebViewComponent} />
                <Tab.Screen name="Cloud"
                    options={{
                        tabBarItemStyle: styles.iconspacing,
                        tabBarLabel: ({ focused }) => <Text style={[{ color: focused ? COLORS.light_green : COLORS.white }, styles.lable]}>Cloud</Text>,
                        tabBarIcon: ({ focused }) => {
                            return (<FontAwesomeIcon icon={faUser} color={focused ? COLORS.light_green : COLORS.white} size={20} />)
                        },
                    }} component={WebViewComponent} />
                <Tab.Screen name="Shop"
                    options={{
                        tabBarItemStyle: styles.iconspacing,
                        tabBarLabel: ({ focused }) => <Text style={[{ color: focused ? COLORS.light_green : COLORS.white }, styles.lable]}>Shop</Text>,
                        tabBarIcon: ({ focused }) => {
                            return (<FontAwesomeIcon icon={faCartShopping} color={focused ? COLORS.light_green : COLORS.white} size={20} />)
                        },
                    }} component={WebViewComponent} />
                <Tab.Screen name="Kontakt"
                    options={{
                        tabBarItemStyle: styles.iconspacing,
                        tabBarLabel: ({ focused }) => <Text style={[{ color: focused ? COLORS.light_green : COLORS.white }, styles.lable]}>Kontakt</Text>,
                        tabBarIcon: ({ focused }) => {
                            return (<FontAwesomeIcon icon={faEnvelope} color={focused ? COLORS.light_green : COLORS.white} size={20} />)
                        },
                    }} component={WebViewComponent} />
                <Tab.Screen name="Open Externally"
                    options={{
                        tabBarItemStyle: styles.iconspacing,
                        tabBarLabel: ({ focused }) => <Text style={[{ color: focused ? COLORS.light_green : COLORS.white, minWidth: 70 }, styles.lable]}>Open Externally</Text>,
                        tabBarIcon: ({ focused }) => {
                            return (<FontAwesomeIcon icon={faArrowUpRightFromSquare} color={focused ? COLORS.light_green : COLORS.white} size={20} />)
                        },
                    }} component={WebViewComponent} />
</Tab.Navigator>

WebViewComponent.tsx

import React, { Component, useEffect, useState } from 'react';
import { StyleSheet, Linking } from 'react-native';
import WebView from 'react-native-webview';
import { useRoute } from '@react-navigation/native';
import Loading from '../component/Loading';


function WebViewComponent(): JSX.Element {
    const route: any = useRoute();
    const [routeParams, setRouteParams] = useState<any>(null);

    useEffect(() => {
        if (route?.params) {
            setRouteParams(route?.params)
        }
    }, [route?.params])

    if (!route?.params) {
        return (<Loading />)
    }

    if (routeParams && routeParams?.ExternalRedirection === true) {
        Linking.openURL(routeParams?.RedirectionURL)
    }

    return (
        <WebView source={{ uri: 'https://Example.com' }} style={{ flex: 1 }} />
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#2c3e50',
    },
});

export default WebViewComponent;

i want to listen my bottom tab bar press event Which name is "Back" in WebViewComponent note i want to listen only "Back tab bar" press events not others. because i want to do back in web view page on bottom tab bar press event.

0

There are 0 best solutions below