/
App.tsx
79 lines (69 loc) · 2.01 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import SegmentedControl from "@react-native-segmented-control/segmented-control";
import { StyleSheet } from "react-native";
import MeasuresList from "./components/MeasuresList";
import Clinicals from "./components/Clinicals";
import * as Measures from "./components/Measures";
import * as _ from "lodash";
const Stack = createStackNavigator();
type SegmentValues = "measures" | "clinicals";
interface IHeaderTitleProps {
onChange(value: SegmentValues): void;
}
const HeaderTitle = ({ onChange }: IHeaderTitleProps) => {
return (
<SegmentedControl
style={styles.segmentContainer}
values={["Measures", "Clinicals"]}
selectedIndex={0}
onChange={(e) =>
onChange(
e.nativeEvent.selectedSegmentIndex === 0 ? "measures" : "clinicals"
)
}
/>
);
};
const styles = StyleSheet.create({
segmentContainer: {
width: 200,
},
});
export default function App() {
const [tab, setTab] = React.useState<SegmentValues>("measures");
const measureStacks = React.useMemo(() => {
const components: React.ReactNode[] = [];
for (const nav of Measures.navigation) {
for (const test of nav.data) {
if (test.component) {
const name = `Measure:${test.title}`;
components.push(
<Stack.Screen
key={name}
name={name}
component={test.component}
options={{
title: test.title,
}}
/>
);
}
}
}
return components;
}, []);
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={tab === "measures" ? MeasuresList : Clinicals}
options={{ headerTitle: () => <HeaderTitle onChange={setTab} /> }}
/>
{measureStacks}
</Stack.Navigator>
</NavigationContainer>
);
}