How to pass data to different screens - reactjs

Question

I need to pass data from one screen to anothre, an main screen loads and then loads the data from a mock api, it sets the state with providerData, then navigation gets created. I want to be able to use the data i got in the ProviderDetailScreen.js in ProviderOverview.js
Here is ProviderDetailsScreen.js
import React from 'react';
import {StatusBar, View} from 'react-native';
import ProviderOverview from './ProviderOverview';
import ProviderServicesList from './ProviderServicesList';
import NavigationbarHeaderWithExpandedImage from '../components/NavigationbarHeaderWithExpandedImage';
import TopTabbarComponent from '../components/TopTabbarComponent';
import mockApi from '../mockApi';
const ProviderDetailScreen = ({navigation, route}) => {
const [providerData, setProviderData] = React.useState({});
const [loading, setLoading] = React.useState(false);
//navigation setup
React.useLayoutEffect(() => {
navigation.setOptions({
header: ({scene, previous}) => {
return (
<NavigationbarHeaderWithExpandedImage
scene={scene}
previous={previous}
navigation={navigation}
backgroundImage={providerData?.profile?.backgroundImage}
/>
);
},
});
}, [navigation, providerData]);
//get results from API
const getServices = React.useCallback(async () => {
try {
setLoading(true);
const res = await mockApi.get('/Provider/Profile');
if (res.ok && res.body.data) {
// use this data in overview and service list
setLoading(false);
setProviderData(res.body.data);
} else {
throw new Error('Unable to retrieve profile');
}
} catch (error) {
console.log(error);
}
}, []);
React.useEffect(() => {
console.warn('here');
getServices();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<>
<StatusBar barStyle="light-content" />
<TopTabbarComponent
items={[
{
title: 'Overview',
component: ProviderOverview,
},
{
title: 'Services',
component: ProviderServicesList,
},
{
title: 'Reviews',
component: View,
},
]}
/>
</>
);
};
export default ProviderDetailScreen;
Here is The ToTabbarComponent.js that created a tab for each item in providerdetailsscreen
import React from 'react';
import {StyleSheet} from 'react-native';
import {createMaterialTopTabNavigator} from '#react-navigation/material-top-tabs';
import {PRIMARY, WHITE, INACTIVE_TINT_COLOR, ACCENT} from '../lib/colors';
import fonts from '../lib/fonts';
const Tab = createMaterialTopTabNavigator();
const TopTabbarComponent = ({items}) => {
const tabs = () => {
let tabs = [];
// loop to create tabs
for (const [index, item] of items.entries()) {
tabs.push(
<Tab.Screen
name={item.title}
title={item.title}
component={item.component}
key={index}
/>,
);
}
return tabs;
};
return (
<Tab.Navigator
tabBarOptions={{
activeTintColor: WHITE,
labelStyle: [styles.labelStyle, fonts.medium],
inactiveTintColor: INACTIVE_TINT_COLOR,
style: styles.style,
indicatorStyle: styles.indicatorStyle,
}}>
{tabs()}
</Tab.Navigator>
);
};
const styles = StyleSheet.create({
tabBarOptions: {},
labelStyle: {
fontSize: 14,
},
indicatorStyle: {
backgroundColor: ACCENT,
height: 2,
},
style: {
backgroundColor: PRIMARY,
},
});
export default TopTabbarComponent;
Here is the ProviderOverview.js where i want to use that data that gets set in ProviderDetailsScreen.js
//WANT TO USE DATA HERE
import React from 'react';
import {StyleSheet, View, ScrollView, Text} from 'react-native';
import MediumText from '../components/MediumText';
const ProviderOverview = ({navigation}) => {
return (
<ScrollView style={styles.container}>
<View>
<MediumText onPress={() => navigation.push('PROVIDER_MESSAGE')}>
Send a message
</MediumText>
</View>
<View></View>
</ScrollView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default ProviderOverview;
I am still learning: Things i have tried:
In providerDetailsscreen i tried to set providerdata for each item, i tried setting a test var with some string to see if i can get it in ProviderOverview. But providerOverview only has Navigation prop.
Thanks in advance.

Answer 1

Try this way
ProviderDetailsScreen.js
<TopTabbarComponent
items={[
{
title: 'Overview',
component: ProviderOverview,
providerData: providerData, // set providerData to ProviderOverview
},
{
title: 'Services',
component: ProviderServicesList,
},
{
title: 'Reviews',
component: View,
},
]}
/>
TopTabbarComponent
// loop to create tabs
for (const [index, item] of items.entries()) {
const CompView = item.component;
const providerData = item.providerData || {};
tabs.push(
<Tab.Screen name={item.title} title={item.title} key={index}>
{(props) => <CompView {...props} {...providerData} />}
</Tab.Screen>
);
}

Answer 2

You can use navigation props
this.props.navigation.navigate('MyData', {data: data,});
https://reactnavigation.org/docs/navigation-prop/#navigate
Or add redux to your project https://redux.js.org/introduction/getting-started