Pass value one TopTab Screen To another TopTab Screen

Question

My CarList Screen //CarList.js

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

function CarList() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>CarList</Text>
      <Text style={styles.subtext}>Welcome to the CarList!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }
  )}

export default CarList;

Simple car screen //CarMap.js

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

function CarMap() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>CarMap</Text>
      <Text style={styles.subtext}>Welcome to the CarMap!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }
  )}

export default CarMap;

//Tabscreen.js

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import CarList from './CarList';
import CarMap from './CarMap';
import BikeList from './BikeList';
import BikeMap from './BikeMap';

const TopTab = createMaterialTopTabNavigator();
const Stack = createStackNavigator()

const Car = () =>{
  return (
    <TopTab.Navigator screenOptions={{ headerShown: false, swipeEnabled: false }} >
        <TopTab.Screen name="CarList"  component={CarList} />
        <TopTab.Screen name="CarMap"  component={CarMap} />
    </TopTab.Navigator>
  );
}

const Bike = ()=>{
  return (
    <TopTab.Navigator screenOptions={{ headerShown: false, swipeEnabled: false }} >
        <TopTab.Screen name="BikeList"  component={BikeList} />
        <TopTab.Screen name="BikeMap"  component={BikeMap} />
    </TopTab.Navigator>
  );
}

export {Car, Bike} ;

//BottomTabStack.js

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import {Car ,Bike} './Tabscreen'

const BottomTab = createBottomTabNavigator();

const BottomTabStack = () =>{
  return (
    <BottomTab.Navigator screenOptions={{ headerShown: false, swipeEnabled: false }} >
        <BottomTab.Screen name="Car"  component={Car} />
        <BottomTab.Screen name="Bike"  component={Bike} />
    </BottomTab.Navigator>
  );
}

export {BottomTabStack};

// App.js

import { NavigationContainer } from '@react-navigation/native';
import { BottomTabStack } from "./BottomTabStack";

const Stack = createStackNavigator();

export default function App() {
  return (
    < NavigationContainer linking={linking} >
            <SafeAreaProvider>
                <BottomTabStack />
            </SafeAreaProvider>
        </NavigationContainer >
  );
}

I have CarList and CarMap screen which TopTab i want to send value from CarMap To CarList (I have redux in my app so i can use that but there is any possiable way to do that without redux).

I want to pass value when TopTabBar Changes

Pass value one TopTab Screen To another TopTab Screen

0 Answers0