{"pageContext":{"isCreatedByStatefulCreatePages":false,"pkg":{"name":"react-native-modal-selector","codeHtml":"import React, { Component } from 'react'\n\nimport {\n View, Text, TextInput, Switch,\n} from 'react-native'\n\nimport ModalSelector from 'react-native-modal-selector'\n\nclass SampleApp extends Component {\n constructor() {\n super()\n\n this.state = {\n textInputValue: '',\n }\n }\n\n render() {\n let index = 0\n const data = [\n { key: index++, section: true, label: 'Fruits' },\n {\n key: index++,\n label: 'Red Apples',\n component: (\n <View\n style={{\n backgroundColor: 'red',\n borderRadius: 5,\n alignItems: 'center',\n }}\n >\n <Text style={{ color: 'white' }}>\n Red Apples custom component ☺\n </Text>\n </View>\n ),\n },\n { key: index++, label: 'Cherries' },\n { key: index++, label: 'Cranberries' },\n { key: index++, label: 'Pink Grapefruit' },\n { key: index++, label: 'Raspberries' },\n { key: index++, section: true, label: 'Vegetables' },\n { key: index++, label: 'Beets' },\n { key: index++, label: 'Red Peppers' },\n { key: index++, label: 'Radishes' },\n { key: index++, label: 'Radicchio' },\n { key: index++, label: 'Red Onions' },\n { key: index++, label: 'Red Potatoes' },\n { key: index++, label: 'Rhubarb' },\n { key: index++, label: 'Tomatoes' },\n ]\n\n return (\n <View style={{ flex: 1, justifyContent: 'space-around', padding: 50 }}>\n {}\n <ModalSelector\n data={data}\n initValue=\"Select something yummy!\"\n onChange={option => {\n alert(`${option.label} (${option.key}) nom nom nom`)\n }}\n />\n\n {}\n <ModalSelector\n data={data}\n initValue=\"Select something yummy!\"\n onChange={option => {\n this.setState({ textInputValue: option.label })\n }}\n >\n <TextInput\n style={{\n borderWidth: 1,\n borderColor: '#ccc',\n padding: 10,\n height: 40,\n }}\n editable={false}\n placeholder=\"Select something yummy!\"\n value={this.state.textInputValue}\n />\n </ModalSelector>\n\n {}\n <ModalSelector\n data={data}\n ref={selector => {\n this.selector = selector\n }}\n customSelector={\n <Switch\n style={{ alignSelf: 'center' }}\n onValueChange={() => this.selector.open()}\n />\n }\n />\n </View>\n )\n }\n}\n\nexport default SampleApp\n","exampleFilesJSON":"{\"path\":\"\",\"name\":\"react-native-modal-selector\",\"children\":[{\"path\":\"App.js\",\"name\":\"App.js\",\"extension\":\".js\",\"size\":3219,\"isFile\":true,\"codeHtml\":\"import React, { Component } from 'react'\\n\\nimport {\\n View, Text, TextInput, Switch,\\n} from 'react-native'\\n\\nimport ModalSelector from 'react-native-modal-selector'\\n\\nclass SampleApp extends Component {\\n constructor() {\\n super()\\n\\n this.state = {\\n textInputValue: '',\\n }\\n }\\n\\n render() {\\n let index = 0\\n const data = [\\n { key: index++, section: true, label: 'Fruits' },\\n {\\n key: index++,\\n label: 'Red Apples',\\n component: (\\n <View\\n style={{\\n backgroundColor: 'red',\\n borderRadius: 5,\\n alignItems: 'center',\\n }}\\n >\\n <Text style={{ color: 'white' }}>\\n Red Apples custom component ☺\\n </Text>\\n </View>\\n ),\\n },\\n { key: index++, label: 'Cherries' },\\n { key: index++, label: 'Cranberries' },\\n { key: index++, label: 'Pink Grapefruit' },\\n { key: index++, label: 'Raspberries' },\\n { key: index++, section: true, label: 'Vegetables' },\\n { key: index++, label: 'Beets' },\\n { key: index++, label: 'Red Peppers' },\\n { key: index++, label: 'Radishes' },\\n { key: index++, label: 'Radicchio' },\\n { key: index++, label: 'Red Onions' },\\n { key: index++, label: 'Red Potatoes' },\\n { key: index++, label: 'Rhubarb' },\\n { key: index++, label: 'Tomatoes' },\\n ]\\n\\n return (\\n <View style={{ flex: 1, justifyContent: 'space-around', padding: 50 }}>\\n {}\\n <ModalSelector\\n data={data}\\n initValue=\\\"Select something yummy!\\\"\\n onChange={option => {\\n alert(`${option.label} (${option.key}) nom nom nom`)\\n }}\\n />\\n\\n {}\\n <ModalSelector\\n data={data}\\n initValue=\\\"Select something yummy!\\\"\\n onChange={option => {\\n this.setState({ textInputValue: option.label })\\n }}\\n >\\n <TextInput\\n style={{\\n borderWidth: 1,\\n borderColor: '#ccc',\\n padding: 10,\\n height: 40,\\n }}\\n editable={false}\\n placeholder=\\\"Select something yummy!\\\"\\n value={this.state.textInputValue}\\n />\\n </ModalSelector>\\n\\n {}\\n <ModalSelector\\n data={data}\\n ref={selector => {\\n this.selector = selector\\n }}\\n customSelector={\\n <Switch\\n style={{ alignSelf: 'center' }}\\n onValueChange={() => this.selector.open()}\\n />\\n }\\n />\\n </View>\\n )\\n }\\n}\\n\\nexport default SampleApp\\n\"}],\"isFile\":false,\"size\":3219}","gallery":[{"src":"https://raw.githubusercontent.com/peacechen/react-native-modal-selector/master/docs/demo.gif","width":270,"height":480}]}}}