callstack / reactnativenotes Goto Github PK

View Code? Open in Web Editor NEW

8.0 15.0 0.0 39.8 MB

Notes demo application showing the abilities of React Native for desktop connected with UWP development

License: MIT License

JavaScript 3.18% C++ 47.15% TypeScript 49.67%

react-native-windows uwp windows desktop cppwinrt

reactnativenotes's Introduction

ReactNativeNotes

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

The idea behind creating the ReactNativeNotes app was to include features of Windows and React Native Windows APIs 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 the Approach 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.

Installation

To play with this app

Make sure to meet all the System requirements for React Native Windows development
Download the released app from Releases and install it by running Install.ps1 script with PowerShell

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.

Approach

There are two main layers of the application:

UWP (C++/WinRT)	RNW (TypeScript)
Contains all the XAML Pages of the application. Those Pages can be navigated between using the `NavigationView`. Each Page can host exactly one separate `Component` implemented on the React Native side.	Contains all screens (called Panels) of the application Each screen is a separate root for further navigation and widgets These components act as a View for the application.

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.

Results

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.

Conclusions

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:

DO	DON'T
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.
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.
If something is not working check the list of issues reported to RNW 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.

Made with ❤️ at Callstack

@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 at [email protected] 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! 🔥

reactnativenotes's People

Contributors

Stargazers

Watchers

reactnativenotes's Issues

RN & RNW update - bump version to the latest

The goal of this issue is to upgrade the React Native and React Native Windows version both to the 0.64.0 or later stable.

Most probably the Microsoft's RN documentation will be helpful.
The React Native Windows 0.64.0 announcement would be good.

NOTE that when generating new project with the RNW 0.64.0, the React Native is automatically configured to 0.64.0 too.

Application full redesign

Implement Redesign RNN app from R&D project.

Accessibility - adjust to the Windows Settings

The goal of this task is to adapt more accessibility in the ReactNativeNotes app.

Although React Native Windows has the accessibility features available by default (UWP-based application from native side) it is required to design the application to be able to accept those settings.
By accepting the Settings it is to ensure that all settings set in OS will be considered and respected in the application.

It is essential to follow best practices described in the Microsoft docs about designing an app.

What is definitely required to be checked and adjusted to accessibility is:

Text size - so it's not pinned to the layout and can be increased safely in the View
Color filter - so some of backgrounds, themes can adjust to the Settings
Narrator - so it's possible for the narrator to read all text in the application

TS - use TypeScript typings in the application

The goal of this issue is to use the TS for type system and type check in the application.

NOTE: Although this is TS, still JavaScript label is marking this issue, as this label applies to all which is on the React Native side.

ESLint & Prettier - configure verification of code quality

The goal of this issue is to provide the application with code quality verification.

The main features of this should be to:

configure eslint to work with notes app
configure prettier through eslint to work with notes app
add pre-commit/pre-push hook and run linter there

For ESLint the eslint-config-callstack should be used
(this will make the job easier and ensure the same standard for each product/app is remained).

For Prettier the best would be to once again refer to Prettier section in the Onboarding docs.
There's also a "Use ESLint to run Prettier" section, which might me useful as well!

NOTE: The best would be to launch the verification in the CI (for example the same way as it was done in the keep-your-session private project in PR#5) and as a pre-commit.

Use the latest versions of framework (React, React Native and React Native Windows)

The goal of this issue is to update the React, React Native and React Native Windows to their latest.
This should solve other dependencies problems reported for this project.

Incorrect note gets opened after deleting another note

The issue is that when deleting a single note (with ID lower than max) wrong notes is opened next time clicking at any other note.

This issue appeared after the redesign, where ID of a note was replaced with just an index in the collection, so most probably it's just a simple off-by-one error.
This applies mostly to the database handler.

Themes - add support for light & dark

The goal of this issue is to support light & dark themes.

Those themes should be implemented on both native and RN side and should be available to be switched via the Settings screen.

The implementation should be based on the truth source available on both layers: UWP and RN.
The architecture should be implemented like presented below:

Internationalization - string resources and settings

The goal of this issue is to provide the RNN app with internationalization.

This feature should be available from the Settings screen and should provide user with at least two languages: English, Polish (more potential languages in the comments).

The implementation should be based most probably on the React Native localization and internationalization blog post.
The architecture should be provided with the truth source holding the property of the language selected and each component should then read the settings and pull the required resource string from proper .json file.

Create README - app presentation

The goal of this task is to create the README for the RNN app.

README should contain:

Screnshots and animations of redesigned app
Goals and ideas of creating this app
Installation and usage
Approach - architecture, solutions, etc.

If there's anything that can be added feel free to leave a comment!

FYI @lukewalczak