Xtykutl

I'm using react-native's picker to pick an item from the list of items. What I want to ask is how can I make the selected item to look different may be with a different style or with an icon?

You can use library to get such functionality, Please take a look...

http://docs.nativebase.io/Components.html#picker-with-icon-style-headref

import React, { Component } from "react";

import { Container, Header, Content, Icon, Picker, Form } from "native-base";

class PickerWithIconStyle extends Component {

  constructor(props) {

    super(props);

    this.state = {

      selected: "key1"

    };

  }

  onValueChange(value: string) {

    this.setState({

      selected: value

    });

  }

  render() {

    return (

      <Container>

        <Header />

        <Content>

          <Form>

            <Picker

              mode="dropdown"

              iosHeader="Select your SIM"

              iosIcon={<Icon name="arrow-dropdown-circle" style={{ color: "#007aff", fontSize: 25 }} />}

              style={{ width: undefined }}

              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>

          </Form>

        </Content>

      </Container>

    );

  }

}