React Native Remove Item and button - reactjs

Question

I want when I click button inside access file remove the same item in months array inside Home file.
How can I solve this?
App.js
this file conncet screen.
import {StyleSheet, View} from 'react-native';
import {createStackNavigator} from '#react-navigation/stack';
import Home from './src/components/Home';
import {NavigationContainer} from '#react-navigation/native';
import Access from './src/components/access';
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="access" component={Access} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
ButtonCicle.js
this file make circle.
import { View, Text,TouchableOpacity } from 'react-native';
import styles from './Styles/ButtonCircleStyles';
export default function ButtonCicle({BtnName, onPress}) {
return (
<TouchableOpacity style={styles.buttonContainer} onPress={onPress}>
<Text style={styles.button}>{BtnName}</Text>
</TouchableOpacity>
);
}
ButtonCircleStyles.js
this file make style
import {StyleSheet, Dimensions} from 'react-native';
const height = Dimensions.get('window').height;
const width = Dimensions.get('window').width;
const styles = StyleSheet.create({
buttonContainer:
{
backgroundColor: 'red',
borderRadius: 50,
width: width / 5,
height: width / 5,
justifyContent: 'center',
marginStart: '4%',
marginBottom: '4%',
},
button:
{
fontSize: 25,
textAlign: 'center',
},
});
export default styles;
Home.js
this file make array and onPress to another screen
import React from 'react';
import {StyleSheet, View} from 'react-native';
import ButtonCicle from './ButtonCircle';
const Home = ({navigation}) => {
const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const listbutton = months.map((i, key) => (
<ButtonCicle
BtnName={i}
key={key}
onPress={() => navigation.navigate('access') || alert(i)}
/>
));
return (
<>
<View style={styles.container}>{listbutton}</View>
</>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ecf0f1',
padding: 8,
marginTop: '10%',
flexDirection: 'row',
height: 300,
flexWrap: 'wrap',
},
});
export default Home;
access.js
import React from 'react'
import { View, Text, Button } from 'react-native'
export default function access({navigation}) {
return (
<View>
<Text>Home</Text>
<Button title='Click' onPress={() => navigation.navigate('Home')} />
</View>
)
}
I want when I click button inside access file remove the same item in months array inside Home file.
How can I solve this?
How create it ?

Answer 1

You can try with a callback. Define a function inside Home.js that remove the element from the array. Then you could pass this callback as a route param
navigation.navigate('access', {deleteItem: //your callback})
And in the access.js file you get this callback
const deleteItem = navigation.getParam('deleteItem');
And call it before navigate back to home
const onPress = () => {
deleteItem();
navigation.navigate('Home');
}
<Button title='Click' onPress={onPress} />