React-Native pickerview items position is outside of the pickerview

Question

When I add a picker in my react native app, the picker is huge

I tried changing the size of the view to be 30, but it looks like this didn't change the position of the picker items.

I would like each picker item to be the height of the picker, and I would like no picker items to be visible outside the picker

---

PickerView js

            <Picker style={styles.searchField}>
              <Picker.item label="Full" value="full" style={styles.pickerItem}></Picker.item>
              <Picker.item label="Short" value="short"></Picker.item>
            </Picker>

---

Styles

  pickerItem: {
    height: 30
  },
  searchField: {
    backgroundColor: '#FFF',
    textAlign: 'center',
    width: 200,
    margin: 5,
    height: 30
  }