every time the screen switches, all the states reset (useContect) - reactjs

Question

I have a react native appication. It is a mockup of zillow. I created a useContext object that stores several of the different useState to store different information I want the home page and all of its children components to have access to.
From the home page, the user can click on the sort button and it redirects the user to a different page so that he can change how the information is sorted.
when the user clicks on a sort option, I have it os that it goes back to the home page by using navigation.goBack(). The issue is that every time the screen changes, the entire useContect object reverts to the original state that is set by default.
I need to figure out how to get the state in useContect to not revert to default when I change screens.
I tried scoping the useContext.provider to wrap the whole navigation stack to see if that would change anything but it did not work. Does anyone know a way to do this so that I can use different screens without reseting the entire useContext
Here is the HomeScreen:
import React, { useState, createContext, useEffect} from 'react'
import {View, Text, StyleSheet} from 'react-native'
import SearchAndFilterComponent from '../components/HomeScreen/SearchAndFilterComponent';
import ResultsComponent from '../components/HomeScreen/ResultsComponent';
import { SearchFilterSortContextProvider } from '../context/SearchFilterSortContext';
const HomeScreen = () => {
return (
<SearchFilterSortContextProvider>
<View style={styles.screen}>
<SearchAndFilterComponent/>
<View style={styles.fullSplit}></View>
<ResultsComponent />
</View>
</SearchFilterSortContextProvider>
)
}
const styles = StyleSheet.create({
fullSplit: {
width: '100%',
height: 2,
backgroundColor: 'black'
}
})
export default HomeScreen
SearchFilterSortContext.js:
import { useState, createContext, useEffect } from "react";
export const SearchFilterSortContext = createContext(null)
export const SearchFilterSortContextProvider = ({children}) => {
// General Search State
const [currentSearch, setCurrentSearch] = useState('')
const [activeSearch, setActiveSearch] = useState('')
const [sort, setSort] = useState('')
const [filter, sestFilter] = useState()
const [results, setResults] = useState([])
const [resultCounter, setResultCounter] = useState(0)
const [page, setPage] = useState(1)
const [totalPages, setTotalPages] = useState(0)
const [resultView, setResultView] = useState('List')
// Filter Home Type States
const [house, setHouse] = useState(true)
const [apartment, setApartment] = useState(false)
const [condos, setCondos] = useState(false)
const [townHouse, setTownHouse] = useState(false)
const [multiFamily, setMultiFamily] = useState(false)
const [manufactured, setManufactured] = useState(false)
const [land, setLand] = useState(false)
// Filter Home Details States
const [priceMin, setPriceMin] = useState(0)
...
// data management state
const [loadingMain, setLoadingMain] = useState(false)
return (
<SearchFilterSortContext.Provider value={{house, setHouse,
apartment, setApartment,
condos, setCondos,
townHouse, setTownHouse,
multiFamily, setMultiFamily,
manufactured, setManufactured,
land, setLand,
...
loadingMain, setLoadingMain}}>
{children}
</SearchFilterSortContext.Provider>
)
}
SortSelectionScreen.js:
import React, { useContext } from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
import { Feather } from '#expo/vector-icons'
import { useNavigation } from '#react-navigation/native'
import { SearchFilterSortContext } from '../../context/SearchFilterSortContext'
const SortOptionsComponent = () => {
const {sort, setSort} = useContext(SearchFilterSortContext)
const navigation = useNavigation()
return (
<View>
<TouchableOpacity onPress={() => {setSort('Homes_for_You'); navigation.goBack()}} style={styles.row}>
<Text style={styles.text}>Homes For You</Text>
{
sort === 'Homes_for_You' ? <Feather name='check' color={'black'} size={20}/> : null
}
</TouchableOpacity>
<TouchableOpacity onPress={() => {setSort('Newest'); navigation.goBack()}} style={styles.row}>
<Text style={styles.text}>Newest</Text>
{
sort === 'Newest' ? <Feather name='check' color={'black'} size={20}/> : null
}
</TouchableOpacity>
...
</View>
)
}
Component that renders the results
ResultsComponent.js:
import React, { useEffect, useContext } from 'react'
import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native'
import axios from 'axios'
import { useNavigation } from '#react-navigation/native'
import { extendedPropertOptions } from '../../../zillow'
import { SearchFilterSortContext } from '../../context/SearchFilterSortContext'
import LoadingComponent from '../GeneralComponents.js/LoadingComponent'
import PropertyTile from './PropertyTile'
const ResultsComponent = () => {
const navigation = useNavigation()
const {results, setResults} = useContext(SearchFilterSortContext)
const {setResultCounter} = useContext(SearchFilterSortContext)
const {setTotalPages} = useContext(SearchFilterSortContext)
const {sort, setCurrentSearch} = useContext(SearchFilterSortContext)
const {loadingMain, setLoadingMain} = useContext(SearchFilterSortContext)
const {currentSearch, activeSearch} = useContext(SearchFilterSortContext)
const getDefaultResults = () => {
setLoadingMain(true)
extendedPropertOptions.params.location = 'Los Angeles, CA'
axios.request(extendedPropertOptions)
.then((response) => {
setResults(response.data.props)
setResultCounter(response.data.totalResultCount)
setTotalPages(response.data.totalPages)
setLoadingMain(false)
})
.catch((error) => {
console.error(error)
})
}
// apply search with all the filters
const getFilteredResults = () => {
console.log('fire search')
console.log(sort)
setLoadingMain(true)
{
activeSearch === '' ?
currentSearch === '' ?
extendedPropertOptions.params.location = 'Los Angeles, CA'
: extendedPropertOptions.params.location = currentSearch
: extendedPropertOptions.params.location = activeSearch
}
extendedPropertOptions.params.sort = sort
console.log(extendedPropertOptions)
axios.request(extendedPropertOptions)
.then((response) => {
setResults(response.data.props)
setResultCounter(response.data.totalResultCount)
setTotalPages(response.data.totalPages)
setCurrentSearch('')
setLoadingMain(false)
})
.catch((error) => {
console.error(error)
})
}
useEffect(() => {
getDefaultResults()
}, [])
useEffect(() => {
const unsubscribe = navigation.addListener('focus', () => {
getFilteredResults()
})
return unsubscribe
}, [navigation])
return (
<ScrollView style={styles.scroll}>
{
loadingMain === true ? <View><LoadingComponent /></View> : <View>{results.map((item) => {return(<View key={item.zpid}><PropertyTile item={item}/></View>)})}</View>
}
</ScrollView>
)
}
when I go back to the results component, and it runs getFilteredResults the sort has reverted back to ''. That is what I need to fix.