react native send props to components when declare object - reactjs

Question

I'm trying to send into my componentsObject in FooScreen any props and to use it into the components, but it not let me use it.
const FooScreen = ({props}) => <Center><Text>{props}</Text></Center>;
const BarScreen = () => <Center><Text>Bar</Text></Center>;
const components = {
Foo: FooScreen({name:'test1'}),
Bar: BarScreen({name:'test2'}),
};
const Center = ({ children }) => (
<View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>{children}</View>
);
const pages = [
{ screenName: 'Foo', componentName: 'Foo' },
{ screenName: 'Bar', componentName: 'Bar' },
];
i send it as props in Screen and in other screen i try to use it as
class TabBarView extends Component {
constructor(props){
super(props);
this.state = {
tabs: ''
}
}
componentDidMount(){
console.log(this.props)
}
componentWillMount(){
console.log(this.props)
const {pages,components} = this.props
setTimeout(() => {
const screens = {};
pages.forEach(page => {
screens[page.screenName] = { screen: components[page.componentName] };
});
this.setState({ tabs: TabNavigator(screens) });
}, 2000);
}
render() {
if (this.state.tabs) {
return <this.state.tabs />;
}
return <View><Text>Loading...</Text></View>;
}
}
it fail and not let me do that.
later, I want to use in FooScreen as real screen in react and set it into stackNavigator
I get the error
The component for route 'Foo' must be a react component

Answer 1

I suggest the component returns function instead of React element. It's easy to assign a key for each element.
The setState should not be used in componentWillMount, especially when there is a timer to cause side-effect.
For efficiency reason, I tested the code below on web. If you replace div with View and p with Text, this should work in React Native. Don't forget import { Text, View } from 'react-native'
import React, { Component } from 'react';
const FooScreen = props => (
<Center>
<Text>{`[Foo] ${props.name}`}</Text>
</Center>
);
const BarScreen = props => (
<Center>
<Text>{`[Bar] ${props.name}`}</Text>
</Center>
);
const components = {
Foo: (key) => <FooScreen name="test1" key={key} />,
Bar: (key) => <BarScreen name="test2" key={key} />,
};
const Center = props => (
<View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
{props.children}
</View>
);
const pages = [ 'Foo', 'Bar' ];
export default class TabBardiv extends Component {
state = {
tabs: null,
};
componentDidMount() {
console.log(pages);
setTimeout(() => {
this.setState({ tabs: pages });
}, 2000);
}
render() {
if (!this.state.tabs) {
return (
<View>
<Text>Loading...</Text>
</View>
);
}
const screens = pages.map((page, index) => {
const element = components[page];
console.log(element);
return element(index);
});
return screens;
}
}