1import React from 'react';
2import { StyleSheet, ScrollView, Text, View } from 'react-native';
3import { NavigationScreenProps, NavigationScreenConfig } from 'react-navigation';
4
5import examples from './examples';
6
7export default class SVGExampleScreen extends React.Component<NavigationScreenProps> {
8  static navigationOptions: NavigationScreenConfig<{}> = ({ navigation }) => {
9    return {
10      title: navigation.getParam('title', 'An SVG Example'),
11    };
12  }
13
14  renderSample = (Sample: React.ComponentType & { title: string }, index: number) => (
15    <View style={styles.example} key={`sample-${index}`}>
16      <Text style={styles.sampleTitle}>{Sample.title}</Text>
17      <Sample />
18    </View>
19  )
20
21  renderNoExample = () => <Text>No example found.</Text>;
22
23  renderContent = () => {
24    const example = examples[this.props.navigation.getParam('key')];
25    if (!example) {
26      return this.renderNoExample();
27    }
28    const { samples } = example;
29    return samples.map(this.renderSample);
30  }
31
32  render() {
33    return (
34      <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
35        {this.renderContent()}
36      </ScrollView>
37    );
38  }
39}
40
41const styles = StyleSheet.create({
42  container: {
43    ...StyleSheet.absoluteFillObject,
44  },
45  contentContainer: {
46    alignItems: 'center',
47    justifyContent: 'center',
48  },
49  example: {
50    paddingVertical: 25,
51    alignSelf: 'stretch',
52    alignItems: 'center',
53    borderBottomWidth: StyleSheet.hairlineWidth,
54    borderBottomColor: '#ccc',
55  },
56  sampleTitle: {
57    marginHorizontal: 15,
58    fontSize: 16,
59    color: '#666',
60  },
61});
62