Skip to content

Commit a81f198

Browse files
jonthyselljonthysell
committed
try to fix examplenuget yarn setup
1 parent 52ea29d commit a81f198

File tree

9 files changed

+232
-7362
lines changed

9 files changed

+232
-7362
lines changed

‎example/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"prettier": "2.8.8",
3434
"react-test-renderer": "18.3.1",
3535
"typescript": "5.0.4",
36-
"metro-config": "^0.81.0"
36+
"metro-config": "^0.81.1"
3737
},
3838
"engines": {
3939
"node": ">=18"

‎example/windows/ExperimentalFeatures.props

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,6 @@
3333
-->
3434
<UseExperimentalNuget>false</UseExperimentalNuget>
3535

36-
<!-- Necessary as sometimes RNW 0.73 doesn't run with the old `npx react-natve codegen-windows` -->
37-
<CodegenCommand>npx @react-native-community/cli codegen-windows</CodegenCommand>
38-
3936
<ReactExperimentalFeaturesSet>true</ReactExperimentalFeaturesSet>
4037

4138
</PropertyGroup>

‎examplenuget/App.tsx

Lines changed: 165 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
* @flow strict-local
77
*/
88

9-
import React, {useRef} from 'react';
9+
import React from 'react';
1010
import type {PropsWithChildren} from 'react';
11+
import {useState} from 'react';
1112

1213
import {
13-
findNodeHandle,
1414
SafeAreaView,
1515
ScrollView,
1616
StatusBar,
@@ -20,19 +20,6 @@ import {
2020
View,
2121
} from 'react-native';
2222

23-
import {
24-
TextBox,
25-
MenuFlyout,
26-
MenuFlyoutItem,
27-
TextBlock,
28-
WinUI,
29-
MediaPlayerElement,
30-
Button,
31-
ContentDialogState,
32-
ContentDialog,
33-
ContentDialogButton,
34-
ContentDialogResult,
35-
} from 'react-native-xaml';
3623
import {
3724
Colors,
3825
DebugInstructions,
@@ -41,6 +28,39 @@ import {
4128
ReloadInstructions,
4229
} from 'react-native/Libraries/NewAppScreen';
4330

31+
import {
32+
HyperlinkButton,
33+
Border,
34+
TextBlock,
35+
StackPanel,
36+
Button,
37+
ComboBox,
38+
ComboBoxItem,
39+
NativeXamlControl,
40+
MenuFlyoutItem,
41+
TextBox,
42+
// BlankUserControl,
43+
ClickMode,
44+
MenuFlyout,
45+
RichTextBlock,
46+
Run,
47+
Italic,
48+
LineBreak,
49+
Hyperlink,
50+
NavigationView,
51+
NavigationViewItem,
52+
NavigationViewItemHeader,
53+
FontIcon,
54+
WinUI,
55+
HorizontalAlignment,
56+
Visibility,
57+
WinUIEnums,
58+
SplitView,
59+
SplitViewPriority,
60+
SplitViewPanePlacement,
61+
Grid,
62+
} from 'react-native-xaml';
63+
4464
type SectionProps = PropsWithChildren<{
4565
title: string;
4666
}>;
@@ -69,7 +89,7 @@ function Section({children, title}: SectionProps): JSX.Element {
6989
</Text>
7090
</View>
7191
);
72-
};
92+
}
7393

7494
function App(): JSX.Element {
7595
const isDarkMode = useColorScheme() === 'dark';
@@ -78,43 +98,153 @@ function App(): JSX.Element {
7898
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
7999
};
80100

81-
const menu = useRef<MenuFlyout>(null);
82-
const _tbRef = React.useRef<TextBlock>(null);
83-
const _mpRef = React.useRef<MediaPlayerElement>(null);
84-
const [x, setX] = React.useState("100");
85-
86-
const [showState, setShowState] = React.useState(ContentDialogState.Hidden);
87-
88-
101+
const [count, setCount] = useState(0);
102+
const [isOpen, setIsOpen] = useState(false);
103+
const [option, setOption] = useState('');
104+
const [visible, setVisible] = useState(Visibility.Visible);
89105
return (
90106
<SafeAreaView style={backgroundStyle}>
91107
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
92108
<ScrollView
93109
contentInsetAdjustmentBehavior="automatic"
94110
style={backgroundStyle}>
95-
<Header />
111+
<WinUI.ProgressRing isActive={true} width={40} />
112+
<WinUI.InfoBar
113+
message="the message"
114+
title="the title"
115+
isOpen={true}
116+
visibility={visible}
117+
onClosed={() => {
118+
setVisible(Visibility.Collapsed);
119+
}}
120+
severity={WinUIEnums.InfoBarSeverity.Success}
121+
horizontalAlignment={HorizontalAlignment.Center}
122+
/>
123+
<View>
124+
<Text style={{fontSize: 36, textAlign: 'center', padding: 42}}>
125+
Welcome to React Native XAML
126+
</Text>
127+
</View>
128+
<SplitView
129+
isPaneOpen={isOpen}
130+
onPaneClosed={() => {
131+
setIsOpen(false);
132+
}}
133+
width={800}
134+
height={300}
135+
paneBackground="red"
136+
panePlacement={SplitViewPanePlacement.Left}>
137+
<TextBlock
138+
text="this is in the pane"
139+
priority={SplitViewPriority.Pane}
140+
foreground="white"
141+
/>
142+
<Grid
143+
background="green"
144+
priority={SplitViewPriority.Content}
145+
gridLayout={{rows: [200], columns: [200]}}>
146+
<TextBlock text="this is in the content" foreground="white" />
147+
</Grid>
148+
</SplitView>
149+
96150
<View
97151
style={{
98152
backgroundColor: isDarkMode ? Colors.black : Colors.white,
99153
}}>
100-
<TextBox
101-
text={`x`}
102-
onBeforeTextChanging={e => {
103-
if (e.nativeEvent.args) {
104-
setX(e.nativeEvent.args.newText);
105-
}
154+
<Button
155+
foreground="#992222"
156+
onTapped={a => {
157+
setIsOpen(!isOpen);
106158
}}
159+
content='button'
107160
/>
161+
{/* <BlankUserControl onHappened={(arg) => alert(JSON.stringify(arg.nativeEvent)) } /> */}
162+
{/* <Button content={`Last selected option = ${option} ${count}`}
163+
onClick={(a) => {
164+
alert(JSON.stringify(a.nativeEvent));
165+
setCount(count + 1);
166+
setIsOpen(true); }}
167+
clickMode={ClickMode.Release}
168+
resources={{
169+
ButtonForeground: "#00fff1",
170+
ButtonForegroundPressed: "#2090ff",
171+
}}
172+
/> */}
173+
<TextBlock foreground="black" padding={20} margin={20}>
174+
<Run text="hello world!" />
175+
<LineBreak />
176+
<Italic>
177+
<Run text="hi there" />
178+
</Italic>
179+
<Hyperlink navigateUri="http://bing.com">
180+
<Run text="Go to bing" />
181+
</Hyperlink>
182+
</TextBlock>
183+
<NavigationView
184+
style={{height: 200, width: 120, margin: 20, padding: 40}}>
185+
<NavigationViewItem content='item 1'>
186+
<FontIcon glyph="&#xE790;" />
187+
</NavigationViewItem>
188+
<NavigationViewItem content='item 2' />
189+
</NavigationView>
190+
{/*<StackPanel orientation="horizontal">*/}
191+
{/* <HyperlinkButton content="Click me!" onClick={(args) => {*/}
192+
{/* alert(`clicked! Native event args: ${JSON.stringify(args.nativeEvent)}`);*/}
193+
{/* }} />*/}
194+
{/* <Border verticalAlignment="center" background="paleturquoise" >*/}
195+
{/* <TextBlock text="this is a text block" foreground='red' textAlignment="center" />*/}
196+
{/* </Border>*/}
197+
{/* <TextBlock text="this is another text block" foreground='green' textAlignment="center" />*/}
198+
{/* <Button content="this is a button" onClick={() => { alert("you clicked the button!"); }} />*/}
199+
{/*</StackPanel>*/}
200+
<ComboBox
201+
text="this is a combobox"
202+
description={{string: 'best cats'}}
203+
onSelectionChanged={args => {
204+
alert(
205+
`sel changed! Native event args: ${JSON.stringify(
206+
args.nativeEvent,
207+
)}`,
208+
);
209+
}}>
210+
<ComboBoxItem content='garfield' foreground="black" />
211+
<ComboBoxItem content='snoopy' foreground="black" />
212+
</ComboBox>
213+
{/* <TextBox text="this is a textbox with a menuFlyout" foreground="red">
214+
<MenuFlyout isOpen={isOpen} onClosed={() => {
215+
setIsOpen(false);
216+
}} >
217+
<MenuFlyoutItem text="option 1" onClick={(x) => { alert(JSON.stringify(x.nativeEvent)); setOption("option 1"); }} />
218+
<MenuFlyoutItem text="option 2" onClick={() => { alert("clicked 2"); setOption("option 2"); }}/>
219+
</MenuFlyout>
220+
</TextBox> */}
108221

109-
<WinUI.ColorPicker onColorChanged={(e) => {
110-
console.log(e.nativeEvent);
111-
}} />
222+
{/*<TextBox text="this is a textbox with a flyout" */}
223+
{/* foreground="red" >*/}
224+
{/* <NativeXamlControl type="flyout" >*/}
225+
{/* <Button content="click me" />*/}
226+
{/* </NativeXamlControl>*/}
227+
{/*</TextBox>*/}
112228

229+
<Section title="Step One">
230+
Edit <Text style={styles.highlight}>App.js</Text> to change this
231+
screen and then come back to see your edits.
232+
</Section>
233+
<Section title="See Your Changes">
234+
<ReloadInstructions />
235+
</Section>
236+
<Section title="Debug">
237+
<DebugInstructions />
238+
</Section>
239+
<Section title="Learn More">
240+
Read the docs to discover what to do next:
241+
</Section>
242+
<LearnMoreLinks />
113243
</View>
114244
</ScrollView>
115245
</SafeAreaView>
116246
);
117-
};
247+
}
118248

119249
const styles = StyleSheet.create({
120250
sectionContainer: {

‎examplenuget/metro.config.js

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ const rnwPath = fs.realpathSync(
88
path.resolve(require.resolve('react-native-windows/package.json'), '..'),
99
);
1010

11+
//
12+
1113
/**
1214
* Metro configuration
1315
* https://facebook.github.io/metro/docs/configuration
@@ -16,22 +18,19 @@ const rnwPath = fs.realpathSync(
1618
*/
1719

1820
const config = {
21+
//
1922
resolver: {
2023
blockList: exclusionList([
21-
// This stops "react-native run-windows" from causing the metro server to crash if its already running
24+
// This stops "npx @react-native-community/cli run-windows" from causing the metro server to crash if its already running
2225
new RegExp(
2326
`${path.resolve(__dirname, 'windows').replace(/[/\\]/g, '/')}.*`,
2427
),
25-
// This prevents "react-native run-windows" from hitting: EBUSY: resource busy or locked, open msbuild.ProjectImports.zip or other files produced by msbuild
28+
// This prevents "npx @react-native-community/cli run-windows" from hitting: EBUSY: resource busy or locked, open msbuild.ProjectImports.zip or other files produced by msbuild
2629
new RegExp(`${rnwPath}/build/.*`),
2730
new RegExp(`${rnwPath}/target/.*`),
2831
/.*\.ProjectImports\.zip/,
2932
]),
30-
extraNodeModules: {
31-
'react-native-xaml': fs.realpathSync(
32-
path.dirname(require.resolve('react-native-xaml/package.json')),
33-
),
34-
},
33+
//
3534
},
3635
transformer: {
3736
getTransformOptions: async () => ({
@@ -40,9 +39,7 @@ const config = {
4039
inlineRequires: true,
4140
},
4241
}),
43-
// This fixes the 'missing-asset-registry-path` error (see https://github.com/microsoft/react-native-windows/issues/11437)
44-
assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry',
4542
},
4643
};
4744

48-
module.exports = mergeConfig(getDefaultConfig(__dirname), config);
45+
module.exports = mergeConfig(getDefaultConfig(__dirname), config);

‎examplenuget/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"prettier": "2.8.8",
3434
"react-test-renderer": "18.3.1",
3535
"typescript": "5.0.4",
36-
"metro-config": "^0.81.0"
36+
"metro-config": "^0.81.1"
3737
},
3838
"engines": {
3939
"node": ">=18"

‎examplenuget/windows/ExperimentalFeatures.props

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,6 @@
3333
-->
3434
<UseExperimentalNuget>true</UseExperimentalNuget>
3535

36-
<!-- Necessary as sometimes RNW 0.73 doesn't run with the old `npx react-natve codegen-windows` -->
37-
<CodegenCommand>npx @react-native-community/cli codegen-windows</CodegenCommand>
38-
3936
<ReactExperimentalFeaturesSet>true</ReactExperimentalFeaturesSet>
4037

4138
</PropertyGroup>

0 commit comments

Comments
 (0)