fateh999 / react-native-paper-form-builder

React Native Paper Form Builder with inbuilt Validation, dropdown, autocomplete, checkbox, switch and radio inputs.
MIT License
113 stars 24 forks source link

Drop-down menu overflows the screen #35

Open felipecock opened 3 years ago

felipecock commented 3 years ago

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:

Screenshot_1625730326
fateh999 commented 3 years ago

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