CODEWITHSUNDEEP
javascriptreactjsreact-nativenative-base
Norfeldt
Norfeldt

Reputation: 9678

React Native: onPress triggering another onPress

I'm using the awesome <Picker> component from Native Base. 

import React, { Component } from 'react'
import {View, Picker, Text, Button, Icon} from 'native-base'

export default class PickSomething extends Component {
  constructor(props) {
    super(props)

    this.state = {
      SelectedValue: 'Foo',
    }
  }

  render() {
    return (
      <View >
        <Text>Type: </Text>

        <Picker
          iosHeader="Select a Type"
          selectedValue={this.state.SelectedValue}
          onValueChange={(value) => {
            this.setState(
              (prevState, props) => ({SelectedValue: value})
            )}}>

          <Picker.Item label="Foo" value="Foo" />

          <Picker.Item label="Bar" value="Bar" />
        </Picker>

        <Button
          onPress={ () => 
               //trigger the <Picker>onPress 
        }>
          <Icon name="ios-arrow-dropdown-circle-outline"/>
        </Button>
      </View>
    )}
}

I would like it to be more obvious that this is a dropdown. How do I make the Button onPrees trigger the onPress of the Picker?

Upvotes: 1

Views: 1082

Answers (1)

rgommezz
rgommezz

Reputation: 13916

On Android, You can set the prop mode="dropdown" to show a dropdown anchored to the picker view. That renders an arrow on the right side (check the gif from the NativeBase docs). iOS follows different design guidelines than Android so that prop won't work in iOS unfortunately.

NativeBase uses the react-native Picker underneath the hood, but I don't see anything documented to imperatively open the picker from the outside using refs. You could always dig your way out into the src code, but it seems a measure of last resort.

Upvotes: 1

Related Questions