React Native : What is the best practice to use global variables throughout your whole application?

After the user logs in I'm saving the username in the AsyncStorage, so it will be remembered, the next time he/she uses the app.

This is out of the context of the question, but you need to save a token in async storage with which you can fetch the user object, and not store a username in async storage. If you don't have a token next time, then you cannot assume that the saved username is valid and the user is logged in. It's a massive security issue.

Since the username will remain unchanged throughout the whole application

This is not true since user can log out, making the username invalid, and login with a different username.

This works, but it feels like a bad practice to manually pass this variable to every page where I want to show the username. Since the username doesn't change

The username does change, which makes passing it in params worse since the passed username will become outdated if it did change in future. Regardless, data such as user data doesn't belong in params: https://reactnavigation.org/docs/params#what-should-be-in-params

Is there a way to retrieve all the values from AsyncStorage just once, and then store them in some kind of global variable, so that they can be used throughout the whole application?

You need to store them in state after retrieving from async storage. Since you want to use this state in whole application, it's a matter of lifting state up to the root component.

Assuming you have a function component, you can store the state using React's useState hook: https://reactjs.org/docs/hooks-state.html

To be able to use this state in all child components, you can expose the state using React context: https://reactjs.org/docs/context.html

function App() {
  const [token, setToken] = React.useState({ checking: true });

  React.useEffect(() => {
    AsyncStorage.getItem('user_token').then(
      (value) => setToken({ checking: false, value }),
      (error) => setToken({ error })
    );
  }, []);

  if (token.checking) {
    return <LoadingScreen />;
  }

  return (
    <UserTokenContext.Provider value={token.value}>
      {/* rest of app code */}
    </UserTokenContext.Provider>
  );
}

You may also want use a global state management library such as Redux or Mobx State Tree if you need to store more than just a token.

I seem to understand that the variables only would be passed from parent to child

Yes, props are always passed from parent to child. If you need other components to be able to access the state, you lift it up to a parent component.

I made the Homescreen with a functional component which I understand is stateless

Function components are not stateless. They can hold state using the useState hook. Though your data needs to be in the root component and not home screen since you also need this data to be accessed by other screen.

You can create a utility class like DataHandler.js and save the user after login success

./DataHandler.js

let user = {};

export default {

  setUser(user) {
    user = user;
  },
  getUser() {
    return user;
  }
};

Usage like

import DataHandler from "./DataHandler";

saveUserName  = async (username) => {

    try {
        ......
        DataHandler.setUser(username); // Save User
        ......
    } catch (error) {
        console.log(error.message);
    }
};