Skip to content

Commit 23a9a61

Browse files
mbfloresmbflores
committed
Flavor Update: React
ActionBar ActivityIndicator Button DatePicker Dialogs HtmlView Image Label ListPicker Placeholder Progress ScrollView SearchBar SegmentedBar Slider Switch TabView TextField TextView TimePicker WebView
1 parent 326f5f1 commit 23a9a61

26 files changed

+873
-455
lines changed

‎examples/react/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
},
1212
"devDependencies": {
1313
"@nativescript/android": "8.8.2",
14+
"@nativescript/ios": "8.8.1",
1415
"@nativescript/types": "~8.8.0",
1516
"@nativescript/webpack": "~5.0.0",
1617
"@types/react": "npm:types-react-without-jsx-intrinsics@^18.0.17",

‎examples/react/src/components/MainStack.tsx‎

Lines changed: 126 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,29 @@ import { BaseNavigationContainer } from '@react-navigation/core';
22
import * as React from "react";
33
import { stackNavigatorFactory } from "react-nativescript-navigation";
44

5-
import { ScreenTwo } from "./ScreenTwo";
65
import { HomePage } from './home'
76
import { ActionBar } from './ui/actionbar'
7+
import { ActivityIndicator } from './ui/activityindicator'
8+
import { Button } from './ui/button'
9+
import { DatePicker } from './ui/datepicker'
10+
import { Dialogs } from './ui/dialogs'
11+
import { HtmlView } from './ui/htmlview'
12+
import { Image } from './ui/image'
13+
import { Label } from './ui/label'
14+
import { ListPicker } from './ui/listpicker'
15+
import { ListView } from './ui/listview'
16+
import { Placeholder } from './ui/placeholder'
17+
import { Progress } from './ui/progress'
18+
import { ScrollView } from './ui/scrollview'
19+
import { SearchBar } from './ui/searchbar'
20+
import { SegmentedBar } from './ui/segmentedbar'
21+
import { Slider } from './ui/slider'
22+
import { Switch } from './ui/switch'
23+
import { TabView } from './ui/tabview'
24+
import { TextField } from './ui/textfield'
25+
import { TextView } from './ui/textview'
26+
import { TimePicker } from './ui/timepicker'
27+
import { WebView } from './ui/webview'
828

929
const StackNavigator = stackNavigatorFactory();
1030

@@ -32,6 +52,111 @@ export const MainStack = () => (
3252
name="ActionBar"
3353
component={ActionBar}
3454
/>
55+
56+
<StackNavigator.Screen
57+
name="ActivityIndicator"
58+
component={ActivityIndicator}
59+
/>
60+
61+
<StackNavigator.Screen
62+
name="Button"
63+
component={Button}
64+
/>
65+
66+
<StackNavigator.Screen
67+
name="DatePicker"
68+
component={DatePicker}
69+
/>
70+
71+
<StackNavigator.Screen
72+
name="Dialogs"
73+
component={Dialogs}
74+
/>
75+
76+
<StackNavigator.Screen
77+
name="HtmlView"
78+
component={HtmlView}
79+
/>
80+
81+
<StackNavigator.Screen
82+
name="Image"
83+
component={Image}
84+
/>
85+
86+
<StackNavigator.Screen
87+
name="Label"
88+
component={Label}
89+
/>
90+
91+
<StackNavigator.Screen
92+
name="ListPicker"
93+
component={ListPicker}
94+
/>
95+
96+
<StackNavigator.Screen
97+
name="ListView"
98+
component={ListView}
99+
/>
100+
101+
<StackNavigator.Screen
102+
name="Placeholder"
103+
component={Placeholder}
104+
/>
105+
106+
<StackNavigator.Screen
107+
name="Progress"
108+
component={Progress}
109+
/>
110+
111+
<StackNavigator.Screen
112+
name="ScrollView"
113+
component={ScrollView}
114+
/>
115+
116+
<StackNavigator.Screen
117+
name="SearchBar"
118+
component={SearchBar}
119+
/>
120+
121+
<StackNavigator.Screen
122+
name="SegmentedBar"
123+
component={SegmentedBar}
124+
/>
125+
126+
<StackNavigator.Screen
127+
name="Slider"
128+
component={Slider}
129+
/>
130+
131+
<StackNavigator.Screen
132+
name="Switch"
133+
component={Switch}
134+
/>
135+
136+
<StackNavigator.Screen
137+
name="TabView"
138+
component={TabView}
139+
/>
140+
141+
<StackNavigator.Screen
142+
name="TextField"
143+
component={TextField}
144+
/>
145+
146+
<StackNavigator.Screen
147+
name="TextView"
148+
component={TextView}
149+
/>
150+
151+
<StackNavigator.Screen
152+
name="TimePicker"
153+
component={TimePicker}
154+
/>
155+
156+
<StackNavigator.Screen
157+
name="WebView"
158+
component={WebView}
159+
/>
35160
</StackNavigator.Navigator>
36161
</BaseNavigationContainer>
37162
);

‎examples/react/src/components/home.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ export function HomePage({ navigation }: HomeProps) {
2626
"Placeholder",
2727
"Progress",
2828
"ScrollView",
29-
"Searchbar",
30-
"Segmentedbar",
29+
"SearchBar",
30+
"SegmentedBar",
3131
"Slider",
3232
"Switch",
3333
"TabView",

‎examples/react/src/components/ui/actionbar.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { Dialogs } from '@nativescript/core';
1+
import { Dialogs, Frame } from '@nativescript/core'
22
import { RouteProp } from '@react-navigation/core';
33
import * as React from "react";
44
import { StyleSheet } from "react-nativescript";
55
import { FrameNavigationProp } from "react-nativescript-navigation";
6+
import { MainStackParamList } from '../../NavigationParamList'
67

7-
import { MainStackParamList } from "~/NavigationParamList";
88

99
type HomeProps = {
1010
route: RouteProp<MainStackParamList, "ActionBar">,
@@ -17,12 +17,15 @@ export function ActionBar({ navigation }: HomeProps) {
1717
<frame>
1818
<page style={styles.container}>
1919
{/*region example*/}
20-
<actionBar title="ActionBar">
20+
<actionBar title="ActionBar"
21+
onTap={() => Frame.goBack()}>
2122
</actionBar>
2223
{/*region example*/}
2324

2425
<stackLayout verticalAlignment={'middle'} horizontalAlignment={'center'} >
25-
<label>Content Here</label>
26+
{/*#region example*/}
27+
<activityIndicator busy="true" />
28+
{/*endregion example*/}
2629
</stackLayout>
2730
</page>
2831
</frame>

‎examples/react/src/components/ui/activityindicator.tsx‎

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,54 @@
1-
import { Dialogs } from '@nativescript/core';
1+
import { Dialogs, Frame } from '@nativescript/core'
22
import { RouteProp } from '@react-navigation/core';
33
import * as React from "react";
44
import { StyleSheet } from "react-nativescript";
55
import { FrameNavigationProp } from "react-nativescript-navigation";
66

7-
import { MainStackParamList } from "~/NavigationParamList";
7+
import { MainStackParamList } from '../../NavigationParamList';
88

99
type HomeProps = {
1010
route: RouteProp<MainStackParamList, "ActivityIndicator">,
1111
navigation: FrameNavigationProp<MainStackParamList, "ActivityIndicator">,
1212
};
1313

1414
export function ActivityIndicator({ navigation }: HomeProps) {
15-
return (
16-
<>
17-
<frame>
18-
<page style={styles.container}>
19-
{/*region example*/}
20-
<actionBar title="ActionBar">
21-
</actionBar>
22-
{/*region example*/}
15+
return (
16+
<>
17+
<frame>
18+
<page style={styles.container}>
19+
<actionBar title="Activity Indicator" onTap={() => Frame.goBack()}></actionBar>
2320

24-
<stackLayout verticalAlignment={'middle'} horizontalAlignment={'center'} >
25-
<label>Content Here</label>
26-
</stackLayout>
27-
</page>
28-
</frame>
29-
</>
30-
);
21+
<stackLayout
22+
verticalAlignment={'middle'}
23+
horizontalAlignment={'center'}
24+
>
25+
{/*#region example*/}
26+
<activityIndicator busy="true" />
27+
28+
{/*endregion example*/}
29+
30+
</stackLayout>
31+
</page>
32+
</frame>
33+
</>
34+
)
3135
}
3236

3337
const styles = StyleSheet.create({
3438
container: {
35-
height: "100%",
36-
flexDirection: "column",
37-
justifyContent: "center",
39+
height: '100%',
40+
flexDirection
41+
:
42+
'column',
43+
justifyContent: 'center',
3844
},
3945
text: {
40-
textAlignment: "center",
46+
textAlignment: 'center',
4147
fontSize: 24,
42-
color: "black",
48+
color: 'black',
4349
},
4450
button: {
4551
fontSize: 24,
46-
color: "#2e6ddf",
52+
color: '#2e6ddf',
4753
},
48-
});
54+
})

‎examples/react/src/components/ui/button.tsx‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { Dialogs } from '@nativescript/core';
1+
import { Dialogs, Frame } from '@nativescript/core'
22
import { RouteProp } from '@react-navigation/core';
33
import * as React from "react";
44
import { StyleSheet } from "react-nativescript";
55
import { FrameNavigationProp } from "react-nativescript-navigation";
66

7-
import { MainStackParamList } from "~/NavigationParamList";
7+
import { MainStackParamList } from '../../NavigationParamList';
88

99
type HomeProps = {
1010
route: RouteProp<MainStackParamList, "Button">,
@@ -16,13 +16,20 @@ export function Button({ navigation }: HomeProps) {
1616
<>
1717
<frame>
1818
<page style={styles.container}>
19-
{/*region example*/}
20-
<actionBar title="ActionBar">
21-
</actionBar>
22-
{/*region example*/}
19+
<actionBar title="Button" onTap={() => Frame.goBack()}></actionBar>
2320

24-
<stackLayout verticalAlignment={'middle'} horizontalAlignment={'center'} >
25-
<label>Content Here</label>
21+
<stackLayout
22+
verticalAlignment={'middle'}
23+
horizontalAlignment={'center'}
24+
>
25+
{/*#region example*/}
26+
<button
27+
onTap={() => {
28+
alert("Button Clicked")
29+
}}
30+
>Click Me</button>
31+
32+
{/*endregion example*/}
2633
</stackLayout>
2734
</page>
2835
</frame>

‎examples/react/src/components/ui/datepicker.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,31 @@
1-
import { Dialogs } from '@nativescript/core';
1+
import { Dialogs, Frame } from '@nativescript/core'
22
import { RouteProp } from '@react-navigation/core';
33
import * as React from "react";
44
import { StyleSheet } from "react-nativescript";
55
import { FrameNavigationProp } from "react-nativescript-navigation";
66

7-
import { MainStackParamList } from "~/NavigationParamList";
7+
import { MainStackParamList } from '../../NavigationParamList'
88

99
type HomeProps = {
1010
route: RouteProp<MainStackParamList, "DatePicker">,
1111
navigation: FrameNavigationProp<MainStackParamList, "DatePicker">,
1212
};
1313

1414
export function DatePicker({ navigation }: HomeProps) {
15+
const currentDate = new Date();
1516
return (
1617
<>
1718
<frame>
1819
<page style={styles.container}>
19-
{/*region example*/}
20-
<actionBar title="ActionBar">
21-
</actionBar>
22-
{/*region example*/}
20+
<actionBar title="DatePicker" onTap={() => Frame.goBack()}></actionBar>
2321

24-
<stackLayout verticalAlignment={'middle'} horizontalAlignment={'center'} >
25-
<label>Content Here</label>
22+
<stackLayout
23+
verticalAlignment={'middle'}
24+
horizontalAlignment={'center'}
25+
>
26+
{/*#region example*/}
27+
<datePicker date={currentDate}></datePicker>
28+
{/*endregion example*/}
2629
</stackLayout>
2730
</page>
2831
</frame>

0 commit comments

Comments
 (0)