need code separated into different js screens (home,addition,genre,history)

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-navigation/native';

import { createNativeStackNavigator } from '@react-navigation/native-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)}>

title="Add Book"

onPress={() => {

navigation.navigate({

name: 'Home',

params: {bookAdded:true, post: title, post1:author, post2:nPages, post3:selectedValue},

merge: true,

});

}}

/>

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

navigation.navigate('AddBook')} />

navigation.navigate('Hist')} />

navigation.navigate('Genre')} />

navigation.navigate('Home')} />

);

}

function HistoryScreen({ navigation, route }) {

Welcome to the HistoryScreen

const Item = ({ title }) => (

{title}

);

const renderItem = ({ item}) =>

Title: {item.title}{' '}

Author: {item.author}{' '}

Pages: {item.nPages}{' '}

Genre: {item.Genre}{' '}

return (

<>

item.title}/>

item.title}/>

item.title}/>

{navigation.navigate('Home')}} />

title="Done"

onPress={() => {

navigation.navigate({

name: 'Home',

});

}}

/>

);

}

function GenreScreen({ navigation, route }) {

const DATA1 = [

{

title:'World strongest Man',

author:'Peter',

nPages: 400,

Genre: 'Romance'

},

{

title:'Next-gen technologies',

author:'Samson',

nPages: 220,

Genre: 'Sci-Fi'

},

{

title:'Auto-pilot systems',

author:'Victoria',

nPages: 700,

Genre: 'Science'

}];

const renderItem = ({ item}) =>

{item.Genre}:{item.nPages}

return (

<>

Welcome to the Genre screen

item.title}/>

item.title}/>

item.title}/>

{navigation.navigate('Home')}} />

title="Done"

onPress={() => {

navigation.navigate({

name: 'Home',

});

}}

/>

);

}

const Stack = createNativeStackNavigator();

export default function App() {

return (

);

}