CODEWITHSUNDEEP
react-native
rajat44
rajat44

Reputation: 5121

How to show a drop-down menu on press of a button(TouchableHighlight) in react native

Picker(Native component of React-native) is different from drop-down menu, but I tried implementing it too , so please help me how to do that too . 

       press(){

                 return (
                  <Picker
              selectedValue={this.state.language}

              onValueChange={(lang) => this.setState({language: lang})}>
              <Picker.Item label="Java" value="java" />
              <Picker.Item label="JavaScript" value="js" />
            </Picker>
                );

            }

            tick(){
                    this.setState({picker: true});
                  }
 var xyz= {this.state.picker} ? ({this.press}): (return(<View/>));

this is part of my render function , which contains an image button, by clicking that button I want to open a drop down menu . 

<TouchableHighlight
                    underlayColor="gray"
                    onPress={this.tick}
                    style=  {{flex:2,justifyContent:'center',alignItems:'center'}}>
                    <Image 
                    style={{height:20,width:20,}}
                    source={require('./images/add-button.png')}/>
                    </TouchableHighlight>

                    {xyz}

I have set the default state of picker as false in Constructor.

Upvotes: 1

Views: 9257

Answers (1)

Kyle Finley
Kyle Finley

Reputation: 11992

Maybe react-native-dropdown is what you are looking for.

Usage:

var React = require('react-native');
var {
  Component,
  AppRegistry,
  Text,
  View,
} = React;

const DropDown = require('react-native-dropdown');
const {
  Select,
  Option,
  OptionList,
  updatePosition
} = DropDown;

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      canada: ''
    };
  }

  componentDidMount() {
    updatePosition(this.refs['SELECT1']);
    updatePosition(this.refs['OPTIONLIST']);
  }

  _getOptionList() {
    return this.refs['OPTIONLIST'];
  }


  _canada(province) {

    this.setState({
      ...this.state,
      canada: province
    });
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Select
            width={250}
            ref="SELECT1"
            optionListRef={this._getOptionList.bind(this)}
            defaultValue="Select a Province in Canada ..."
            onSelect={this._canada.bind(this)}>
            <Option>Java</Option>
            <Option>Javascript</Option>
          </Select>

          <Text>Selected provicne of Canada: {this.state.canada}</Text>

          <OptionList ref="OPTIONLIST"/>
      </View>
    );
  }
}

AppRegistry.registerComponent('App', () => App);

Answers to questions:

refs is a way to reference the component you've added: More about refs

updatePosition accepts the reference and uses it to find where the dropdown should appear on the screen.

Upvotes: 1

Related Questions