Dropdown going up instead of down.!!👀

[premdasvm]

Hi @hossein-zare My Dropdown list goes up like this instead of down, any ideas why?

My Component

import React, { useState } from 'react';
import DropDownPicker from 'react-native-dropdown-picker';
import { Card } from 'react-native-paper';
import { COLORS } from '../theme/colors';

const PaymentTypePicker = ({ width }) => {
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([
    { label: 'Cash', value: 'Cash' },
    { label: 'UPI', value: 'UOI' },
    { label: 'Net Banking', value: 'NetBanking' },
  ]);
  return (
    <Card
      mode="elevated"
      style={{
        flex: 1,
        marginVertical: 5,
        borderRadius: 10,
      }}
      elevation={2}>
      <DropDownPicker
        open={open}
        value={value}
        items={items}
        setOpen={setOpen}
        setValue={setValue}
        setItems={setItems}
        style={{ borderWidth: 0 }}
        placeholder="Choose"
        textStyle={{ color: COLORS.black, opacity: 0.5 }}
        dropDownContainerStyle={{
          borderWidth: 0,
          shadowOpacity: 0.1,
          shadowRadius: 2,
          shadowColor: '#000',
          overflow: 'visible',
          elevation: 2,
        }}
        arrowIconStyle={{ opacity: 0.2, marginRight: 10 }}
        labelStyle={{ color: COLORS.black }}
        listMode="SCROLLVIEW"
      />
    </Card>
  );
};

export default PaymentTypePicker;

[hossein-zare]

Hi,

When there's not enough space at the bottom, the direction changes to TOP automatically. If you think it's a bug please take a full screenshot of your screen.

https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/advanced/dropdown-box#dropdowndirection https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/advanced/dropdown-box#bottomoffset

[utkuimd]

bottomOffset solved my problem, thanks