What happened to showMask?

[SudoPlz]

Hey there..

I really want a way to fade the background to black and make it un-clickable.

I noticed there used to be a param called showMask but it's no longer there?

How do we achieve this now?

For example if we want to be able to click on the background and minimise the Picker how does that work?

[MLDimitry]

Having the same issue. I see that showMask is listed as a prop on the pure javascript version but not the main version.

showMask would help to make it easier to catch when a user clicks away from the picker because right now it stays up indefinitely.

[elledeng]

same issue.

[anthonyalviz]

+1, unless there is an onBlur function to tie into.

[rhenmark]

+1, any updates regarding on this issue?

[MoeMamdouh]

it sounds that 'showMask' prop is removed from the library from the latest version. so I would like to share with you what i did to fix this issue in my code. in screen:

constructor(props) {
    super(props);
    this.state = {
        isPickerShow: false,
    };
}
showPicker() {
    const { selectedCaseType } = this.state;
    Picker.init({
        pickerTitleText: 'Select Type',
        pickerConfirmBtnText: 'Done',
        pickerData: data,
        selectedValue: [selected],
        onPickerConfirm: data => {
            this.setState({
                selectedCaseType: data[0]
            })
            this.hidePicker()
            // console.log(data);
        },
        onPickerCancel: data => {
            // console.log(data);
            this.hidePicker()
        },
        onPickerSelect: data => {
            // console.log(data);
        }
    });
    Picker.show();
    this.setState({
        isPickerShow: true,
    })
}
hidePicker() {
    Picker.hide()
    this.setState({
        isPickerShow: false,
    })
}

render() {
const { selectedCaseType, photos, isPickerShow } = this.state;
return(
<View style={styles.container}>
 <View style={styles.container}></View>
{isPickerShow ? (
    <TouchableWithoutFeedback onPress={() => this.hidePicker()}>
        <View style={styles.myMask}></View>
    </TouchableWithoutFeedback>
) : null}
</View>
);
}

style:

import { StyleSheet, Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window');
mask: {
    width,
    height,
    position: 'absolute',
    zIndex: 1,
  },

[oferRounds]

+1

[lukewlms]

I solved this with a combination of react-native-picker and react-native-modal. Works elegantly.

Just show a full-screen modal with no content, and display the picker (which shows on top); hide both when either the modal backdrop is pressed, or picker is Confirmed or Canceled.

Like this (could be improved, probably):

  // ONLY called from modal - must not be shown till after modal is showing, so it's on top on Android
  private readonly showPicker = () => {
    // ...
    this.setState({ isPickerShowing: true });
  }
  private readonly hidePicker = () => {
    RNPicker.hide();
    this.setState({ isPickerShowing: false });
  };

// in render():

          <Modal
            style={{
              justifyContent: "flex-end",
              flex: 1,
              // somehow top goes off screen when not full screen
              paddingTop: 55,
            }}
            animationTiming={1} // show modal and picker instantly to avoid undue delay, since picker can't show till after modal is showing
            isVisible={this.state.isPickerShowing}
            onBackdropPress={this.hidePicker}
            onBackButtonPress={this.hidePicker}
            onModalHide={this.hidePicker}
            onModalShow={this.showPicker}
          >
            {/* Modal is empty */}
            <View />
          </Modal>

// in picker options:

      onPickerCancel: this.hidePicker,
      onPickerConfirm: (values) => { saveValues(values); this.hidePicker(); },

// ...
  <TouchableOpacity onPress={() => this.setState({isPickerShowing: true})} />

[oferRounds]

@lukewlms looks good! Thanks for sharing!!

[lukewlms]

Turns out on Android I need to wait till modal is showing before showing Picker, to ensure that picker is on top. Solution updated (picker.show() only called from the onModalShow handler).

[oferRounds]

@lukewlms trying to use your solution, facing a problem that the Set and Cancel buttons of the picker are blocked by the modal. Did you face it also?

[beausmith]

What worked for me… React Native Modal component has onShow and onDismiss props which can be used to show/hide the picker after (and on top) of the modal on both iOS and Android.

[BernatWozzo]

We are having a problem with this implementation with ios13. The modal appears on top of the picker. Is there any fix possible ?