From e787438553b0d3a95c5e7282890acc2be24346c2 Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski Date: Thu, 25 Mar 2021 12:02:13 +0100 Subject: [PATCH 01/11] Create main panel for notes The application's main panel contains all the notes added by the user. They are displayed in the grid, with number of columns adapted to the width of the window. Note, that the Window size needs to be considered instead of Screen's. That is due to having the Page in RNW rendered as a root with certain and fixed dimensions. Currently only the testing data are given to the FlatList, so there's a possibility to test it by displaying any content. In further development that data should be taken from the database. --- src/NotesMainPanel.js | 43 ++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 40 insertions(+), 3 deletions(-) diff --git a/src/NotesMainPanel.js b/src/NotesMainPanel.js index 12b3cf0..8541b44 100644 --- a/src/NotesMainPanel.js +++ b/src/NotesMainPanel.js @@ -6,18 +6,49 @@ import React from 'react'; import { AppRegistry, + Dimensions, + FlatList, StyleSheet, - Text, View, } from 'react-native'; +import NoteWidget from './Widgets/NoteWidget'; + +const window = Dimensions.get("window"); +const screen = Dimensions.get("screen"); + +const noteWidgetWidth = 400; class NotesMainPanel extends React.Component { + constructor(props) { + super(props); + this.state = { + notes: [{key: "1"}, {key: "2"}, {key: "3"}, {key: "4"}, {key: "5"}, {key: "6"}, {key: "7"}, {key: "8"}, {key: "9"}], + dimensions: {window, screen}, + columns: 1, + } + }; + + onChange = ({ window, screen }) => { + this.setState({ dimensions: { window, screen }, columns: Math.floor(window.width / noteWidgetWidth) }); + }; + + componentDidMount() { + Dimensions.addEventListener("change", this.onChange); + }; + + componentWillUnmount() { + Dimensions.removeEventListener("change", this.onChange); + }; + + renderNote = notes => { + return + }; render() { return( - - NotesMainPanel + + ); } @@ -25,6 +56,12 @@ class NotesMainPanel extends React.Component { const styles = StyleSheet.create({ + mainContainer: { + flex: 1, + flexDirection: "column", + margin: 20, + backgroundColor: "transparent", + }, }); From 5a354176d0fbbbb5fdb0e3f4f3d791384427ff5b Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski Date: Thu, 25 Mar 2021 14:02:03 +0100 Subject: [PATCH 02/11] Create basic widget for single note on the main screen This commit introduces the initial widget containing single note presented on the main panel. This widget has the reponsibility to: * contain the summary of the note: ID, Title and shortened post message * act as the button to enter the full post screen --- src/Widgets/NoteWidget.js | 96 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 src/Widgets/NoteWidget.js diff --git a/src/Widgets/NoteWidget.js b/src/Widgets/NoteWidget.js new file mode 100644 index 0000000..588f062 --- /dev/null +++ b/src/Widgets/NoteWidget.js @@ -0,0 +1,96 @@ +/** + * @format + * @flow strict-local + */ + +import React from 'react'; +import { + AppRegistry, + StyleSheet, + Text, + TouchableHighlight, + View, +} from 'react-native'; + + +class NoteWidget extends React.Component { + constructor(props) { + super(props); + this.state = { + width: props.width, + ID: Number(props.ID), + } + }; + + enterNote = () => { + }; + + render() { + return( + + + + + {this.state.ID} + + Header + + + + + + + + This is the single widget + {'\n'}With the text written here only for the presentation purpose. + + This note has the ID: {this.state.ID} + + + + + ); + } +}; + + +const styles = StyleSheet.create({ + noteWidget: { + borderColor: "grey", + borderWidth: 1, + margin: 20, + backgroundColor: "whitesmoke", + borderRadius: 10, + shadowOffset: {x: 5, y: 50}, + shadowColor: "black", + elevation: 10, + opacity: 0.8 + }, + noteHeader: { + flex: 1, + flexDirection: "row", + margin: 5, + }, + noteTitle: { + alignSelf: "center", + alignContent: "center", + alignItems: "center", + textAlign: "center", + marginHorizontal: 10, + }, + noteSeparator: { + borderColor: "black", + borderWidth: 0.5, + marginTop: 5, + marginBottom: 10, + alignSelf: "stretch" + }, + noteMainContent: { + margin: 10 + } +}); + + +AppRegistry.registerComponent("NoteWidget", () => NoteWidget); + +export default NoteWidget; From a333fe10162a1f32c62e0e5a1fb797f6170d226d Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski Date: Thu, 25 Mar 2021 14:12:38 +0100 Subject: [PATCH 03/11] Fix: Widget size reset on main panel's reentry --- src/NotesMainPanel.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/NotesMainPanel.js b/src/NotesMainPanel.js index 8541b44..5aef9d3 100644 --- a/src/NotesMainPanel.js +++ b/src/NotesMainPanel.js @@ -16,7 +16,7 @@ import NoteWidget from './Widgets/NoteWidget'; const window = Dimensions.get("window"); const screen = Dimensions.get("screen"); -const noteWidgetWidth = 400; +const noteWidgetWidth = 300; class NotesMainPanel extends React.Component { @@ -25,12 +25,16 @@ class NotesMainPanel extends React.Component { this.state = { notes: [{key: "1"}, {key: "2"}, {key: "3"}, {key: "4"}, {key: "5"}, {key: "6"}, {key: "7"}, {key: "8"}, {key: "9"}], dimensions: {window, screen}, - columns: 1, + columns: this.calculateColumnWidth(window), } }; + calculateColumnWidth = (window) => { + return Math.floor(window.width / noteWidgetWidth); + }; + onChange = ({ window, screen }) => { - this.setState({ dimensions: { window, screen }, columns: Math.floor(window.width / noteWidgetWidth) }); + this.setState({ dimensions: { window, screen }, columns: this.calculateColumnWidth(window) }); }; componentDidMount() { From 891d698b33e80136a521c441965050a39ddfd5e3 Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski Date: Thu, 25 Mar 2021 15:06:55 +0100 Subject: [PATCH 04/11] Implement note full screen --- index.js | 1 + src/NoteWidgetDetailsPanel.js | 0 2 files changed, 1 insertion(+) create mode 100644 src/NoteWidgetDetailsPanel.js diff --git a/index.js b/index.js index 7eb0ad0..94fa1d8 100644 --- a/index.js +++ b/index.js @@ -9,5 +9,6 @@ import {name as appName} from './app.json'; import NotesMainPanel from './src/NotesMainPanel'; import UserAccountPanel from './src/UserAccountPanel'; import ApplicationSettingsPanel from './src/ApplicationSettingsPanel'; +import NoteWidgetDetailsPanel from './src/NoteWidgetDetailsPanel'; AppRegistry.registerComponent(appName, () => App); diff --git a/src/NoteWidgetDetailsPanel.js b/src/NoteWidgetDetailsPanel.js new file mode 100644 index 0000000..e69de29 From 14a26d801611bcf02eeed93365ea17fd99b68ab3 Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski Date: Thu, 25 Mar 2021 15:13:49 +0100 Subject: [PATCH 05/11] Define explicit application entry page --- windows/ReactNativeNotes/App.cpp | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/windows/ReactNativeNotes/App.cpp b/windows/ReactNativeNotes/App.cpp index 89e3048..0cfceaa 100644 --- a/windows/ReactNativeNotes/App.cpp +++ b/windows/ReactNativeNotes/App.cpp @@ -53,7 +53,7 @@ void App::OnLaunched(activation::LaunchActivatedEventArgs const& e) super::OnLaunched(e); Frame rootFrame = Window::Current().Content().as(); - rootFrame.Navigate(xaml_typename(), box_value(e.Arguments())); + rootFrame.Navigate(xaml_typename(), box_value(e.Arguments())); } /// From 1630bcdb39fbc124e0ab3d5e3efd2b013f444c4b Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski Date: Thu, 25 Mar 2021 15:17:22 +0100 Subject: [PATCH 06/11] Implement navigation native module This native module is responsible for handling the navigation between screens which are not connected through the NavigationView and it's Frame. This situation happens, when there's a need to navigate to separate screen, but at the same time get rid of navigation panel. This native module is called NoteWidgetClickHandler because it is designed explicitly for the NotesPage <-> NoteWidgetDetailsPage navigation both-ways. --- .../NativeModules/NoteWidgetClickHandler.hpp | 41 +++++++++++++++++++ .../ReactNativeNotes/ReactPackageProvider.cpp | 2 + 2 files changed, 43 insertions(+) create mode 100644 windows/ReactNativeNotes/NativeModules/NoteWidgetClickHandler.hpp diff --git a/windows/ReactNativeNotes/NativeModules/NoteWidgetClickHandler.hpp b/windows/ReactNativeNotes/NativeModules/NoteWidgetClickHandler.hpp new file mode 100644 index 0000000..cb41689 --- /dev/null +++ b/windows/ReactNativeNotes/NativeModules/NoteWidgetClickHandler.hpp @@ -0,0 +1,41 @@ +#pragma once + +#include "pch.h" +#include "NativeModules.h" + + +namespace ReactNativeNotes +{ + REACT_MODULE( NoteWidgetClickHandler ); + struct NoteWidgetClickHandler + { + REACT_CONSTANT( ID, L"ID" ); + const unsigned int ID; + + REACT_METHOD( OpenWidget, L"openWidget" ); + void OpenWidget( const unsigned int ID ) noexcept + { + auto pageToNavigateTo = winrt::Windows::UI::Xaml::Interop::TypeName + { + winrt::to_hstring( L"ReactNativeNotes.NoteWidgetDetailsPage" ), + winrt::Windows::UI::Xaml::Interop::TypeKind::Custom + }; + auto navigationAnimation = winrt::Windows::UI::Xaml::Media::Animation::DrillInNavigationTransitionInfo(); + auto& rootFrame = winrt::Windows::UI::Xaml::Window::Current().Content().as(); + rootFrame.Navigate( pageToNavigateTo, nullptr, navigationAnimation ); + } + + REACT_METHOD( GoToNotesScreen, L"goToNotesScreen" ); + void GoToNotesScreen() noexcept + { + auto pageToNavigateTo = winrt::Windows::UI::Xaml::Interop::TypeName + { + winrt::to_hstring( L"ReactNativeNotes.NotesPage" ), + winrt::Windows::UI::Xaml::Interop::TypeKind::Custom + }; + auto navigationAnimation = winrt::Windows::UI::Xaml::Media::Animation::DrillInNavigationTransitionInfo(); + auto& rootFrame = winrt::Windows::UI::Xaml::Window::Current().Content().as(); + rootFrame.Navigate( pageToNavigateTo, nullptr, navigationAnimation ); + } + }; +} diff --git a/windows/ReactNativeNotes/ReactPackageProvider.cpp b/windows/ReactNativeNotes/ReactPackageProvider.cpp index 045cc31..7855d54 100644 --- a/windows/ReactNativeNotes/ReactPackageProvider.cpp +++ b/windows/ReactNativeNotes/ReactPackageProvider.cpp @@ -2,6 +2,8 @@ #include "ReactPackageProvider.h" #include "NativeModules.h" +#include "NativeModules/NoteWidgetClickHandler.hpp" + using namespace winrt::Microsoft::ReactNative; namespace winrt::ReactNativeNotes::implementation From 340a4a8ed0c66f086c281f5e6b8d7826c4fe019b Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski Date: Thu, 25 Mar 2021 15:35:01 +0100 Subject: [PATCH 07/11] Implement going back function for NoteWidgetClickHandler The native module should also provide the system with the ability to go back. This is now done by the GoToNotesScreen function, which navigates to the MainPage. NOTE: MainPage needs to be selected, as only this page contains the NavigationFrame and is able to display the navigation top pane. This is why there's a starting point implemented when MainPage is navigated to. --- windows/ReactNativeNotes/MainPage.cpp | 1 + .../NativeModules/NoteWidgetClickHandler.hpp | 18 +++++++++--------- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/windows/ReactNativeNotes/MainPage.cpp b/windows/ReactNativeNotes/MainPage.cpp index 5499247..a0830d7 100644 --- a/windows/ReactNativeNotes/MainPage.cpp +++ b/windows/ReactNativeNotes/MainPage.cpp @@ -15,6 +15,7 @@ namespace winrt::ReactNativeNotes::implementation { InitializeComponent(); auto app = Application::Current().as(); + Navigate( L"NotesPage" ); } void MainPage::TopNavigationPanel_ItemInvoked( Windows::UI::Xaml::Controls::NavigationView const& sender, Windows::UI::Xaml::Controls::NavigationViewItemInvokedEventArgs const& args ) diff --git a/windows/ReactNativeNotes/NativeModules/NoteWidgetClickHandler.hpp b/windows/ReactNativeNotes/NativeModules/NoteWidgetClickHandler.hpp index cb41689..81d5868 100644 --- a/windows/ReactNativeNotes/NativeModules/NoteWidgetClickHandler.hpp +++ b/windows/ReactNativeNotes/NativeModules/NoteWidgetClickHandler.hpp @@ -15,22 +15,22 @@ namespace ReactNativeNotes REACT_METHOD( OpenWidget, L"openWidget" ); void OpenWidget( const unsigned int ID ) noexcept { - auto pageToNavigateTo = winrt::Windows::UI::Xaml::Interop::TypeName - { - winrt::to_hstring( L"ReactNativeNotes.NoteWidgetDetailsPage" ), - winrt::Windows::UI::Xaml::Interop::TypeKind::Custom - }; - auto navigationAnimation = winrt::Windows::UI::Xaml::Media::Animation::DrillInNavigationTransitionInfo(); - auto& rootFrame = winrt::Windows::UI::Xaml::Window::Current().Content().as(); - rootFrame.Navigate( pageToNavigateTo, nullptr, navigationAnimation ); + NavigateViaMainFrame( L"ReactNativeNotes.NoteWidgetDetailsPage" ); } REACT_METHOD( GoToNotesScreen, L"goToNotesScreen" ); void GoToNotesScreen() noexcept + { + NavigateViaMainFrame( L"ReactNativeNotes.MainPage" ); + } + + + private: + void NavigateViaMainFrame( const winrt::hstring pageName ) { auto pageToNavigateTo = winrt::Windows::UI::Xaml::Interop::TypeName { - winrt::to_hstring( L"ReactNativeNotes.NotesPage" ), + pageName, winrt::Windows::UI::Xaml::Interop::TypeKind::Custom }; auto navigationAnimation = winrt::Windows::UI::Xaml::Media::Animation::DrillInNavigationTransitionInfo(); From 9e57b04c1d270704cf965214bdfa00169f5ac0fe Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski Date: Thu, 25 Mar 2021 15:37:58 +0100 Subject: [PATCH 08/11] Add new page for Note details screen --- .../NoteWidgetDetailsPage.cpp | 16 ++++++++++++++++ .../ReactNativeNotes/NoteWidgetDetailsPage.h | 19 +++++++++++++++++++ .../NoteWidgetDetailsPage.idl | 8 ++++++++ .../NoteWidgetDetailsPage.xaml | 14 ++++++++++++++ .../ReactNativeNotes/ReactNativeNotes.vcxproj | 16 ++++++++++++++++ .../ReactNativeNotes.vcxproj.filters | 2 ++ 6 files changed, 75 insertions(+) create mode 100644 windows/ReactNativeNotes/NoteWidgetDetailsPage.cpp create mode 100644 windows/ReactNativeNotes/NoteWidgetDetailsPage.h create mode 100644 windows/ReactNativeNotes/NoteWidgetDetailsPage.idl create mode 100644 windows/ReactNativeNotes/NoteWidgetDetailsPage.xaml diff --git a/windows/ReactNativeNotes/NoteWidgetDetailsPage.cpp b/windows/ReactNativeNotes/NoteWidgetDetailsPage.cpp new file mode 100644 index 0000000..a265b74 --- /dev/null +++ b/windows/ReactNativeNotes/NoteWidgetDetailsPage.cpp @@ -0,0 +1,16 @@ +#include "pch.h" +#include "NoteWidgetDetailsPage.h" +#include "NoteWidgetDetailsPage.g.cpp" + +#include "App.h" + + +namespace winrt::ReactNativeNotes::implementation +{ + NoteWidgetDetailsPage::NoteWidgetDetailsPage() + { + InitializeComponent(); + auto app = Windows::UI::Xaml::Application::Current().as(); + ReactRootView().ReactNativeHost( app->Host() ); + } +} diff --git a/windows/ReactNativeNotes/NoteWidgetDetailsPage.h b/windows/ReactNativeNotes/NoteWidgetDetailsPage.h new file mode 100644 index 0000000..352a8c0 --- /dev/null +++ b/windows/ReactNativeNotes/NoteWidgetDetailsPage.h @@ -0,0 +1,19 @@ +#pragma once + +#include "NoteWidgetDetailsPage.g.h" + +namespace winrt::ReactNativeNotes::implementation +{ + class NoteWidgetDetailsPage : public NoteWidgetDetailsPageT + { + public: + NoteWidgetDetailsPage(); + }; +} + +namespace winrt::ReactNativeNotes::factory_implementation +{ + class NoteWidgetDetailsPage : public NoteWidgetDetailsPageT + { + }; +} diff --git a/windows/ReactNativeNotes/NoteWidgetDetailsPage.idl b/windows/ReactNativeNotes/NoteWidgetDetailsPage.idl new file mode 100644 index 0000000..3907ce9 --- /dev/null +++ b/windows/ReactNativeNotes/NoteWidgetDetailsPage.idl @@ -0,0 +1,8 @@ +namespace ReactNativeNotes +{ + [default_interface] + runtimeclass NoteWidgetDetailsPage : Windows.UI.Xaml.Controls.Page + { + NoteWidgetDetailsPage(); + } +} diff --git a/windows/ReactNativeNotes/NoteWidgetDetailsPage.xaml b/windows/ReactNativeNotes/NoteWidgetDetailsPage.xaml new file mode 100644 index 0000000..e415daf --- /dev/null +++ b/windows/ReactNativeNotes/NoteWidgetDetailsPage.xaml @@ -0,0 +1,14 @@ + + + diff --git a/windows/ReactNativeNotes/ReactNativeNotes.vcxproj b/windows/ReactNativeNotes/ReactNativeNotes.vcxproj index 047a83d..889bb1f 100644 --- a/windows/ReactNativeNotes/ReactNativeNotes.vcxproj +++ b/windows/ReactNativeNotes/ReactNativeNotes.vcxproj @@ -109,6 +109,11 @@ MainPage.xaml Code + + + NoteWidgetDetailsPage.xaml + Code + NotesPage.xaml Code @@ -152,6 +157,10 @@ MainPage.xaml Code + + NoteWidgetDetailsPage.xaml + Code + NotesPage.xaml Code @@ -182,6 +191,10 @@ MainPage.xaml Code + + NoteWidgetDetailsPage.xaml + Code + NotesPage.xaml Code @@ -206,6 +219,9 @@ Designer + + Designer + Designer diff --git a/windows/ReactNativeNotes/ReactNativeNotes.vcxproj.filters b/windows/ReactNativeNotes/ReactNativeNotes.vcxproj.filters index a0dc1bc..56aead1 100644 --- a/windows/ReactNativeNotes/ReactNativeNotes.vcxproj.filters +++ b/windows/ReactNativeNotes/ReactNativeNotes.vcxproj.filters @@ -18,6 +18,7 @@ + @@ -62,5 +63,6 @@ + \ No newline at end of file From 0bd49b0c61b011a4e46da4c27ee8b9abbafbdcbc Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski Date: Thu, 25 Mar 2021 15:39:09 +0100 Subject: [PATCH 09/11] Navigate back on 'Go back...' button press --- src/Widgets/NoteWidget.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Widgets/NoteWidget.js b/src/Widgets/NoteWidget.js index 588f062..54e9ace 100644 --- a/src/Widgets/NoteWidget.js +++ b/src/Widgets/NoteWidget.js @@ -10,6 +10,7 @@ import { Text, TouchableHighlight, View, + NativeModules, } from 'react-native'; @@ -23,6 +24,7 @@ class NoteWidget extends React.Component { }; enterNote = () => { + NativeModules.NoteWidgetClickHandler.openWidget(this.state.ID); }; render() { From 8475002179496cfb49310bf69779100d55f9c065 Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski Date: Thu, 25 Mar 2021 15:40:01 +0100 Subject: [PATCH 10/11] Add the basic implementation to the NoteWidgetDetailsPanel --- src/NoteWidgetDetailsPanel.js | 51 +++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/src/NoteWidgetDetailsPanel.js b/src/NoteWidgetDetailsPanel.js index e69de29..3f18eaa 100644 --- a/src/NoteWidgetDetailsPanel.js +++ b/src/NoteWidgetDetailsPanel.js @@ -0,0 +1,51 @@ +/** + * @format + * @flow strict-local + */ + +import React from 'react'; +import { + AppRegistry, + Button, + StyleSheet, + Text, + View, + NativeModules, +} from 'react-native'; + + +class NoteWidgetDetailsPanel extends React.Component { + + goBack = () => { + NativeModules.NoteWidgetClickHandler.goToNotesScreen(); + }; + + render() { + return( + + + Note details panel + + + + ); + } +}; + + +const styles = StyleSheet.create({ + panel: { + height: 75, + borderColor: "black", + borderWidth: 1, + }, + panelContent: { + flex: 1, + flexDirection: "column", + } +}); + + +AppRegistry.registerComponent("NoteWidgetDetailsPanel", () => NoteWidgetDetailsPanel); + +export default NoteWidgetDetailsPanel; From 3e227b06cde25126e0dc978476de8627859c704d Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski Date: Thu, 25 Mar 2021 15:59:49 +0100 Subject: [PATCH 11/11] Suppress the navigation animation when going back to NotesPage --- windows/ReactNativeNotes/MainPage.cpp | 19 ++++++++++++++----- windows/ReactNativeNotes/MainPage.h | 2 +- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/windows/ReactNativeNotes/MainPage.cpp b/windows/ReactNativeNotes/MainPage.cpp index a0830d7..cc857fc 100644 --- a/windows/ReactNativeNotes/MainPage.cpp +++ b/windows/ReactNativeNotes/MainPage.cpp @@ -15,7 +15,7 @@ namespace winrt::ReactNativeNotes::implementation { InitializeComponent(); auto app = Application::Current().as(); - Navigate( L"NotesPage" ); + Navigate( L"NotesPage", false ); } void MainPage::TopNavigationPanel_ItemInvoked( Windows::UI::Xaml::Controls::NavigationView const& sender, Windows::UI::Xaml::Controls::NavigationViewItemInvokedEventArgs const& args ) @@ -35,16 +35,25 @@ namespace winrt::ReactNativeNotes::implementation { } - void MainPage::Navigate( winrt::hstring pageName ) noexcept + void MainPage::Navigate( winrt::hstring pageName, const bool hasAnimation ) noexcept { auto pageToNavigateTo = Windows::UI::Xaml::Interop::TypeName { to_hstring( L"ReactNativeNotes." + pageName ), Windows::UI::Xaml::Interop::TypeKind::Custom }; - auto navigationAnimation = Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionInfo(); - navigationAnimation.Effect( Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionEffect::FromLeft ); - ApplicationContentFrame().Navigate( pageToNavigateTo, nullptr, navigationAnimation ); + if( hasAnimation ) + { + auto navigationAnimation = Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionInfo(); + navigationAnimation.Effect( Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionEffect::FromLeft ); + ApplicationContentFrame().Navigate( pageToNavigateTo, nullptr, navigationAnimation ); + } + else + { + auto navigationAnimation = Windows::UI::Xaml::Media::Animation::SuppressNavigationTransitionInfo(); + ApplicationContentFrame().Navigate( pageToNavigateTo, nullptr, navigationAnimation ); + } + } } diff --git a/windows/ReactNativeNotes/MainPage.h b/windows/ReactNativeNotes/MainPage.h index e8ea421..7f64eb5 100644 --- a/windows/ReactNativeNotes/MainPage.h +++ b/windows/ReactNativeNotes/MainPage.h @@ -14,7 +14,7 @@ namespace winrt::ReactNativeNotes::implementation void TopNavigationPanel_BackRequested( Windows::UI::Xaml::Controls::NavigationView const& sender, Windows::UI::Xaml::Controls::NavigationViewBackRequestedEventArgs const& args ); private: - void Navigate( winrt::hstring pageName ) noexcept; + void Navigate( winrt::hstring pageName, const bool hasAnimation = true ) noexcept; }; }