NativeBase-KitchenSink
NativeBase-KitchenSink copied to clipboard
Feather icons are not showing properly
I am using feather icons for footer menu, here is what i can see while apply icons
Here is my code which i am using.
<FooterTab style={styles.footertabstyle} >
<Button vertical active={this.state.selected === 1} onPress={() => this.props.navigation.navigate("Journal")}>
<Icon type="Feather" name="file" style={[styles.blacktext, this.state.selected === 1 ? styles.activemenu : styles.blacktext]} />
<Text style={[styles.blacktext, this.state.selected ===1 ? styles.activemenu : styles.blacktext]}>Apps</Text>
</Button>
<Button vertical active={this.state.selected === 2} onPress={() => this.props.navigation.navigate("Todo")}>
<Icon name="check-square" type="Feather" style={[styles.blacktext, this.state.selected ===2 ? styles.activemenu : styles.blacktext]}/>
<Text style={[styles.blacktext, this.state.selected ===2 ? styles.activemenu : styles.blacktext]}>To-Do</Text>
</Button>
<Button vertical active={this.state.selected === 3} onPress={() => this.props.navigation.navigate("Addjournal")}>
<Icon name="plus-square" type="Feather" style={[styles.blacktext, this.state.selected ===3 ? styles.activemenu : styles.blacktext]} />
<Text style={[styles.blacktext, this.state.selected ===3 ? styles.activemenu : styles.blacktext]}>Add</Text>
</Button>
<Button vertical active={this.state.selected === 4} onPress={() => this.props.navigation.navigate("Dashboard")}>
<Icon name="pie-chart" type="Feather" style={[styles.blacktext, this.state.selected ===4 ? styles.activemenu : styles.blacktext]}/>
<Text style={[styles.blacktext, this.state.selected ===4 ? styles.activemenu : styles.blacktext]}>Dashboard</Text>
</Button>
<Button vertical active={this.state.selected === 5} onPress={() => this.props.navigation.navigate("Settings")}>
<Icon name="settings" type="Feather" style={[styles.blacktext, this.state.selected ===5 ? styles.activemenu : styles.blacktext]}/>
<Text style={[styles.blacktext, this.state.selected ===5 ? styles.activemenu : styles.blacktext]}>Settings</Text>
</Button>
</FooterTab>
</Footer>
It should be showing this.