Feather icons are not showing properly

[rshaikhcornerstone]

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.