React Native Data Passing in Material Top Tabs Navigator

21 views Asked by At

I create a EventCard on press the card Event Details page open, where there is details of events shown. In details there is Event Organizer details. By press on Organizer, Organizer Profile page open. Where Organizer details are shown.

Organizer Button

<TouchableOpacity
          onPress={() => navigation.navigate("OrganizerProfile", { item: item })}>
          <View style={{ flexDirection: 'row', }}>
            <Image
              style={{ height: 48, width: 48, borderRadius: 12, }}
              source={item.organizerDp}
            />
            <View style={{ marginLeft: 14 }}>
              <Text style={{ color: '#120D26', fontSize: 16, fontWeight: '400', lineHeight: 34, }}>{item.organizer}</Text>
              <Text style={{ color: '#747688', fontSize: 12, fontWeight: '400', }}>Organizer</Text>
            </View>
          </View>
</TouchableOpacity>

Organizer Profile

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...
        Profile Pic...
        Name...
        Follower...
        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

Organizer DB

const upcomingEventsInfo = [
    {
        id: 1,
        others...
        organizer: 'Ashfak Sayem',
        organizerFollowing: '200',
        organizerFollowers: '457',
        organizerAbout: 'Enjoy your favorite dishe and a lovely your friends and family and have a great time.',
        organizerReviews: {
            reviewPic: require("../Assets/ReviewsProfilePics/Pic1.png"),
            reviewName: "Rocks Velkeinjen",
            reviewDay: "10",
            reviewMonth: "Feb",
            reviewComment: "Cinemas is the ultimate experience to see new movies in Gold Class or Vmax. Find a cinema near you."
        },
        organizerDp: require("../Assets/OrganizerPics/OrganizerDp1.png"),
        others...
    },
    {
        id: 2,
        others...
        organizer: 'Emma Amelia',
        organizerFollowing: '250',
        organizerFollowers: '507',
        organizerAbout: 'About Emma Amelia About Emma Amelia About Emma Amelia About Emma Amelia About Emma Amelia',
        organizerReviews: {
            reviewPic: require("../Assets/ReviewsProfilePics/Pic1.png"),
            reviewName: "Rocks Velkeinjen",
            reviewDay: "10",
            reviewMonth: "Feb",
            reviewComment: "Cinemas is the ultimate experience to see new movies in Gold Class or Vmax. Find a cinema near you."
        },
        organizerDp: require("../Assets/OrganizerPics/OrganizerDp2.png"),
        others...
    },

When I access Organizer data in organizer details page its working, But when I access it in top tab navigator About tab it dont show the organizerAbout data related to Organizer.

0

There are 0 answers