React.Children.only expected to receive a single React element child

[cid8600]

When I only have one tab, the bar renders fine. If I add another tab, I get the error : React.Children.only expected to receive a single React element child

Here is the snippet:

  render() {
    const { selectedTab } = this.state

    return (
      <ViewContainer>
          <Tabs>
              <Tab
                titleStyle={{fontWeight: 'bold', fontSize: 10}}
                selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
                selected={selectedTab === 'rights'}
                title={selectedTab === 'rights' ? 'RIGHTS' : null}
                renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} name='stop' size={33} />}
                renderSelectedIcon={() => <Icon color={'#6296f9'} name='stop' size={30} />}
                onPress={() => this.navigateToScene_(routes.rights)}>
              </Tab>
              <Tab
                titleStyle={{fontWeight: 'bold', fontSize: 10}}
                selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
                selected={selectedTab === 'home'}
                title={selectedTab === 'home' ? 'HOME' : null}
                renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} name='person' size={33} />}
                renderSelectedIcon={() => <Icon color={'#6296f9'} name='person' size={30} />}
                onPress={() => this.navigateToScene_(routes.rights)}>
              </Tab>
          </Tabs>
      </ViewContainer>
    )
  }

Wrapping the <Tab> items in a <View> removes the error, but the items don't show up.

[DavidKongDesheng]

Same issue here. Using react-native-router-flux handle onPress event.

[iptrix]

Just FYI, your tabs are empty - and the React Native error means that it needs 1 (just and exactly 1) child entry. Make sure you, within each tab, adds a and the error should go away.

`<Tab ...>

...

`

or you could use an external component (with import MainView from '..')

`<Tab ..>

`

[kjsmita6]

I am getting this same problem, and doing what @iptrix said does nothing, I don't get the error anymore but it stays on the same page and doesn't go to my LoginScreen.

<TabNavigator>
    <TabNavigator.Item
    selected={this.state.selectedTab === 'Login'}
    title="Login"
    renderIcon={() => <Image source={require('../img/Home.png')} style={styles.icon} />}
    onPress={() => this.setState({ selectedTab: 'Login' })}>
        <LoginScreen />
</TabNavigator.Item>

[farrukhbashir]

@dragonbanshee can you give the code of tab navigator in react native android.I use the code which is avialabe here but this is not work in react native android

[farrukhbashir]

@cid8600 @DavidKongDesheng @iptrix

[ptomasroos]

Hi there , we'll provide a runnable example in short to help you out getting started.

[Lumend]

must have a child;

child

[ramey502]

@dragonbanshee maybe your component is uppercase, and selectedTab is lowercase。it's your careless