All this code is contained within the app.js but i need to separate it into homescreen.js,additionscreen.js,genrescreen.js,historyscreen.js . how would i do so ? and what code would i have to change?

import React, {useState} from 'react';

import { Text, TextInput, View,

Button,StyleSheet

,Flatlist,ImageBackground,

SafeAreaView,

FlatList,

ListItem,

Image,

TouchableOpacity,

}

from 'react-native';

import { NavigationContainer } from '@react-navigationative';

import { createNativeStackNavigator } from '@react-navigationative-stack';

import {Picker} from '@react-native-picker/picker';

import IconGenre from 'react-native-vector-icons/Entypo';

import IconPlus from 'react-native-vector-icons/AntDesign';

import IconHome from 'react-native-vector-icons/AntDesign';

import IconHistory from 'react-native-vector-icons/FontAwesome';

import Bookdatabase1 from './Data /Bookdatabase1.json';

import Bookdatabase2 from './Data /Bookdatabase2.json';

import Bookdatabase3 from './Data /Bookdatatbase3.json';

let totalBooks = 0;

function HomeScreen({ navigation, route }) {

const [totalPages, setTotalPages] = React.useState(0);

const [averagePages, setAveragePages] = React.useState(0);

const [title, setTitle] = React.useState('');

const [author, setAuthor] = React.useState('');

const [nPages, setnPages] = React.useState('');

const [num, setNum] = React.useState(0);

React.useEffect(() => {

if (route.params?.post) {

if(route.params.bookAdded){

totalBooks++;

}

setTitle(route.params?.post);

setAuthor(route.params?.post1);

setnPages(route.params?.post2);

setTotalPages(totalPages + parseInt(route.params?.post2));

setAveragePages(totalPages/totalBooks);

}

}, [route.params?.post]);

const a = parseInt(totalPages);

const b = parseInt(totalBooks);

let result = parseFloat( a / b)

return (

Reading-List

Title: {route.params?.post}

Author: {route.params?.post1}

Pages: {route.params?.post2}

Genre: {route.params?.post3}

totalPages: {totalPages}

averagePages: {result}

counter: {totalBooks}

{}} style={{ flexDirection: 'row', justifyContent:"space-evenly"}}>

navigation.navigate('AddBook')} />

navigation.navigate('Hist')} />

navigation.navigate('Genre')} />

navigation.navigate('Home')} />

);

}

function AdditionScreen({ navigation, route }) {

const [title, setTitle] = React.useState('');

const [author, setAuthor] = React.useState('');

const [nPages, setnPages] = React.useState('');

const[selectedValue,setSelectedValue] = React.useState('');

return (

placeholder="Enter title"

style={{ height: 50, padding: 10, backgroundColor: 'white' }}

value={title}

onChangeText={setTitle}

/>

placeholder="Enter author"

style={{ height: 50, padding: 10, backgroundColor: 'white' }}

value={author}

onChangeText={setAuthor}

/>

placeholder="Enter Pager numbers"

style={{ height: 50, padding: 10, backgroundColor: 'white' }}

value={nPages}

onChangeText={setnPages}

/>

Genre:

setSelectedValue(itemValue)}>