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

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


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.


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.


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

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