dropDown with full parent or full screen about react-native-modal-dropdown HOT 9 CLOSED

@jpamarohorta
Here is a trick you can change the result of calcPosition using adjustFrame.

This is a callback after the frame of the dropdown have been calculated and before showing. You will receive a style object as argument with some of the props like width height top left and right. Change them to appropriate values that accord with your requirement and make the new style as the return value of this function.

from react-native-modal-dropdown.

@abdullah-abunada You can override the dropdownStyle.

from react-native-modal-dropdown.

Can you give me example for that, because I overridden it but it still not working.

from react-native-modal-dropdown.

@abdullah-abunada
Sorry if you still have the problem.
You can change the dropdown width like this:
https://github.com/sohobloo/react-native-modal-dropdown/blob/v0.42/example/index.js#L92

from react-native-modal-dropdown.

Yes, I Changed it like that, but I prefer give width 100% for in flex: 1

from react-native-modal-dropdown.

@abdullah-abunada Did you figure this out? Neighter width: 100% or flex: 1 seems to work.

from react-native-modal-dropdown.

I think the problem with making the dropdown occupy 100% width is in the position.

Using width: Dimensions.get('window').width in the dropdownStyle prop makes the dropdown have the given width but still starting at the calculated position. So, it will not occupy the whole screen.

Trying to override the position is not working and I think that happens because of the order of the dropdown styles - style={[styles.dropdown, this.props.dropdownStyle, frameStyle]} where frameStyle is the calculated position - https://github.com/sohobloo/react-native-modal-dropdown/blob/master/components/ModalDropdown.js#L195.

Anyone has a working solution?

Edit:
I made a fork and switched the order of the dropdown styles - https://github.com/jpamarohorta/react-native-modal-dropdown. Using
{ width: Dimensions.get('window').width, left: 0 } as dropdownStyle prop now makes the dropdown full width.

from react-native-modal-dropdown.

Thanks @sohobloo, I didn't notice that could be used for overriding the position/size styles.

Nevertheless, shouldn't the order of the dropdown styles array be changed?

from react-native-modal-dropdown.

Try this https://github.com/Kishanjvaghela/react-native-modal-dropdown.

Added support for isFullWidth.

You just need to pass true.

Simple and Easy :-)

from react-native-modal-dropdown.