hiddentao / react-native-modal-filter-picker

Cross-platform modal picker for React Native which supports keyword filtering, custom rendering, etc
MIT License
104 stars 74 forks source link

how to set overlayStyle #29

Open naveedshahji opened 5 years ago

naveedshahji commented 5 years ago

I am trying like overlayStyle={green} but i know it is not the exact way, can you put an example here how to set it

asososo commented 3 years ago

give a overlayStyle prop seems replace this whole origin overlayStyle, not merge.

origin value of overlayStyle is

  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0,0,0,0.85)',
    justifyContent: 'center',
    alignItems: 'center'
  },

so just replace backgroundColor with something like 'green', 'rgba(0,0,0,0.5)'

            <ModalFilterPicker
                visible={isPickerVisible}
                onSelect={(value) => {
                    setPickerVisible(false)
                    onSelect(value)
                }}
                onCancel={() => {
                    setPickerVisible(false)
                    onCancel()
                }}
                overlayStyle={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    backgroundColor: 'rgba(189, 189, 189, 0.5)',
                    justifyContent: 'center',
                    alignItems: 'center'
                }}
                options={options}
            />