{"pageContext":{"isCreatedByStatefulCreatePages":false,"pkg":{"name":"react-native-tag-input","codeHtml":"import React, { Component } from 'react'\nimport { Text, View, Platform } from 'react-native'\nimport TagInput from 'react-native-tag-input'\n\nconst inputProps = {\n keyboardType: 'default',\n placeholder: 'email',\n autoFocus: true,\n style: {\n fontSize: 14,\n marginVertical: Platform.OS == 'ios' ? 10 : -2,\n },\n}\n\nconst horizontalInputProps = {\n keyboardType: 'default',\n returnKeyType: 'search',\n placeholder: 'Search',\n style: {\n fontSize: 14,\n marginVertical: Platform.OS == 'ios' ? 10 : -2,\n },\n}\n\nconst horizontalScrollViewProps = {\n horizontal: true,\n showsHorizontalScrollIndicator: false,\n}\n\nexport default class TagInputExample extends Component {\n state = {\n tags: [],\n text: '',\n horizontalTags: [],\n horizontalText: '',\n }\n\n onChangeTags = tags => {\n this.setState({ tags })\n }\n\n onChangeText = text => {\n this.setState({ text })\n\n const lastTyped = text.charAt(text.length - 1)\n const parseWhen = [',', ' ', ';', '\\n']\n\n if (parseWhen.indexOf(lastTyped) > -1) {\n this.setState({\n tags: [...this.state.tags, this.state.text],\n text: '',\n })\n }\n }\n\n labelExtractor = tag => tag\n\n onChangeHorizontalTags = horizontalTags => {\n this.setState({\n horizontalTags,\n })\n }\n\n onChangeHorizontalText = horizontalText => {\n this.setState({ horizontalText })\n\n const lastTyped = horizontalText.charAt(horizontalText.length - 1)\n const parseWhen = [',', ' ', ';', '\\n']\n\n if (parseWhen.indexOf(lastTyped) > -1) {\n this.setState({\n horizontalTags: [\n ...this.state.horizontalTags,\n this.state.horizontalText,\n ],\n horizontalText: '',\n })\n this._horizontalTagInput.scrollToEnd()\n }\n }\n\n render() {\n return (\n <View style={{ flex: 1, margin: 10, marginTop: 30 }}>\n <Text style={{ marginVertical: 10 }}>Vertical Scroll</Text>\n <View\n style={{\n flexDirection: 'row',\n alignItems: 'center',\n backgroundColor: 'lightgray',\n }}\n >\n <Text>To: </Text>\n <TagInput\n value={this.state.tags}\n onChange={this.onChangeTags}\n labelExtractor={this.labelExtractor}\n text={this.state.text}\n onChangeText={this.onChangeText}\n tagColor=\"blue\"\n tagTextColor=\"white\"\n inputProps={inputProps}\n maxHeight={75}\n />\n </View>\n\n <Text style={{ marginVertical: 10 }}>Horizontal Scroll</Text>\n <View\n style={{\n marginBottom: 10,\n flexDirection: 'row',\n alignItems: 'center',\n backgroundColor: 'lightgray',\n }}\n >\n <Text>To: </Text>\n <TagInput\n ref={horizontalTagInput => {\n this._horizontalTagInput = horizontalTagInput\n }}\n value={this.state.horizontalTags}\n onChange={this.onChangeHorizontalTags}\n labelExtractor={this.labelExtractor}\n text={this.state.horizontalText}\n onChangeText={this.onChangeHorizontalText}\n tagColor=\"blue\"\n tagTextColor=\"white\"\n inputProps={horizontalInputProps}\n scrollViewProps={horizontalScrollViewProps}\n />\n </View>\n </View>\n )\n }\n}\n","exampleFilesJSON":"{\"path\":\"\",\"name\":\"react-native-tag-input\",\"children\":[{\"path\":\"TagInputExample.js\",\"name\":\"TagInputExample.js\",\"extension\":\".js\",\"size\":3201,\"isFile\":true,\"codeHtml\":\"import React, { Component } from 'react'\\nimport { Text, View, Platform } from 'react-native'\\nimport TagInput from 'react-native-tag-input'\\n\\nconst inputProps = {\\n keyboardType: 'default',\\n placeholder: 'email',\\n autoFocus: true,\\n style: {\\n fontSize: 14,\\n marginVertical: Platform.OS == 'ios' ? 10 : -2,\\n },\\n}\\n\\nconst horizontalInputProps = {\\n keyboardType: 'default',\\n returnKeyType: 'search',\\n placeholder: 'Search',\\n style: {\\n fontSize: 14,\\n marginVertical: Platform.OS == 'ios' ? 10 : -2,\\n },\\n}\\n\\nconst horizontalScrollViewProps = {\\n horizontal: true,\\n showsHorizontalScrollIndicator: false,\\n}\\n\\nexport default class TagInputExample extends Component {\\n state = {\\n tags: [],\\n text: '',\\n horizontalTags: [],\\n horizontalText: '',\\n }\\n\\n onChangeTags = tags => {\\n this.setState({ tags })\\n }\\n\\n onChangeText = text => {\\n this.setState({ text })\\n\\n const lastTyped = text.charAt(text.length - 1)\\n const parseWhen = [',', ' ', ';', '\\\\n']\\n\\n if (parseWhen.indexOf(lastTyped) > -1) {\\n this.setState({\\n tags: [...this.state.tags, this.state.text],\\n text: '',\\n })\\n }\\n }\\n\\n labelExtractor = tag => tag\\n\\n onChangeHorizontalTags = horizontalTags => {\\n this.setState({\\n horizontalTags,\\n })\\n }\\n\\n onChangeHorizontalText = horizontalText => {\\n this.setState({ horizontalText })\\n\\n const lastTyped = horizontalText.charAt(horizontalText.length - 1)\\n const parseWhen = [',', ' ', ';', '\\\\n']\\n\\n if (parseWhen.indexOf(lastTyped) > -1) {\\n this.setState({\\n horizontalTags: [\\n ...this.state.horizontalTags,\\n this.state.horizontalText,\\n ],\\n horizontalText: '',\\n })\\n this._horizontalTagInput.scrollToEnd()\\n }\\n }\\n\\n render() {\\n return (\\n <View style={{ flex: 1, margin: 10, marginTop: 30 }}>\\n <Text style={{ marginVertical: 10 }}>Vertical Scroll</Text>\\n <View\\n style={{\\n flexDirection: 'row',\\n alignItems: 'center',\\n backgroundColor: 'lightgray',\\n }}\\n >\\n <Text>To: </Text>\\n <TagInput\\n value={this.state.tags}\\n onChange={this.onChangeTags}\\n labelExtractor={this.labelExtractor}\\n text={this.state.text}\\n onChangeText={this.onChangeText}\\n tagColor=\\\"blue\\\"\\n tagTextColor=\\\"white\\\"\\n inputProps={inputProps}\\n maxHeight={75}\\n />\\n </View>\\n\\n <Text style={{ marginVertical: 10 }}>Horizontal Scroll</Text>\\n <View\\n style={{\\n marginBottom: 10,\\n flexDirection: 'row',\\n alignItems: 'center',\\n backgroundColor: 'lightgray',\\n }}\\n >\\n <Text>To: </Text>\\n <TagInput\\n ref={horizontalTagInput => {\\n this._horizontalTagInput = horizontalTagInput\\n }}\\n value={this.state.horizontalTags}\\n onChange={this.onChangeHorizontalTags}\\n labelExtractor={this.labelExtractor}\\n text={this.state.horizontalText}\\n onChangeText={this.onChangeHorizontalText}\\n tagColor=\\\"blue\\\"\\n tagTextColor=\\\"white\\\"\\n inputProps={horizontalInputProps}\\n scrollViewProps={horizontalScrollViewProps}\\n />\\n </View>\\n </View>\\n )\\n }\\n}\\n\"}],\"isFile\":false,\"size\":3201}","gallery":[{"src":"https://raw.githubusercontent.com/jwohlfert23/react-native-tag-input/master/example.png","width":748,"height":298}]}}}