Drop-down menu overflows the screen

[felipecock]

The drop-down menu overflows the screen when the list has several options, making the last ones impossible to select. (It has been tested in Android with and without the bottom system navigation bar)

There is an example to easily reproduce this bug:

import React from 'react'
import {View, StyleSheet, ScrollView, Text} from 'react-native'
import {FormBuilder} from 'react-native-paper-form-builder'
import {useForm} from 'react-hook-form'
import {Button} from 'react-native-paper'

function Test1Screen() {
  const {control, setFocus, handleSubmit} = useForm({
    defaultValues: {
      email: '',
      password: '',
    },
    mode: 'onChange',
  })

  return (
    <View style={styles.containerStyle}>
      <ScrollView contentContainerStyle={styles.scrollViewStyle}>
        <Text style={styles.headingStyle}>Form Builder Basic Demo</Text>
        <FormBuilder
          control={control}
          setFocus={setFocus}
          formConfigArray={[
            {
              type: 'select',
              name: 'select',
              rules: {
                required: {
                  value: true,
                  message: 'Fruit is required',
                },
              },
              textInputProps: {
                label: 'Favorite fruit',
              },
              options: [
                {
                  value: 'Banana',
                  label: 'Banana',
                },
                {
                  value: 'Mango',
                  label: 'Mango',
                },
                {
                  value: 'Strawberry',
                  label: 'Strawberry',
                },
                {
                  value: 'Pineapple',
                  label: 'Pineapple',
                },
                {
                  value: 'Grape',
                  label: 'Grape',
                },
                {
                  value: 'Apple',
                  label: 'Apple',
                },
                {
                  value: 'Starfruit',
                  label: 'Starfruit',
                },
                {
                  value: 'Blackberry',
                  label: 'Blackberry',
                },
                {
                  value: 'Orange',
                  label: 'Orange',
                },
                {
                  value: 'Watermelon',
                  label: 'Watermelon',
                },
                {
                  value: 'Coconut',
                  label: 'Coconut',
                },
                {
                  value: 'Peach',
                  label: 'Peach',
                },
                {
                  value: 'Lemon',
                  label: 'Lemon',
                },
              ],
            },
          ]}
        />
        <Button
          mode={'contained'}
          onPress={handleSubmit((data: any) => {
            console.log('form data', data)
          })}>
          Submit
        </Button>
      </ScrollView>
    </View>
  )
}

const styles = StyleSheet.create({
  containerStyle: {
    flex: 1,
  },
  scrollViewStyle: {
    flex: 1,
    padding: 15,
    justifyContent: 'center',
  },
  headingStyle: {
    fontSize: 30,
    textAlign: 'center',
    marginBottom: 40,
  },
})

export default Test1Screen

The fully scrolled menu seems like:

[fateh999]

Ok will look into this, for now i would suggest use of input type autocomplete to handle large data.