React Native Data Passing in Top Tab Navigation

Question

I created an event card. onPress it opens the event details page. On the event details page, there is an event organizer touchableopcaity. onPress organizer touchableopacity, it opens the organizer profile with organizer details. On this organizer page, I created a top tab navigation at the bottom of the screen.

Now, when at the organizer profile page, I get organizer data like profile pic, name, followers, and following, But I can't get the organizer about us in the About Top Tab. Same as events and reviews.

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

const OrganizerAbout = ({ route }) => {
    return (
        <View style={{paddingHorizontal:0, paddingTop:20, flex:1,  backgroundColor: '#fff'}}>            
        </View>
    )
}

export default OrganizerAbout
const styles = StyleSheet.create({})

Organizer Profile Page

import { StyleSheet, Text, View, TouchableOpacity, Image, ScrollView, TouchableHighlight, FlatList } from 'react-native'
import { useNavigation } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import OrganizerAbout from './OrganizerAbout';
import OrganizerEvents from './OrganizerEvents';
import OrganizerReviews from './OrganizerReviews';

const OrganizerProfile = ({ route }) => {
    const navigation = useNavigation();
    const Tab = createMaterialTopTabNavigator();
    const { item } = route.params;
    return (
     <View style={{ flex: 1, backgroundColor: '#fff' }}>
      header..
      Image...
      name...
      followers and following...
      buttons...
    <View style={{ alignItems: 'center', marginTop: 10, flex: 1, marginHorizontal: 24 }}>
              <Tab.Navigator
                    screenOptions={{
                        styling...
                    }}>
                    <Tab.Screen
                        name="About"
                        component={OrganizerAbout}
                    />
                    <Tab.Screen 
                    name="Event" 
                    component={OrganizerEvents} 
                    />
                    <Tab.Screen
                        name="Reviews"
                        component={OrganizerReviews}
                    />
                </Tab.Navigator>
            </View>
        </View>
    )
}
export default OrganizerProfile

Answer 1

You have two ways to pass data to the tab component

You can pass some initial parameters to the screen using the InitialParams prop

Example 1:

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
const Tab = createMaterialTopTabNavigator();
export default function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} initialParams={{ id: 1 }} />
      <Tab.Screen name="Settings" component={SettingsScreen} initialParams={{ id: 2 }} />
    </Tab.Navigator>
  );
}

and you can also use the children property to pass data to the tab component, This worked for me in Navigation 5

Example 2:

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
const Tab = createMaterialTopTabNavigator();
export default function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" children={props => <Home data={homeData} {...props} />} />
      <Tab.Screen name="Settings" children={props => <Settings data={settingData} {...props} />} />
    </Tab.Navigator>
  );
}