How to update component from another one in react native - reactjs

Question

I am using React Native App, I have a main page that displays the categories, and a button that navigates to another page to add a new category,
the issue is that when I add a new one I want to update the main page as well to include the new one,
is there a way to do so, this my code,
this the navigation
const HomeStack = createStackNavigator();
const Tab = createMaterialBottomTabNavigator();
const MainTabScreen = () => (
<Tab.Navigator
initialRouteName="Home"
activeColor="#fff"
>
<Tab.Screen
name="Home"
component={HomeStackScreen}
options={{
tabBarLabel: 'Home',
tabBarColor: '#009387',
tabBarIcon: ({ color }) => (
<Icon name="ios-home" color={color} size={26} />
),
}}
/>
);
export default MainTabScreen;
const HomeStackScreen = ({navigation}) => (
<HomeStack.Navigator screenOptions={{
headerStyle: {
backgroundColor: '#009387',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
}
}}>
<HomeStack.Screen name="Home" component={HomeScreen} options={{
title:'Overview',
headerLeft: () => (
<Icon.Button name="ios-menu" size={25} backgroundColor="#009387" onPress={() => navigation.openDrawer()}></Icon.Button>
)
}} />
<HomeStack.Screen name="Home_Provider" component={HomeScreen_Provider} options={{
title:'Overview',
headerLeft: () => (
<Icon.Button name="ios-menu" size={25} backgroundColor="#009387" onPress={() => navigation.openDrawer()}></Icon.Button>
)
}} />
<HomeStack.Screen name="AddServiceScreen" component={AddServiceScreen} options={{
title:'Overview',
headerLeft: () => (
<Icon.Button name="ios-menu" size={25} backgroundColor="#009387" onPress={() => navigation.openDrawer()}></Icon.Button>
)
}} />
</HomeStack.Navigator>
);
this is the home page:
const HomeScreen_Provider = ({navigation}) => {
const [services, setServices] = React.useState([]);
const [status, setStatus] = React.useState([]);
async function fetchdata(){
api.GetMyServices({headers:{'Accept': "application/json", 'content-type': "application/json"}})
.then(function (response) {
console.log(response.data);
setServices(response.data);
})
.catch(function (error) {
console.error(error);
});
}
React.useEffect(() => {
fetchdata();
}, []);
return (
<View style={styles.container}>
<StatusBar backgroundColor='#009387' barStyle="light-content"/>
<View style={{marginTop:20}}>
<Text style={styles.text_header}>My Services</Text>
</View>
<TouchableOpacity
style={{alignItems:'flex-end',marginLeft:250}}
onPress={() => navigation.navigate('AddServiceScreen')}
>
<Text style={styles.button}>Add New..</Text>
</TouchableOpacity>
{services.length == 0 ? <Text >You Have No Services Yet, Click Here To Add..</Text> : <View/>}
<ScrollView>
{services.map (service => (
<View style ={styles.rowContainer}>
<Text style={styles.text_footer}>{service.name} </Text>
<Text style={styles.text_footer}>{service.status} </Text>
<TouchableOpacity
onPress={handleToggle}
>
<Text style={styles.button}>Change Status</Text>
</TouchableOpacity>
</View>
))}
</ScrollView>
</View>
)
};
export default HomeScreen_Provider;
````````````
here is the add new page :
const AddServiceScreen = ({navigation}) => {
const { colors } = useTheme();
const [availableServices, setAvailableServices] = React.useState([]);
const [userID, setUserID] = React.useState(0);
const [serviceId, setServiceId] = React.useState(0);
const [serviceName, setServiceName] = React.useState(0);
const [serviceStatus, setServiceStatus] = React.useState('');
const [serviceCost, setServiceCost] = React.useState(0);
async function handleAddServiceButton () {
api.AddNewCategory(Category,{headers:{'Accept': "application/json", 'content-type': "application/json"}})
.then(function (response) {
})
.catch(function (error) {
console.error(error);
});
}
return (
<View style={styles.container}>
<StatusBar barStyle= { theme.dark ? "light-content" : "dark-content" }/>
<View style={styles.rowContainer} >
{availableServices.length !== 0 ? (
<View>
<Text style={{marginTop:15,marginBottom:30}}>Select From Existing Services</Text>
<Picker
selectedValue={serviceId}
style={{ height: 50, width: 150 }}
onValueChange={(itemValue, itemIndex) => setServiceId(itemValue)}
>
{availableServices.map((service)=>{
return(
<Picker.Item label={service.name} value={service.id} />
)
})}
</Picker>
</View>
): <View/>}
</View>
<Button
title="Submit"
onPress={handleAddServiceButton}
/>
</View>
);
};
export default AddServiceScreen;

Answer 1

You can either use react context to update the state directly and use the spread operator in the API call
or
You can maintain your state using redux to centralize your application state