You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* Add logo to the README
* Add note about notes lost between sessions
* Describe approach as a table instead of diagrams
* Simplify the description of the project
* Display gifs in table for each screen
* Present resizing and CRUD operation in one gif
* Describe conclusions and DOs&DON'Ts
* Add LICENCE and Build status badges
* Add agenda to the README
* Add Releases package to Install information
* Fix path to RNN logo
* Cover review remarks - Simplify the introduction
<img src="https://circleci.com/gh/callstack/ReactNativeNotes/tree/main.svg?style=shield" alt="Build on CircleCI" />
14
+
</a>
15
+
</p>
16
+
17
+
18
+
This project explores possibilities of React Native Windows as a framework for building desktop apps.
19
+
20
+
### **Content** ###
21
+
*[Description](#Description)
22
+
*[Installation](#Installation)
23
+
*[Approach](#Approach)
24
+
*[Results](#Results)
25
+
*[Conclusions](#Conclusions)
5
26
6
-
This project is a demonstration application that should present the abilites and skills of [Callstack](https://callstack.com) company in creating React Native Windows **desktop** applications.
27
+
---
7
28
8
-
The idea behind creating the Notes app was to include some features of Windows and React Native Windows [APIs](https://docs.microsoft.com/en-us/windows/uwp/cpp-and-winrt-apis/consume-apis) but also to create the application that will contain all the most common usage scenarios of an example desktop application.
29
+
## Description ##
9
30
10
-
The development of this application was also a perfect opportunity to mix both React Native (JavaScript) development with the native UWP (C++) features.
11
-
It means that beside standard React Native components there is a whole UWP layer which handles all the navigation, animations, and content of a Windows desktop app.
31
+
The idea behind creating the ReactNativeNotes app was to include features of Windows and React Native Windows [APIs](https://docs.microsoft.com/en-us/windows/uwp/cpp-and-winrt-apis/consume-apis) and to mix both React Native and UWP development.
32
+
So beside standard React Native components there is a whole UWP layer which handles all the navigation, animations, and content of a Windows desktop app.
12
33
Please check the [Approach](#Approach) section for more details.
13
34
35
+
**NOTE:** This is the demo application. Its topic is to create and keep your notes and tasks but its purpose is to demonstrate the abilities of React Native Windows. There's no database used for this application, which means that once you close the app, all notes created in this session will be lost.
36
+
14
37
15
38
---
16
39
17
-
## Installation & Usage##
40
+
## Installation ##
18
41
19
42
To play with this app
20
43
* Make sure to meet all the [System requirements](https://microsoft.github.io/react-native-windows/docs/rnw-dependencies) for React Native Windows development
44
+
* Download the released app from [Releases](https://github.com/orgs/callstack/packages?repo_name=ReactNativeNotes) and install it by running *Install.ps1* script with PowerShell
45
+
46
+
or
47
+
21
48
* Clone the repository
22
49
* Launch the terminal and start the app by the following command:
23
50
```
@@ -32,32 +59,51 @@ This will start all the required tools and launch your app
32
59
33
60
## Approach ##
34
61
35
-
The following application is the combination of skills and features of React Native and UWP development.
The first is the UWP layer contains all the XAML Pages of the application.
41
-
Those Pages can be navigated between using the [`NavigationView`](https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.navigationview?view=winrt-20348).
42
-
43
-
Each Page can host exactly one separate `Component` implemented on the React Native side.
44
-
These components acts as a View for the application.
63
+
|UWP (C++/WinRT)|RNW (TypeScript)|
64
+
|-|-|
65
+
|Contains all the XAML Pages of the application.<br>Those Pages can be navigated between using the [`NavigationView`](https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.navigationview?view=winrt-20348).<br>Each Page can host exactly one separate `Component` implemented on the React Native side.|Contains all screens (called Panels) of the application<br>Each screen is a separate root for further navigation and widgets<br>These components act as a View for the application.|
45
66
46
-
So in more details, the architecture looks like:
47
-
48
67
49
-
So comparing to original React Native Windows where whole application starts from an `index.js` and `App.js`, this solution makes the UWP being a root hosting not an `index.js`, but many `Components`.
So comparing to original React Native Windows where whole application starts from an `index.js` and `App.js`, this solution makes the UWP being a multipile roots hosting not an `index.js`, but many `Components`.
51
71
52
72
53
73
---
54
74
55
75
## Results ##
56
76
57
77
The application contains two main screens:
58
-
* Notes screen - where all the notes are available for all the Create/Read/Update/Delete operations:
59
-
60
-
61
-
* Tasks screen - where all the tasks are available with calendar date picker for specifying the deadline of a task.
62
-
63
78
79
+
|||
80
+
|-|-|
81
+
|**Notes screen**<br>where all the notes are available for all the Create/Read/Update/Delete operations ||
82
+
|**Tasks screen**<br>where all the tasks are available with calendar date picker for specifying the deadline of a task.||
83
+
84
+
85
+
---
86
+
87
+
## Conclusions ##
88
+
89
+
[React Native Windows](https://github.com/microsoft/react-native-windows) already is a stable framework and is well maintained. There were no issues observed during the development, which would slow down the work or prevent from achieving a goal.
90
+
<br/>Creating the desktop app with RNW is not much different than creating an app for mobile using React Native. React Native Windows has the same environment and almost the same tools.
91
+
92
+
This application was quite an experiment. It was about to check the limits of React Native Windows as a library and its abilities to cooperate with native side.
93
+
<br/>And React Native Windows did it just great!
94
+
95
+
But as this is an experiment, there are some good practices, DOs and DON'Ts that were observed:
96
+
| DO | DON'T |
97
+
|-|-|
98
+
|If you plan to use the native API in your app, consider C# as it has more examples in the documentation than C++|Don't overuse the native side - it will limit the abilities of RNW, make the implementation too distributed and the more native you use, the less cross-platform your app is.|
99
+
|When using community modules choose only those with version >= 0.64.x support|Don't spend your time on writing a native module on your own. Most probably it is already available on GitHub.|
100
+
|If something is not working check the list of [issues reported to RNW](https://github.com/microsoft/react-native-windows/issues) for a fix or a workaround|Don't test the native side unless it's really required, focus on your JS/TS implementation tests instead.|
101
+
102
+
103
+
---
104
+
105
+
## Made with ❤️ at Callstack
106
+
107
+
`@callstack/ReactNativeNotes` is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. [Callstack](https://callstack.com/) is a group of React and React Native geeks, contact us at [[email protected]](mailto:[email protected]) if you need any help with these or just want to say hi!
108
+
109
+
Like the project? ⚛️ [Join the team](https://callstack.com/careers) who does amazing stuff for clients and drives React Native Open Source! 🔥
0 commit comments