How to pass props to Screen component with a tab navigator?

Question

This is my first post on StackOverflow, so apologies if I\'m not following the correct format.

I\'m building my first app using tab navigator from React Navigation

Answer 1

you can use the property 'children' to pass an element type jsx like instead of the property 'component', is recomended from react-native.

On this way you can pass props to component example:

    <tab.Screen
    name="home"
       children={()=><ComponentName propName={propValue}/>}
    />

is neccesary to use '()=>' because the property children need a function that return a jsx element, it's functional.

Answer 2

Check out the answer in the code comments.

<Tab.Screen
  name="AdminTab"
  children={() => <AdminPage userData={this.props.userSettings} />}
  // component={() => <AdminPage userData={this.props.userSettings} />} <<<---- Although this will work but passing an inline function will cause the component state to be lost on re-render and cause perf issues since it's re-created every render. You can pass the function as children to 'Screen' instead to achieve the desired behaviour. You can safely remove the component attribute post adding children.
/>

Looks like you're passing an inline function for 'component' prop for the screen 'AdminTab' (e.g. component={() => <SomeComponent />}). Passing an inline function will cause the component state to be lost on re-render and cause perf issues since it's re-created every render. You can pass the function as children to 'Screen' instead to achieve the desired behaviour.

Answer 3

you can use the following

<Tab.Screen name="Favourite" component={() => <RecipeList CategoryId={0}></RecipeList>}/>

You may gate a warning loss of current state due to re-render the component. but the props will work. If you want to copy current state props then you can use {...props}

Answer 4

In order to send props to <MyTests /> component, inside <Tab.Screen />:

<Tab.Screen name="My tests">
  {() => <MyTests myPropsName={myPropsValue} />}
</Tab.Screen>