Search code examples
androidreact-nativepickernative-base

Native-Base Picker does not work properly Android - Does not trigger function onValueChange

I'm using Picker component of Native-Base for my react-native application. On IOS everything is ok, whereas, on Android side I can not trigger function I added on onValueChange.

Is there anyone faced this issue before?

How did you fix it? I stuck here almost a day.

Here is my code.

<Picker style={{ width: 200, height: 40}}
                                    iosHeader="Branch"
                                    Header="Branch"
                                    mode="dropdown"
                                    textStyle={{color: 'white'}}
                                    placeholder="Branch"
                                    headerBackButtonText="Geri"
                                    selectedValue={this.state.selectedBranch}
                                    onValueChange={(value)=>this.onBranchSelected(value)}
                                >
                                    {this.state.branches.map((branches, i)=>{
                                            return(
                                                <Picker.Item label={branches.address_line} value={branches.id} key={i}/>
                                            );
                                        }
                                    )}
                                </Picker>

It does not call the function onBranchSelected on Android.

Solution

  • I tried your code and was working fine for me.

    Pasting my code

    import React, { Component } from "react";
import { Platform } from "react-native";
import { Container, Header, Title, Content, Button, Icon, Text, Right, Body, Left, Picker, Form } from "native-base";

export default class PickerExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      branches: [
        { address_line: 'address 1', id: 1 },
        { address_line: 'address 2', id: 2 },
        { address_line: 'address 3', id: 3 },
        { address_line: 'address 4', id: 4 },
        { address_line: 'address 5', id: 5 }],
      selected1: 1
    };
  }

  onBranchSelected(value) {
    this.setState({
      selectedBranch: value
    });
  }

  render() {
    return (
      <Container>
        <Header>
          <Left>
            <Button transparent>
              <Icon name="arrow-back" />
            </Button>
          </Left>
          <Body>
            <Title>Picker</Title>
          </Body>
          <Right />
        </Header>
        <Content>
          <Form>
            <Picker
              style={{ width: 200, height: 40 }}
              iosHeader="Branch"
              Header="Branch"
              mode="dropdown"
              textStyle={{ color: 'grey' }}
              placeholder='Select branch'
              headerBackButtonText='Geri'
              selectedValue={this.state.selectedBranch}
              onValueChange={(value) => this.onBranchSelected(value)}
            >
              {this.state.branches.map((branches, i) => {
                return (
                  <Picker.Item label={branches.address_line} value={branches.id} key={i} />
                );
              }
              )}
            </Picker>
          </Form>
        </Content>
      </Container>
    );
  }
}

    Gif

    Dependencies

    "native-base": "2.3.5",
"react": "16.0.0",
"react-native": "0.50.0",