import RNSelectGroupButtonsModal from 'react-native-select-group-buttons-modal';

 <RNSelectGroupButtonsModal
                    settingBuild={this._settingBuild}
                    onPaymentModeChanged={(item, index) => {
                        this.setState({
                            selectText: JSON.stringify(item)
                        })
                    }}
                    data={this.initData()}
                    closeButtonPress={(flag) => {
                        this.setState({
                            selectorVisible: flag
                        })
                    }}
                    selectorVisible={this.state.selectorVisible}/>

Run Sample


npm install expo-cli --global //If you haven't installed it before

git clone git@github.com:ddwhan0123/react-native-select-group-buttons-modal.git //clone git 

cd sample

npm install

expo start -c --localhost --ios

Android Demonstration Effect

iOS Demonstration Effect

Properties

settingBuild?:object

Objects that set underlying properties

  _settingBuild = {
        backdropColor: '#303437',
        backdropOpacity: 0.2,
        animationIn: 'slideInUp',
        animationTime: 400,//Default animation duration
        hideOnBack: true,
        modalTitle: '支付方式',//Main title
        modalTips: '业务控制文字内容',Subheading
        closeWithOutSideClick: true,//Click on the grey area to close the bullet window
        submitText: '确定'//Bottom Button submit text
    };

onPaymentModeChanged?:(item, index) => void

Callback of selected content

data?:object[]

Button Data Source Object Array

closeButtonPress?:(flag) => void

Close button callback

selectorVisible?:boolean

Whether to display the bullet window label

defaultMode?:object

Objects selected by default

style

Setting Style Properties

SubmitButtonStyle

Setting the properties of the bottom button style

tipsColor

Setting Subtitle Style

hideCloseButton?:boolean

Set whether to display the close button

defaultCloseIcon?:object

Resource object of close button file

closeWithOutSideClick?:boolean

Click on the outside area to close the bullet window

Licenses

Keywords

react-native

FAQs

Package last updated on 15 Feb 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

react-native-select-group-buttons-modal