Molly Harper Molly Harper - 1 month ago 16
Javascript Question

NativeBase FooterTab returns error when using an Icon

I used the Native Base docs as a base to create a FooterTab.

I receive the following error if I add an Icon element to a button: undefined is not an object (evaluation 'child.props.children.props.name') from FooterTab.js:114 (has since changed, now line 142).

Below is the code I am using in my render function:

<Footer>
<FooterTab>
<Button active={this.state.detailsTab} onPress={() => this.toggleDetailsTab()}>
Details
<Icon name='ios-home' style={globalStyles.inspectionsItemIcon} />
</Button>
<Button active={this.state.inspectionTab} onPress={() => this.toggleInspectionTab()}>
Inspection
</Button>
<Button active={this.state.insectsTab} onPress={() => this.toggleInsectsTab()}>
Insects
</Button>
<Button active={this.state.radonTab} onPress={() => this.toggleRadonTab()}>
Radon
</Button>
</FooterTab>
</Footer>


If I remove the Icon from the first button everything works well.

Any ideas? Thanks in advance.

Answer

Please check if your Icon component is imported from NativeBase:

import { Icon } from 'native-base';

FooterTab.js checks for NativeBase's Icon component at line 88.

If it is not one, then it will just load the 'name' property at line 142 which will result in error because there are 2 children ('Details' text and Icon component).