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