Skip to content

Commit 4d46d76

Browse files
shirakabashirakaba
committed
Decouple demo from React NativeScript navigation
1 parent a73d36e commit 4d46d76

File tree

6 files changed

+62
-119
lines changed

6 files changed

+62
-119
lines changed

‎demo-react/package.json

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,25 @@
3838
"template"
3939
],
4040
"dependencies": {
41-
"@nativescript/core": "~8.0.0",
42-
"@react-navigation/core": "~5.13.2",
41+
"@nativescript/core": "8.0.0-alpha.8",
42+
"@nativescript-community/ui-material-activityindicator": "file:../packages/activityindicator",
43+
"@nativescript-community/ui-material-bottomsheet": "file:../packages/bottomsheet",
44+
"@nativescript-community/ui-material-bottomnavigationbar": "file:../packages/bottomnavigationbar",
45+
"@nativescript-community/ui-material-button": "file:../packages/button",
46+
"@nativescript-community/ui-material-cardview": "file:../packages/cardview",
47+
"@nativescript-community/ui-material-core": "file:../packages/core",
48+
"@nativescript-community/ui-material-dialogs": "file:../packages/dialogs",
49+
"@nativescript-community/ui-material-floatingactionbutton": "file:../packages/floatingactionbutton",
50+
"@nativescript-community/ui-material-progress": "file:../packages/progress",
51+
"@nativescript-community/ui-material-ripple": "file:../packages/ripple",
52+
"@nativescript-community/ui-material-slider": "file:../packages/slider",
53+
"@nativescript-community/ui-material-snackbar": "file:../packages/snackbar",
54+
"@nativescript-community/ui-material-textfield": "file:../packages/textfield",
55+
"@nativescript-community/ui-material-textview": "file:../packages/textview",
56+
"@nativescript/theme": "3.0.0",
57+
"nativescript-ui-listview": "9.1.0",
4358
"react": "~16.13.1",
44-
"react-nativescript": "~2.2.0",
45-
"react-nativescript-navigation": "~2.0.1",
59+
"react-nativescript": "^3.0.0-beta.1",
4660
"react-refresh": "~0.8.3"
4761
},
4862
"devDependencies": {

‎demo-react/src/app.ts

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
1-
import * as React from 'react'
1+
import * as React from 'react';
22

33
/* Controls react-nativescript log verbosity. true: all logs; false: only error logs. */
4-
Object.defineProperty(global, '__DEV__', { value: false })
4+
Object.defineProperty(global, '__DEV__', { value: false });
55

66
/*
77
In NativeScript, the app.ts file is the entry point to your application.
88
You can use this file to perform app-level initialization, but the primary
99
purpose of the file is to pass control to the app’s first module.
1010
*/
1111

12-
import * as ReactNativeScript from 'react-nativescript'
13-
import { mainStackNavigator as AppContainer } from './components/Navigator'
12+
import * as ReactNativeScript from 'react-nativescript';
13+
import { mainStackNavigator as AppContainer } from './components/Navigator';
14+
import { registerTabs } from '@nativescript-community/ui-material-tabs/react';
1415

15-
ReactNativeScript.start(React.createElement(AppContainer, {}, null))
16+
registerTabs();
17+
ReactNativeScript.start(React.createElement(AppContainer, {}, null));
1618

1719
/*
1820
Do not place any code after the application has been started as it will not

‎demo-react/src/components/HomeScreen.tsx

Lines changed: 37 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,42 @@
1-
import * as React from "react";
2-
import { RouteProp } from '@react-navigation/core';
3-
import { Dialogs } from '@nativescript/core';
4-
import { FrameNavigationProp } from "react-nativescript-navigation";
5-
import { StyleSheet } from "react-nativescript";
6-
import { MainStackParamList } from "./NavigationParamList";
1+
import * as React from 'react';
2+
import { StyleSheet } from 'react-nativescript';
73

8-
type HomeScreenProps = {
9-
route: RouteProp<MainStackParamList, "Home">,
10-
navigation: FrameNavigationProp<MainStackParamList, "Home">,
11-
}
12-
13-
export function HomeScreen({ navigation }: HomeScreenProps) {
4+
export function ExampleTabs(){
145
return (
15-
<flexboxLayout style={styles.container}>
16-
<label
17-
className="fas"
18-
style={styles.text}
19-
>
20-
&#xf135; Hello World!
21-
</label>
22-
<button
23-
style={styles.button}
24-
onTap={() => Dialogs.alert("Tapped!")}
25-
>
26-
Tap me for an alert
27-
</button>
28-
<button
29-
style={styles.button}
30-
onTap={() => navigation.navigate('Secondary')}
31-
>
32-
Go to next screen
33-
</button>
34-
</flexboxLayout>
6+
<tabs selectedIndex={1}>
7+
{/* The bottomTab UI is created via tabStrip (the container) and tabStripItem (for each tab) */}
8+
<tabStrip>
9+
<tabStripItem>
10+
<label>Home</label>
11+
<image src="font://&#xf015;" className="fas"/>
12+
</tabStripItem>
13+
<tabStripItem className="special">
14+
<label>Account</label>
15+
<image src="font://&#xf007;" className="fas"/>
16+
</tabStripItem>
17+
<tabStripItem className="special">
18+
<label>Search</label>
19+
<image src="font://&#xf00e;" className="fas"/>
20+
</tabStripItem>
21+
</tabStrip>
22+
23+
{/* The number of tabContentItem components should corespond to the number of TabStripItem components */}
24+
<tabContentItem>
25+
<gridLayout>
26+
<label className="h2 text-center">Home Page</label>
27+
</gridLayout>
28+
</tabContentItem>
29+
<tabContentItem>
30+
<gridLayout>
31+
<label className="h2 text-center">Account Page</label>
32+
</gridLayout>
33+
</tabContentItem>
34+
<tabContentItem>
35+
<gridLayout>
36+
<label className="h2 text-center">Search Page</label>
37+
</gridLayout>
38+
</tabContentItem>
39+
</tabs>
3540
);
3641
}
3742

‎demo-react/src/components/NavigationParamList.ts

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎demo-react/src/components/Navigator.tsx

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎demo-react/src/components/SecondaryScreen.tsx

Lines changed: 0 additions & 44 deletions
This file was deleted.

0 commit comments

Comments
 (0)