Working demo app

Author: shirakaba

demo-react/src/components/AppContainer.tsx

@@ -1,12 +1,43 @@
 import * as React from 'react';
+import { ItemEventData } from '@nativescript/core';
 import { ListView } from 'react-nativescript';
+import { Tabs } from './Tabs';
+import { BottomNavigation } from './BottomNavigation';
+
+interface MyItem {
+    text: string;
+    component: () => JSX.Element;
+}
+
+const items: MyItem[] = [
+    {
+        text: 'Tabs',
+        component: Tabs
+    },
+    {
+        text: 'BottomNavigation',
+        component: BottomNavigation
+    }
+];
+
+const cellFactory = (item: MyItem) => <label text={item.text} style={{ height: 40, paddingLeft: 16 }} />;
 
 export function AppContainer() {
+    const [ExampleComponent, setExampleComponent] = React.useState<() => JSX.Element>(null);
+    const onItemTap = (args: ItemEventData) => {
+        setExampleComponent(() => items[args.index].component);
+    };
+
     return (
         <frame>
             <page>
-                <label>Hello</label>
+                <ListView items={items} cellFactory={cellFactory} onItemTap={onItemTap} />
             </page>
+            {ExampleComponent ? (
+                <page onNavigatedFrom={() => setExampleComponent(null)}>
+                    <ExampleComponent />
+                </page>
+            ) : null}
         </frame>
     );
 }

demo-react/src/components/BottomNavigationScreen.tsx renamed to demo-react/src/components/BottomNavigation.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export function ExampleBottomNavigation() {
+export function BottomNavigation() {
     const [selectedIndex, setSelectedIndex] = React.useState(0);
 
     return (

demo-react/src/components/TabsScreen.tsx renamed to demo-react/src/components/Tabs.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export function ExampleTabs() {
+export function Tabs() {
     const [selectedIndex, setSelectedIndex] = React.useState(0);
 
     return (