1import Ionicons from '@expo/vector-icons/build/Ionicons';
2import { StackNavigationProp } from '@react-navigation/stack';
3import React from 'react';
4import {
5  FlatList,
6  ListRenderItem,
7  PixelRatio,
8  StyleSheet,
9  Text,
10  TouchableHighlight,
11  View,
12} from 'react-native';
13
14import examples from './examples';
15
16type StackParams = {
17  SVGExample: { title: string; key: string };
18};
19
20export default class SVGScreen extends React.Component<{
21  navigation: StackNavigationProp<StackParams>;
22}> {
23  static navigationOptions = {
24    title: '<Svg />',
25  };
26
27  renderItem: ListRenderItem<string> = ({ item: exampleKey }) => (
28    <TouchableHighlight
29      underlayColor="#dddddd"
30      style={styles.rowTouchable}
31      onPress={() =>
32        this.props.navigation.navigate('SVGExample', { title: exampleKey, key: exampleKey })
33      }>
34      <View style={styles.row}>
35        <View style={styles.rowIcon}>{examples[exampleKey].icon}</View>
36        <Text style={styles.rowLabel}>{exampleKey}</Text>
37        <Text style={styles.rowDecorator}>
38          <Ionicons name="chevron-forward" size={18} color="#595959" />
39        </Text>
40      </View>
41    </TouchableHighlight>
42  );
43
44  keyExtractor = (item: string) => item;
45
46  render() {
47    return (
48      <FlatList<string>
49        style={styles.container}
50        data={Object.keys(examples)}
51        renderItem={this.renderItem}
52        keyExtractor={this.keyExtractor}
53      />
54    );
55  }
56}
57
58const styles = StyleSheet.create({
59  container: {
60    ...StyleSheet.absoluteFillObject,
61    backgroundColor: 'white',
62  },
63  row: {
64    flexDirection: 'row',
65    justifyContent: 'space-between',
66    alignItems: 'center',
67  },
68  rowDecorator: {
69    alignSelf: 'flex-end',
70    paddingRight: 4,
71  },
72  rowTouchable: {
73    paddingHorizontal: 10,
74    paddingVertical: 14,
75    borderBottomWidth: 1.0 / PixelRatio.get(),
76    borderBottomColor: '#dddddd',
77  },
78  rowLabel: {
79    flex: 1,
80    fontSize: 15,
81  },
82  rowIcon: {
83    marginRight: 10,
84    marginLeft: 6,
85  },
86});
87