Nativebase: How can I style picker's iosIcon?

Created on 27 Apr 2018 · 2Comments · Source: GeekyAnts/NativeBase

How can I style the Picker's iosIcon? It is too big. By inspecting it, font size is 22.

This is what i tried:
1.

            <Picker
              iosHeader='Select Voice'
              mode='dropdown'
              supportedOrientations={['portrait', 'landscape']}
              selectedValue={this.props.voice}
              onValueChange={this.props.onVoiceChange}
              textStyle={styles.pickerText}
              itemStyle={styles.pickerItem}
              style={styles.picker}
              itemTextStyle={styles.pickerItemText}
              iosIcon={<Icon style={{fontSize: 12, fontWeight: '300'}} name='chevron-down' />}
            >

Added iosIcon={} to picker.

Edited native base component Icon:
import variable from './../variables/platform'

export default (variables = variable) => {
  const iconTheme = {
    fontSize: 12,
    '.darkgray': {
      color: 'rgba(74, 74, 74, 1)'
    }
  }

  return iconTheme
}

Neither worked for me. The size of Picker's iosIcon is defaulted to 22.

awaiting response

Source

VanessaChu

👍1

Most helpful comment

Fixed with 2.4.4

SupriyaKalghatgi on 11 May 2018

🎉2 👍1

All 2 comments

@VanessaChu try creating a separate component for iosIcon and modify the icon styles there.

Code

import React, { Component } from "react";
import { Container, Header, Title, Content, Button, Icon, Right, Body, Left, Picker, Form } from "native-base";
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: "key1"
    };
  }
  onValueChange(value) {
    this.setState({
      selected: value
    });
  }
  render() {
    return (
      <Container>
        <Header>
          <Left>
            <Button transparent>
              <Icon name="arrow-back" />
            </Button>
          </Left>
          <Body>
            <Title>Picker with Icon</Title>
          </Body>
          <Right />
        </Header>
        <Content>
          <Picker
            mode="dropdown"
            iosHeader="Select your SIM"
            iosIcon={<IosIcon />}
            selectedValue={this.state.selected}
            onValueChange={this.onValueChange.bind(this)}
          >
            <Picker.Item label="Wallet" value="key0" />
            <Picker.Item label="ATM Card" value="key1" />
            <Picker.Item label="Debit Card" value="key2" />
            <Picker.Item label="Credit Card" value="key3" />
            <Picker.Item label="Net Banking" value="key4" />
          </Picker>
        </Content>
      </Container >
    );
  }
}

class IosIcon extends Component {
  render() {
    return <Icon name="arrow-down" style={{ color: "blue", fontSize: 18 }} />
  }
}