title: Pass props nicely to screens in react navigation
body: <p>I want to pass a prop to the screen. When I try that inline e.g <code>(props) =&gt; &lt;Comp {...props} {...customProps} /&gt;</code> I get a warning message, that I shouldn't parse functions to that component property. Okay. I thought I'll just create functions for every component which needs custom props. It is working, but is there a better solution? Here is my component:</p>
  
  <pre><code>export default function Loading() {
    const [loggedIn, setLoggedIn] = React.useState(false);
    const Stack = createStackNavigator();
    const authService: AuthService = new AuthService();
    const authProps: IAuthProps = {
      authService
    };
    /**
     * Bind neccessary props to the login component
     * @param props Props
     */
    function LoginWithProps(props) {
      return &lt;Login {...props} {...authProps} /&gt;;
    }
    /**
     * Bin neccessary props to the registration component
     * @param props Props
     */
    function RegistrationWithProps(props) {
      return &lt;Registration {...props} {...authProps} /&gt;;
    }
    return (
      &lt;&gt;
        {/*Show the app, when logged in*/}
        {loggedIn === true ? (
          &lt;View&gt;
            &lt;Text&gt;Test&lt;/Text&gt;
          &lt;/View&gt;
        ) : (
          &lt;Stack.Navigator
            initialRouteName="Login"
            screenOptions={{ headerShown: false, animationEnabled: false }}
          &gt;
            &lt;Stack.Screen name="Login" component={LoginWithProps} /&gt;
            &lt;Stack.Screen name="Registration" component={RegistrationWithProps} /&gt;
          &lt;/Stack.Navigator&gt;
        )}
      &lt;/&gt;
    );
  }
  ```
  </code></pre>