How to resize Model in react-native-dropdown-picker

Question

I have used react-native-dropdown-picker to showed items in Modal. The problem is that the modal showing with full screen of mobile and i can't able to resize it. I tried below code but no luck. Can anyone help to solve the issue?

Example code:

import DropDownPicker from 'react-native-dropdown-picker';

function App() {
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([
    {label: 'Apple', value: 'apple'},
    {label: 'Banana', value: 'banana'}
  ]);

  return (
    <DropDownPicker
      open={open}
      value={value}
      items={items}
      setOpen={setOpen}
      setValue={setValue}
      setItems={setItems}

        listMode="MODAL"   // list mode is MODAL
        modalProps={{ animationType: "fade", width: "50%", height: '50%'}}
        modalContentContainerStyle={{backgroundColor: "#fff", width:'50%', height:'50%'}}
    />
  );
}

Expected: The modal container should show like react-native modal popup.

Answer 1

If you want to set it to a fixed width you can use the style prop.

style={{
  width: '50%',
}}

I am actually trying to figure out how to remove the width altogether. This is the third package for a dropdown that has a set width instead of allowing the container to grow normally. This should help you though.