Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How can I style picker's iosIcon? #1843

Closed
VanessaChu opened this issue Apr 27, 2018 · 2 comments
Closed

How can I style picker's iosIcon? #1843

VanessaChu opened this issue Apr 27, 2018 · 2 comments
Labels
awaiting response

Comments

@VanessaChu
Copy link

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={<Icon style={{fontSize: 12, fontWeight: '300'}} name='chevron-down' />} to picker.

  1. 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.
@akhil-ga
Copy link
Contributor

akhil-ga commented May 3, 2018

@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 }} />
  }
}

akhil-ga added a commit that referenced this issue May 3, 2018
@akhil-ga
Added support to style iosIcon of picker.
8f13d64 
Fix for issue #1843 (How can I style picker's iosIcon)
@akhil-ga akhil-ga mentioned this issue May 3, 2018
Merged
@SupriyaKalghatgi
Copy link
Contributor

Fixed with 2.4.4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
awaiting response
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@VanessaChu @SupriyaKalghatgi @akhil-ga