How to add an Update + Delete feature in my Details page in React Native? (DjangoRestFramework + React Native)? - react-native

Question

My app is a CRUD React Native that interacts with Django Rest Framework based off of a book called "Building Versatile Mobile Apps with Python and REST: RESTful Web Services with Django and React".
The project lets users enter in different data fields about pizza restaurants and display them.
I've been able to build the Crud web application in React and Django and a mobile app with Django and React native that only lets me add and read data.
I'm on the very last chapter and I'm about to deploy, but I don't know how to send update and delete requests in React Native to an API the book never covers this section. I added an update button but I don't know how to logically navigate to an edit section from the detail_view.js section.
Here is the open source code from the book on github
This is my app.js file
import React from 'react';
import { StyleSheet, Text, SafeAreaView, Image } from 'react-native';
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import { createDrawerNavigator } from '#react-navigation/drawer';
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import ListView from "./src/screens/components/function_list_view";
import DetailView from "./src/screens/components/detail_view";
import AddPizzeria from "./src/screens/drawer/addPizzeria.js";
import RegForm from "./src/screens/drawer/regForm.js";
import LoginForm from "./src/screens/drawer/loginForm.js";
import TabOne from "./src/screens/tabs/tab1.js";
import TabTwo from "./src/screens/tabs/tab2.js";
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();
renderTabComponents = () => (
<Tab.Navigator>
<Tab.Screen name="Tab 1" component={TabOne} />
<Tab.Screen name="Tab 2" component={TabTwo} />
</Tab.Navigator>
);
renderScreenComponents = () => (
<Stack.Navigator>
<Stack.Screen name="Home" component={ListView} />
<Stack.Screen name="Detail" component={DetailView} />
<Stack.Screen name="Tabs" children={this.renderTabComponents} />
</Stack.Navigator>
);
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen name="Home" children={this.renderScreenComponents} />
<Drawer.Screen name="Add Pizza" component={AddPizzeria} />
<Drawer.Screen name="Registration" component={RegForm} />
<Drawer.Screen name="Login" component={LoginForm} />
</Drawer.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
baseText: {
color: "navy",
fontSize: 30,
fontStyle: "italic",
},
newText:{
color: "red",
},
pizzaImage: {
width: 200,
height: 200,
},
})
Here is my detailview file:
import React, { useState, useEffect } from "react";
import {View, Text, Image, FlatList } from "react-native";
import client from "./../../api/client";
import styles from "./detail_styles";
const DetailView = ({ route }) => {
const [detail, setDetail] = useState("");
const { objurl } = route.params;
const getDetail = async (url) => {
try {
const response = await client.get(url);
if (!response.ok) {
setDetail(response.data);
}
} catch (error) {
console.log(error);
}
};
useEffect(()=>{
getDetail(objurl);
}, [])
return (
<View style={styles.center}>
<FlatList
horizontal={true}
data={detail.pizzeria_images}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => {
return (
<Image
style={styles.pizzaImage}
source={{
uri: item.image,
}}
/>
);
}}
/>
<Text style={styles.title}>Pizzeria: {detail.pizzeria_name}</Text>
<Text style={styles.details}>Address: {detail.street}</Text>
<Text style={styles.details}>
City: {detail.city}, {detail.state},{detail.zip_code}
</Text>
<Text style={styles.details}>Web: {detail.website}</Text>
<Text style={styles.details}>Ph: {detail.phone_number}</Text>
<Text style={styles.details}>Description: {detail.description}</Text>
<Text style={styles.details}>Email: {detail.email}</Text>
// this is where I want to edit the data fields
<Button
style={styles.addButton}
onPress={() => *I don't know what to navigate*}
title="Edit"
/>
</View>
);
}
export default DetailView;
This is the addPizzeria.js file that submits the data
import React, {useState} from "react";
import { SafeAreaView, ScrollView, TextInput, Button, NativeModules,Text, Alert } from "react-native";
import { Formik } from "formik";
import client from "./../../api/client";
import styles from "./addPizzeria_styles";
import validationSchema from "./addPizzeria_valid";
import PhotoPicker from "../components/shared/photo.js";
const AddPizzeria = () => {
const [photo, setPhoto] = useState("");
const postedAlert = () => {
Alert.alert("Success!", "Thank you! ", [
{
text: "Go to main screen",
onPress: () => NativeModules.DevSettings.reload()
},
]);
};
const handleSubmit = async (values) =>{
const data = new FormData();
data.append("pizzeria_name", values.pizzeria);
data.append("street", values.street);
data.append("city", values.city);
data.append("state", values.state);
data.append("zip_code", values.zip_code);
data.append("website", values.website);
data.append("phone_number", values.phone_number);
data.append("pizzeria_name", values.pizzeria);
data.append("description", values.description);
data.append("email", values.email);
data.append("logo_image", {
uri: photo,
name: "filename.jpg",
type: "image/jpg",
});
try {
const response = await client.post("api/create/", data); postedAlert();
} catch(error) {
console.log(error);
};
};
return (
<Formik
initialValues={{
pizzeria: "",
street: "",
city: "",
state: "",
zip_code: "",
website: "",
phone_number: "",
description: "",
email: "",
}}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
{({ handleChange, handleSubmit, values, errors }) => (
<SafeAreaView style={styles.content}>
<ScrollView>
<PhotoPicker photo={photo} onPressPhoto={(uri) => setPhoto(uri)} />
<TextInput
style={styles.textBox}
value={values.pizzeria}
placeholder="Enter a new pizz place here"
onChangeText={handleChange("pizzeria")}
/>
<Text style={styles.error}>{errors.pizzeria}</Text>
<TextInput
style={styles.textBox}
value={values.street}
placeholder="Street address"
onChangeText={handleChange("street")}
/>
<Text style={styles.error}>{errors.street}</Text>
<TextInput
style={styles.textBox}
value={values.city}
placeholder="City"
onChangeText={handleChange("city")}
/>
<Text style={styles.error}>{errors.city}</Text>
<TextInput
style={styles.textBox}
value={values.state}
placeholder="State"
onChangeText={handleChange("state")}
/>
<Text style={styles.error}>{errors.state}</Text>
<TextInput
style={styles.textBox}
value={values.zip_code}
placeholder="Zip"
onChangeText={handleChange("zip_code")}
/>
<Text style={styles.error}>{errors.zip_code}</Text>
<TextInput
style={styles.textBox}
value={values.website}
placeholder="Website"
onChangeText={handleChange("website")}
/>
<Text style={styles.error}>{errors.website}</Text>
<TextInput
style={styles.textBox}
value={values.phone_number}
placeholder="Phone number"
onChangeText={handleChange("phone_number")}
/>
<Text style={styles.error}>{errors.phone_number}</Text>
<TextInput
style={styles.textBox}
value={values.description}
placeholder="Description"
onChangeText={handleChange("description")}
/>
<Text style={styles.error}>{errors.description}</Text>
<TextInput
style={styles.textBox}
value={values.email}
placeholder="Email"
onChangeText={handleChange("email")}
/>
<Text style={styles.error}>{errors.email}</Text>
<Button
style={styles.addButton}
onPress={handleSubmit}
title="Submit"
/>
</ScrollView>
</SafeAreaView>
)}
</Formik>
)}
export default AddPizzeria;
I tried creating an update file that is same as my addpizzeria file, but I get lost trying to plan out where and how to structure it so I can reference it when I make a request to update that data.
The only viable option is to make a feature on the detailview.js to update the data. This is what I'm trying and unsure of. I don't know where to go from here aside from adding an update and delete button on this page that navigates to another file and does the delete and update functions. your text

Answer 1

Ok I solved the issue. It seems the creator of the book added tabs in app.js in the Bottonnavigator class just in case you'd want to add and Update and Delete feature in detailview.js page.
All that is needed is to just add the navigation.navigate("Tabs") in a button in my detailview.js file.
<Button
style={styles.addButton}
title="Click for tabs"
onPress={() => navigation.navigate("Tabs")}
/>