|
| 1 | +<h1 align="center"> ReactNativeNotes </h1> |
| 2 | +<p align="center"> |
| 3 | + Demo application to create and keep your notes and tasks. |
| 4 | +</p> |
| 5 | + |
| 6 | +This project is a demonstration application that should present the abilites and skills of [Callstack.io](https://callstack.com) company in creating React Native Windows **desktop** applications. |
| 7 | + |
| 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. |
| 9 | + |
| 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. |
| 12 | +Please check the [Approach](#Approach) section for more details. |
| 13 | + |
| 14 | + |
| 15 | +--- |
| 16 | + |
| 17 | +## Installation & Usage ## |
| 18 | + |
| 19 | +To play with this app |
| 20 | +* Make sure to meet all the [System requirements](https://microsoft.github.io/react-native-windows/docs/rnw-dependencies) for React Native Windows development |
| 21 | +* Clone the repository |
| 22 | +* Launch the terminal and start the app by the following command: |
| 23 | +``` |
| 24 | +npx react-native run-windows --arch x64 |
| 25 | +``` |
| 26 | +(or add `--release --no-launch` to the command line to use the Release version) |
| 27 | +This will start all the required tools and launch your app |
| 28 | +* alternatively you can launch your app through the Visual Studio by opening the solution file in *\<repo root>/windows/ReactNativeNotes.sln* and launching the Debug configuration. |
| 29 | + |
| 30 | + |
| 31 | +--- |
| 32 | + |
| 33 | +## Approach ## |
| 34 | + |
| 35 | +The following application is the combination of skills and features of React Native and UWP development. |
| 36 | + |
| 37 | +There are two main layers of the application: |
| 38 | + |
| 39 | + |
| 40 | +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. |
| 45 | + |
| 46 | +So in more details, the architecture looks like: |
| 47 | + |
| 48 | + |
| 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`. |
| 50 | + |
| 51 | + |
| 52 | + |
| 53 | +--- |
| 54 | + |
| 55 | +## Results ## |
| 56 | + |
| 57 | +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 | + |
0 commit comments