Documentation
AppNavigator.js
import {StyleSheet, Text, View} from 'react-native';
import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';
import Users from '../screens/Users';
import AddUser from '../screens/AddUser';
export default function AppNavigator() {
const Stack = createStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="User" component={Users} />
<Stack.Screen name="Add User" component={AddUser} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({});
User.js
import {FlatList, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import React from 'react';
import {useNavigation} from '@react-navigation/native';
import {useDispatch, useSelector} from 'react-redux';
import {deleteUser} from '../redux/UserSlice';
export default function Users() {
const dispatch = useDispatch();
const navigation = useNavigation();
const users = useSelector(state => state.user);
console.log(users);
return (
<View style={styles.container}>
<FlatList
data={users.data}
renderItem={({item, index}) => {
return (
<View style={styles.userDetail}>
<View>
<Text style={styles.userDetailText}>
{' Name: ' + item.name}
</Text>
<Text style={styles.userDetailText}>
{' Email: ' + item.email}
</Text>
<Text style={styles.userDetailText}>
{' Mobile: ' + item.mobile}
</Text>
<Text style={styles.userDetailText}>{' Age: ' + item.age}</Text>
</View>
<View style={styles.crudButton}>
<Text
style={styles.updateButton}
onPress={() =>
navigation.navigate('Add User', {
type: 'edit',
data: item,
index: index,
})
}>
Update
</Text>
<Text
style={styles.deleteButton}
onPress={() => {
dispatch(deleteUser(index));
}}>
Delete
</Text>
</View>
</View>
);
}}
/>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate('Add User', {type: 'add'})}>
<Text style={{color: 'black', fontSize: 25, fontWeight: 'bold'}}>
Add New User
</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
button: {
width: '100%',
height: 50,
position: 'absolute',
bottom: 0,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'gray',
},
userDetail: {
width: '90%',
borderWidth: 1,
alignSelf: 'center',
marginTop: 20,
borderRadius: 10,
padding: 10,
backgroundColor: 'white',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
gap: 10,
},
userDetailText: {
fontSize: 15,
color: 'black',
fontWeight: 'bold',
},
crudButton: {
gap: 10,
},
updateButton: {
padding: 5,
borderWidth: 1,
borderColor: 'green',
color: 'green',
fontSize: 15,
fontWeight: 'bold',
},
deleteButton: {
padding: 5,
borderWidth: 1,
borderColor: 'red',
color: 'red',
fontSize: 15,
fontWeight: 'bold',
},
});
AddUser.js
import {
Alert,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from 'react-native';
import React, {useState} from 'react';
import {useDispatch} from 'react-redux';
import {addUser, updateUser} from '../redux/UserSlice';
import {useNavigation, useRoute} from '@react-navigation/native';
export default function AddUser() {
const route = useRoute();
const [name, setName] = useState(
route.params.type == 'edit' ? route.params.data.name : '',
);
const [email, setEmail] = useState(
route.params.type == 'edit' ? route.params.data.email : '',
);
const [mobile, setMobile] = useState(
route.params.type == 'edit' ? route.params.data.mobile : '',
);
const [age, setAge] = useState(
route.params.type == 'edit' ? route.params.data.age : '',
);
const navigation = useNavigation();
const dispatch = useDispatch();
const validation = () => {
let valid = true;
if (name == null) {
valid = false;
}
if (email == null) {
valid = false;
}
if (mobile == null) {
valid = false;
}
if (age == null) {
valid = false;
}
return valid;
};
return (
<View style={styles.container}>
<TextInput
style={styles.Textinput}
placeholder="Enter User Name"
value={name}
onChangeText={txt => setName(txt)}
/>
<TextInput
style={styles.Textinput}
placeholder="Enter User Email"
keyboardType="email-address"
value={email}
onChangeText={txt => setEmail(txt)}
/>
<TextInput
style={styles.Textinput}
placeholder="Enter User Mobile No."
keyboardType="number-pad"
maxLength={10}
value={mobile}
onChangeText={txt => setMobile(txt)}
/>
<TextInput
style={styles.Textinput}
placeholder="Enter User Age"
keyboardType="number-pad"
value={age}
onChangeText={txt => setAge(txt)}
/>
<TouchableOpacity
style={styles.button}
onPress={() => {
if (validation()) {
if (route.params.type == 'edit') {
dispatch(
updateUser({
name: name,
email: email,
mobile: mobile,
age: age,
index: route.params.index,
}),
);
} else {
dispatch(addUser({name, email, mobile, age}));
}
navigation.goBack();
} else {
Alert.alert('Please enter All details.');
}
}}>
<Text style={styles.buttontext}>Add User</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
padding: 20,
backgroundColor: '#FFF',
},
Textinput: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
width: 300,
marginBottom: 10,
alignSelf: 'center',
borderRadius: 10,
padding: 10,
fontWeight: 'bold',
},
button: {
backgroundColor: 'blue',
width: 250,
height: 40,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 10,
marginTop: 10,
marginBottom: 10,
alignSelf: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 8,
},
shadowOpacity: 0.44,
shadowRadius: 10.32,
elevation: 16,
},
buttontext: {
color: 'white',
fontSize: 20,
fontWeight: 'bold',
},
});
UserSlice.js
import {createSlice} from '@reduxjs/toolkit';
export const UserSlice = createSlice({
name: 'user',
initialState: {
data: [],
},
reducers: {
addUser(state, action) {
state.data.push(action.payload);
},
updateUser(state, action) {
let temp = state.data;
temp.map((item, index) => {
if (index == action.payload.index) {
item.name = action.payload.name;
item.email = action.payload.email;
item.mobile = action.payload.mobile;
item.age = action.payload.age;
}
});
state.data = temp;
},
deleteUser(state, action) {
let temp = state.data;
temp.splice(action.payload, 1);
state.data = temp;
},
},
});
export const {addUser, updateUser, deleteUser} = UserSlice.actions;
export default UserSlice.reducer;
MyStore.js
import {configureStore} from '@reduxjs/toolkit';
import UserReducer from './UserSlice';
const MyStore = configureStore({
reducer: {
user: UserReducer,
},
});
export default MyStore;
App.js
import {StyleSheet, Text, View} from 'react-native';
import React from 'react';
import AppNavigator from './src/navigation/AppNavigator';
import {Provider} from 'react-redux';
import MyStore from './src/redux/MyStore';
export default function App() {
return (
<Provider store={MyStore}>
<AppNavigator />
</Provider>
);
}
const styles = StyleSheet.create({});
User Added
Clicking on update all changes can be done and on clicking delete all data will be deleted.