{"pageContext":{"isCreatedByStatefulCreatePages":false,"pkg":{"name":"react-native-vector-icons","codeHtml":null,"exampleFilesJSON":"{\"path\":\"\",\"name\":\"react-native-vector-icons\",\"children\":[{\"path\":\"IconList.js\",\"name\":\"IconList.js\",\"extension\":\".js\",\"size\":2960,\"isFile\":true,\"codeHtml\":\"import React, { PureComponent } from 'react'\\nimport {\\n DeviceEventEmitter,\\n FlatList,\\n Platform,\\n StyleSheet,\\n Text,\\n TextInput,\\n View,\\n} from './react-native'\\n\\nconst styles = StyleSheet.create({\\n container: {\\n flex: 1,\\n backgroundColor: 'white',\\n },\\n searchBar: {\\n marginTop: Platform.OS === 'android' ? 0 : 64,\\n padding: 3,\\n paddingLeft: 8,\\n flexDirection: 'row',\\n alignItems: 'center',\\n borderBottomWidth: StyleSheet.hairlineWidth,\\n borderColor: '#ccc',\\n },\\n searchBarInput: {\\n fontSize: 15,\\n flex: 1,\\n height: Platform.OS === 'android' ? 45 : 30,\\n },\\n list: {\\n flex: 1,\\n },\\n row: {\\n flexDirection: 'row',\\n justifyContent: 'center',\\n padding: 10,\\n overflow: 'hidden',\\n borderBottomWidth: StyleSheet.hairlineWidth,\\n borderColor: '#ccc',\\n },\\n icon: {\\n textAlign: 'center',\\n marginRight: 10,\\n width: 20,\\n },\\n text: {\\n flex: 1,\\n },\\n})\\n\\nconst getFilteredGlyphNames = (iconSet, query) =>\\n iconSet.glyphNames.filter(glyphNames =>\\n glyphNames.find(glyphName => glyphName.indexOf(query) !== -1),\\n )\\n\\nconst keyExtractor = item => item[0]\\n\\nexport default class IconList extends PureComponent {\\n state = {\\n filter: '',\\n }\\n\\n componentDidMount() {\\n if (Platform.OS === 'osx') {\\n this.searchListner = DeviceEventEmitter.addListener('onSearchIcons', e =>\\n this.setFilter(e.query),\\n )\\n }\\n }\\n\\n componentWillUnmount() {\\n if (this.searchListner) {\\n this.searchListner.remove()\\n }\\n }\\n\\n setFilter(filter) {\\n this.setState({\\n filter: filter.toLowerCase(),\\n })\\n }\\n\\n handleSearchChange = event => {\\n const filter = event.nativeEvent.text.toLowerCase()\\n this.setFilter(filter)\\n }\\n\\n renderListItem = ({ item }) => {\\n const Icon = this.props.iconSet.component\\n return (\\n <View style={styles.row}>\\n <Icon name={item[0]} size={20} style={styles.icon} />\\n <Text style={styles.text}>{item.join(', ')}</Text>\\n </View>\\n )\\n }\\n\\n render() {\\n const glyphNames = getFilteredGlyphNames(\\n this.props.iconSet,\\n this.state.filter,\\n )\\n\\n return (\\n <View style={styles.container}>\\n {Platform.OS !== 'osx' && (\\n <View style={styles.searchBar}>\\n <TextInput\\n autoCapitalize=\\\"none\\\"\\n autoCorrect={false}\\n autoFocus\\n onChange={this.handleSearchChange}\\n placeholder=\\\"Search an icon...\\\"\\n style={styles.searchBarInput}\\n />\\n </View>\\n )}\\n <FlatList\\n data={glyphNames}\\n style={styles.list}\\n renderItem={this.renderListItem}\\n automaticallyAdjustContentInsets={false}\\n keyboardDismissMode=\\\"on-drag\\\"\\n keyboardShouldPersistTaps=\\\"always\\\"\\n showsVerticalScrollIndicator={false}\\n initialNumToRender={20}\\n keyExtractor={keyExtractor}\\n />\\n </View>\\n )\\n }\\n}\\n\"},{\"path\":\"IconSetList.js\",\"name\":\"IconSetList.js\",\"extension\":\".js\",\"size\":4270,\"isFile\":true,\"codeHtml\":\"import React, { PureComponent } from 'react'\\nimport FontAwesome from 'react-native-vector-icons/FontAwesome'\\nimport {\\n Alert,\\n Keyboard,\\n Platform,\\n SectionList,\\n StyleSheet,\\n Text,\\n TouchableHighlight,\\n View,\\n} from './react-native'\\n\\nimport IconList from './IconList'\\nimport ICON_SETS from './icon-sets'\\n\\nconst BUTTONS = [\\n {\\n text: 'Login with Facebook',\\n name: 'facebook',\\n backgroundColor: '#3b5998',\\n },\\n {\\n text: 'Follow me on Twitter',\\n name: 'twitter',\\n backgroundColor: '#55acee',\\n },\\n {\\n text: 'Fork on GitHub',\\n name: 'code-fork',\\n backgroundColor: '#ccc',\\n color: '#000',\\n },\\n]\\n\\nconst STYLING = [\\n { name: 'github', size: 40, color: '#333' },\\n {\\n name: 'heart',\\n size: 30,\\n color: 'white',\\n containerStyle: {\\n backgroundColor: '#e0284f',\\n borderRadius: 23,\\n paddingHorizontal: 8,\\n paddingTop: 9,\\n paddingBottom: 7,\\n },\\n },\\n {\\n name: 'star',\\n size: 20,\\n color: '#FF0000',\\n containerStyle: {\\n borderRadius: 20,\\n padding: 7,\\n borderWidth: 3,\\n backgroundColor: '#FFDD00',\\n borderColor: '#165E00',\\n },\\n },\\n {\\n name: 'font',\\n size: 20,\\n color: 'white',\\n containerStyle: {\\n borderRadius: 5,\\n padding: 5,\\n backgroundColor: '#47678e',\\n },\\n },\\n]\\n\\nconst INLINE = [\\n {\\n name: 'inline',\\n children: (\\n <Text>\\n This text has <FontAwesome name=\\\"rocket\\\" /> inline{' '}\\n <FontAwesome name=\\\"hand-peace-o\\\"> icons!</FontAwesome>\\n </Text>\\n ),\\n },\\n]\\n\\nconst styles = StyleSheet.create({\\n sectionHeader: {\\n paddingVertical: 5,\\n paddingHorizontal: 10,\\n backgroundColor: '#eee',\\n },\\n sectionHeaderTitle: {\\n fontWeight: '500',\\n fontSize: 11,\\n },\\n row: {\\n flexDirection: 'row',\\n justifyContent: 'center',\\n padding: 10,\\n },\\n separator: {\\n height: StyleSheet.hairlineWidth,\\n backgroundColor: '#ccc',\\n },\\n text: {\\n flex: 6,\\n },\\n glyphCount: {\\n flex: 1,\\n fontSize: 11,\\n fontWeight: '500',\\n textAlign: 'right',\\n },\\n})\\n\\nconst keyExtractor = item => item.name\\n\\nconst ItemSeparator = () => <View style={styles.separator} />\\n\\nconst renderSectionHeader = ({ section }) => (\\n <View style={styles.sectionHeader}>\\n <Text style={styles.sectionHeaderTitle}>{section.title}</Text>\\n </View>\\n)\\n\\nconst renderButton = ({ item }) => (\\n <View style={styles.row}>\\n <FontAwesome.Button\\n name={item.name}\\n backgroundColor={item.backgroundColor}\\n color={item.color}\\n onPress={() => Alert.alert(`You pressed \\\"${item.text}\\\"`)}\\n >\\n {item.text}\\n </FontAwesome.Button>\\n </View>\\n)\\n\\nconst renderInline = ({ item }) => (\\n <View style={styles.row}>{item.children}</View>\\n)\\n\\nconst renderStyling = ({ item }) => (\\n <View style={styles.row}>\\n <View style={item.containerStyle}>\\n <FontAwesome {...item} />\\n </View>\\n </View>\\n)\\n\\nexport default class IconSetsList extends PureComponent {\\n state = {\\n sections: [\\n { title: 'ICON SETS', data: ICON_SETS },\\n { title: 'BUTTONS', data: BUTTONS, renderItem: renderButton },\\n { title: 'INLINE', data: INLINE, renderItem: renderInline },\\n { title: 'STYLING', data: STYLING, renderItem: renderStyling },\\n ],\\n }\\n\\n navigateToIconSet(iconSet) {\\n if (Platform.OS === 'ios') {\\n this.props.navigator.push({\\n title: iconSet.name,\\n component: IconList,\\n passProps: { iconSet },\\n })\\n } else {\\n Keyboard.dismiss()\\n this.props.navigator.push({\\n title: iconSet.name,\\n name: 'iconSet',\\n iconSet,\\n })\\n }\\n }\\n\\n renderIconSet = ({ item }) => (\\n <TouchableHighlight\\n onPress={() => this.navigateToIconSet(item)}\\n underlayColor=\\\"#eee\\\"\\n >\\n <View style={styles.row}>\\n <Text style={styles.text}>{item.name}</Text>\\n <Text style={styles.glyphCount}>{item.glyphNames.length}</Text>\\n </View>\\n </TouchableHighlight>\\n )\\n\\n render() {\\n return (\\n <SectionList\\n sections={this.state.sections}\\n renderSectionHeader={renderSectionHeader}\\n renderItem={this.renderIconSet}\\n ItemSeparatorComponent={ItemSeparator}\\n initialNumToRender={15}\\n keyExtractor={keyExtractor}\\n />\\n )\\n }\\n}\\n\"},{\"path\":\"icon-sets.js\",\"name\":\"icon-sets.js\",\"extension\":\".js\",\"size\":2721,\"isFile\":true,\"codeHtml\":\"import {\\n pipe, toPairs, groupBy, map,\\n} from 'ramda'\\nimport AntD from 'react-native-vector-icons/AntDesign'\\nimport Entypo from 'react-native-vector-icons/Entypo'\\nimport EvilIcons from 'react-native-vector-icons/EvilIcons'\\nimport Feather from 'react-native-vector-icons/Feather'\\nimport FontAwesome from 'react-native-vector-icons/FontAwesome'\\nimport FontAwesome5 from 'react-native-vector-icons/FontAwesome5'\\nimport Foundation from 'react-native-vector-icons/Foundation'\\nimport Ionicons from 'react-native-vector-icons/Ionicons'\\nimport MaterialIcons from 'react-native-vector-icons/MaterialIcons'\\nimport MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'\\nimport Octicons from 'react-native-vector-icons/Octicons'\\nimport Zocial from 'react-native-vector-icons/Zocial'\\nimport AntDGlyphs from 'react-native-vector-icons/glyphmaps/AntDesign.json'\\nimport EntypoGlyphs from 'react-native-vector-icons/glyphmaps/Entypo.json'\\nimport EvilIconsGlyphs from 'react-native-vector-icons/glyphmaps/EvilIcons.json'\\nimport FeatherGlyphs from 'react-native-vector-icons/glyphmaps/Feather.json'\\nimport FontAwesomeGlyphs from 'react-native-vector-icons/glyphmaps/FontAwesome.json'\\nimport FontAwesome5Glyphs from 'react-native-vector-icons/glyphmaps/FontAwesome5Free.json'\\nimport FoundationGlyphs from 'react-native-vector-icons/glyphmaps/Foundation.json'\\nimport IoniconsGlyphs from 'react-native-vector-icons/glyphmaps/Ionicons.json'\\nimport MaterialIconsGlyphs from 'react-native-vector-icons/glyphmaps/MaterialIcons.json'\\nimport MaterialCommunityIconsGlyphs from 'react-native-vector-icons/glyphmaps/MaterialCommunityIcons.json'\\nimport OcticonsGlyphs from 'react-native-vector-icons/glyphmaps/Octicons.json'\\nimport ZocialGlyphs from 'react-native-vector-icons/glyphmaps/Zocial.json'\\n\\nconst GLYPH_MAPS = {\\n AntD: AntDGlyphs,\\n Entypo: EntypoGlyphs,\\n EvilIcons: EvilIconsGlyphs,\\n Feather: FeatherGlyphs,\\n FontAwesome: FontAwesomeGlyphs,\\n FontAwesome5: FontAwesome5Glyphs,\\n Foundation: FoundationGlyphs,\\n Ionicons: IoniconsGlyphs,\\n MaterialIcons: MaterialIconsGlyphs,\\n MaterialCommunityIcons: MaterialCommunityIconsGlyphs,\\n Octicons: OcticonsGlyphs,\\n Zocial: ZocialGlyphs,\\n}\\n\\nconst ICON_SETS = {\\n AntD,\\n Entypo,\\n EvilIcons,\\n Feather,\\n FontAwesome,\\n FontAwesome5,\\n Foundation,\\n Ionicons,\\n MaterialIcons,\\n MaterialCommunityIcons,\\n Octicons,\\n Zocial,\\n}\\n\\nconst groupGlyphNames = glyphMap =>\\n Object.values(groupBy(name => glyphMap[name])(Object.keys(glyphMap)))\\n\\nconst transformIconSets = pipe(\\n toPairs,\\n map(([name, component]) => ({\\n name,\\n component,\\n glyphNames: groupGlyphNames(GLYPH_MAPS[name]),\\n })),\\n)\\n\\nexport default transformIconSets(ICON_SETS)\\n\"},{\"path\":\"react-native.android.js\",\"name\":\"react-native.android.js\",\"extension\":\".js\",\"size\":30,\"isFile\":true,\"codeHtml\":\"export * from 'react-native'\\n\"}],\"isFile\":false,\"size\":9981}","gallery":[{"src":"https://cloud.githubusercontent.com/assets/378279/8903470/a9fe6b46-3458-11e5-901f-98b7b676d0d3.png","width":374,"height":666},{"src":"https://cloud.githubusercontent.com/assets/378279/7667568/2e9021b2-fc0d-11e4-8e68-cf91c329a6f4.png","width":179,"height":108},{"src":"https://cloud.githubusercontent.com/assets/378279/7667569/3010dd7e-fc0d-11e4-9696-cb721fe8e98d.png","width":37,"height":37},{"src":"https://cloud.githubusercontent.com/assets/378279/7667570/33817554-fc0d-11e4-9ad7-4eb60139cfb7.png","width":32,"height":32}]}}}