Repository files navigation

Demo application to create and keep your notes and tasks.

This project explores possibilities of React Native Windows as a framework for building desktop apps.

• Description
• Installation
• Approach
• Results
• Conclusions

The idea behind creating the ReactNativeNotes app was to include features of Windows and React Native WindowsAPIs and to mix both React Native and UWP development.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.Please check theApproach section for more details.

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.

To play with this app

• Make sure to meet all theSystem requirements for React Native Windows development
• Download the released app fromReleases and install it by runningInstall.ps1 script with PowerShell

or

• Clone the repository
• Launch the terminal and start the app by the following command:

npx react-native run-windows --arch x64

(or add--release --no-launch to the command line to use the Release version)This will start all the required tools and launch your app

• 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.

There are two main layers of the application:

So comparing to original React Native Windows where whole application starts from anindex.js andApp.js, this solution makes the UWP being a multipile roots hosting not anindex.js, but manyComponents.

The application contains two main screens:

Notes screen where all the notes are available for all the Create/Read/Update/Delete operations
Tasks screen where all the tasks are available with calendar date picker for specifying the deadline of a task.

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.
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.

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.
And React Native Windows did it just great!

But as this is an experiment, there are some good practices, DOs and DON'Ts that were observed:

@callstack/ReactNativeNotes is an open source project and will always remain free to use. If you think it's cool, please star it 🌟.Callstack is a group of React and React Native geeks, contact us athello@callstack.com if you need any help with these or just want to say hi!

Like the project? ⚛️Join the team who does amazing stuff for clients and drives React Native Open Source! 🔥