CODEWITHSUNDEEP
react-native
Daniel
Daniel

Reputation: 449

How to position the dropdown menu of React Native Picker

I'm trying to display a dropdown menu in a React Native android app. I used React Native Picker for the purpose, and it seems very limited in styling and positioning the dropdown menu. I cannot get the menu to pop up below the carret (the down arrow button) position.

I tried setting the margin with hope to push the menu down, to no avail.

              <Picker
                // selectedValue={stateValue}
                style={{
                  height: 36,
                  width: 261,
                }}
                onValueChange={itemValue => {
                  console.log('item value ', itemValue);
                }}
              >
                <Picker.Item key={-1} label={'Search By...'} value="first" />
                {this.searchCategory.map((item, index) => (
                  <Picker.Item key={index} label={item} value={item} />
                ))}
              </Picker>
            </View>

The menu always covers the Picker component. I want it to appear below the Picker.

Actual behavior:

Actual behavior

Expected behavior: enter image description here

Upvotes: 6

Views: 14578

Answers (1)

Daniel
Daniel

Reputation: 449

After some research, this is an Android limitation and it seems there's little we can do with React Native Picker. Some custom packages may give us more control such as https://www.npmjs.com/package/react-native-picker-select, or https://github.com/sohobloo/react-native-modal-dropdown.

Upvotes: 9

Related Questions