How to position the dropdown menu of React Native Picker

Question

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:

Expected behavior:

Answer 1

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.