diff --git a/ReactNativeClient/src/components/screens/note.js b/ReactNativeClient/src/components/screens/note.js
new file mode 100644
index 0000000000..11f9cfd272
--- /dev/null
+++ b/ReactNativeClient/src/components/screens/note.js
@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import { View, Button, TextInput } from 'react-native';
+import { connect } from 'react-redux'
+import { Log } from 'src/log.js'
+import { Note } from 'src/models/note.js'
+
+class NoteScreenComponent extends React.Component {
+
+ static navigationOptions = {
+ title: 'Note',
+ };
+
+ constructor() {
+ super();
+ this.state = { note: Note.newNote() }
+ }
+
+ componentWillMount() {
+ this.setState({ note: this.props.note });
+ }
+
+ noteComponent_change = (propName, propValue) => {
+ this.setState((prevState, props) => {
+ let note = Object.assign({}, prevState.note);
+ note[propName] = propValue;
+ return { note: note }
+ });
+ }
+
+ title_changeText = (text) => {
+ this.noteComponent_change('title', text);
+ }
+
+ body_changeText = (text) => {
+ this.noteComponent_change('body', text);
+ }
+
+ saveNoteButton_press = () => {
+ Note.save(this.state.note).then((note) => {
+ this.props.dispatch({
+ type: 'NOTES_UPDATE_ONE',
+ note: note,
+ });
+ }).catch((error) => {
+ Log.warn('Cannot save note', error);
+ });
+ }
+
+ render() {
+ return (
+
+
+
+
+
+ );
+ }
+
+}
+
+const NoteScreen = connect(
+ (state) => {
+ return {
+ note: state.selectedNoteId ? Note.noteById(state.notes, state.selectedNoteId) : Note.newNote(),
+ };
+ }
+)(NoteScreenComponent)
+
+export { NoteScreen };
\ No newline at end of file
diff --git a/ReactNativeClient/src/components/screens/notes.js b/ReactNativeClient/src/components/screens/notes.js
new file mode 100644
index 0000000000..bcd5a89718
--- /dev/null
+++ b/ReactNativeClient/src/components/screens/notes.js
@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import { View, Button } from 'react-native';
+import { connect } from 'react-redux'
+import { Log } from 'src/log.js'
+import { ItemList } from 'src/components/item-list.js'
+
+class NotesScreenComponent extends React.Component {
+
+ static navigationOptions = {
+ title: 'Notes',
+ };
+
+ createNoteButton_press = () => {
+ this.props.dispatch({
+ type: 'Navigation/NAVIGATE',
+ routeName: 'Note',
+ });
+ }
+
+ loginButton_press = () => {
+
+ }
+
+ syncButton_press = () => {
+ Log.info('SYNC');
+ }
+
+ render() {
+ const { navigate } = this.props.navigation;
+ return (
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+const NotesScreen = connect(
+ (state) => {
+ return {};
+ }
+)(NotesScreenComponent)
+
+export { NotesScreen };
\ No newline at end of file
diff --git a/ReactNativeClient/src/main.js b/ReactNativeClient/src/main.js
index 30c0baa7ae..1e77b2b017 100644
--- a/ReactNativeClient/src/main.js
+++ b/ReactNativeClient/src/main.js
@@ -1,8 +1,15 @@
+// Note about the application structure:
+// - The user interface and its state is managed by React/Redux.
+// - Persistent storage to SQLite and Web API is handled outside of React/Redux using regular JavaScript (no middleware, no thunk, etc.).
+// - Communication from React to SQLite is done by calling model methods (note.save, etc.)
+// - Communication from SQLite to Redux is done via dispatcher.
+
+// So there's basically still a one way flux: React => SQLite => Redux => React
+
import { AppRegistry } from 'react-native';
import { Log } from 'src/log.js'
import { Root } from 'src/root.js';
import { Registry } from 'src/registry.js';
-import { Database } from 'src/database.js';
function main() {
Registry.setDebugMode(true);
diff --git a/ReactNativeClient/src/root.js b/ReactNativeClient/src/root.js
index c9cb08e6f0..4cb47ad66f 100644
--- a/ReactNativeClient/src/root.js
+++ b/ReactNativeClient/src/root.js
@@ -11,6 +11,8 @@ import { Note } from 'src/models/note.js'
import { Database } from 'src/database.js'
import { Registry } from 'src/registry.js'
import { ItemList } from 'src/components/item-list.js'
+import { NotesScreen } from 'src/components/screens/notes.js'
+import { NoteScreen } from 'src/components/screens/note.js'
import { Setting } from 'src/models/setting.js'
let defaultState = {
@@ -83,110 +85,6 @@ const reducer = (state = defaultState, action) => {
let store = createStore(reducer);
-class NotesScreenComponent extends React.Component {
-
- static navigationOptions = {
- title: 'Notes',
- };
-
- createNoteButton_press = () => {
- this.props.dispatch({
- type: 'Navigation/NAVIGATE',
- routeName: 'Note',
- });
- }
-
- loginButton_press = () => {
-
- }
-
- syncButton_press = () => {
- Log.info('SYNC');
- }
-
- render() {
- const { navigate } = this.props.navigation;
- return (
-
-
-
-
-
-
-
-
- );
- }
-}
-
-const NotesScreen = connect(
- (state) => {
- return {};
- }
-)(NotesScreenComponent)
-
-class NoteScreenComponent extends React.Component {
-
- static navigationOptions = {
- title: 'Note',
- };
-
- constructor() {
- super();
- this.state = { note: Note.newNote() }
- }
-
- componentWillMount() {
- this.setState({ note: this.props.note });
- }
-
- noteComponent_change = (propName, propValue) => {
- this.setState((prevState, props) => {
- let note = Object.assign({}, prevState.note);
- note[propName] = propValue;
- return { note: note }
- });
- }
-
- title_changeText = (text) => {
- this.noteComponent_change('title', text);
- }
-
- body_changeText = (text) => {
- this.noteComponent_change('body', text);
- }
-
- saveNoteButton_press = () => {
- Note.save(this.state.note).then((note) => {
- this.props.dispatch({
- type: 'NOTES_UPDATE_ONE',
- note: note,
- });
- }).catch((error) => {
- Log.warn('Cannot save note', error);
- });
- }
-
- render() {
- return (
-
-
-
-
-
- );
- }
-
-}
-
-const NoteScreen = connect(
- (state) => {
- return {
- note: state.selectedNoteId ? Note.noteById(state.notes, state.selectedNoteId) : Note.newNote(),
- };
- }
-)(NoteScreenComponent)
-
const AppNavigator = StackNavigator({
Notes: {screen: NotesScreen},
Note: {screen: NoteScreen},