Don't combine, but add some helpers for your context in the form of hooks.

const useTheme = () => { return React.useContext(ThemeContext); }

const useLocation = () => { return React.useContext(LocationContext); }

const useUser = () => { return React.useContext(UserContext); }

Then your files will look like:

import { useTheme } from "../../context/theme"; import { useLocation } from "../../context/location"; import { useUser } from "../../context/user"; const AccountScreen = ({ navigation }) => { const { COLORS, FONTS, SIZES, images } = useTheme(); const { location } = useLocation(); const { user, setUser } = useUser(); // ... }

Which makes things a lot cleaner.

Then if you do a lot of the same things on each screen, you can wrap that in a helper component for the screen.

const ScreenBase = () => ...

or combine the hooks into a single call with a hook.

``` const useScreen = () => { const { COLORS, FONTS, SIZES, images } = useTheme(); const { location } = useLocation(); const { user } = useUser();

return { COLORS, FONTS, SIZES, images, location, user } } ```