Browse Source

Add react-sample

Elisa Cutrin 1 year ago
parent
commit
b9fc047e46

+ 8 - 0
redux-sample/.babelrc

@@ -0,0 +1,8 @@
1
+{
2
+  "presets": ["babel-preset-expo"],
3
+  "env": {
4
+    "development": {
5
+      "plugins": ["transform-react-jsx-source"]
6
+    }
7
+  }
8
+}

+ 75 - 0
redux-sample/.flowconfig

@@ -0,0 +1,75 @@
1
+[ignore]
2
+; We fork some components by platform
3
+.*/*[.]android.js
4
+
5
+; Ignore templates for 'react-native init'
6
+<PROJECT_ROOT>/node_modules/react-native/local-cli/templates/.*
7
+
8
+; Ignore RN jest
9
+<PROJECT_ROOT>/node_modules/react-native/jest/.*
10
+
11
+; Ignore RNTester
12
+<PROJECT_ROOT>/node_modules/react-native/RNTester/.*
13
+
14
+; Ignore the website subdir
15
+<PROJECT_ROOT>/node_modules/react-native/website/.*
16
+
17
+; Ignore the Dangerfile
18
+<PROJECT_ROOT>/node_modules/react-native/danger/dangerfile.js
19
+
20
+; Ignore Fbemitter
21
+<PROJECT_ROOT>/node_modules/fbemitter/.*
22
+
23
+; Ignore "BUCK" generated dirs
24
+<PROJECT_ROOT>/node_modules/react-native/\.buckd/
25
+
26
+; Ignore unexpected extra "@providesModule"
27
+.*/node_modules/.*/node_modules/fbjs/.*
28
+
29
+; Ignore polyfills
30
+<PROJECT_ROOT>/node_modules/react-native/Libraries/polyfills/.*
31
+
32
+; Ignore various node_modules
33
+<PROJECT_ROOT>/node_modules/react-native-gesture-handler/.*
34
+<PROJECT_ROOT>/node_modules/expo/.*
35
+<PROJECT_ROOT>/node_modules/react-navigation/.*
36
+<PROJECT_ROOT>/node_modules/xdl/.*
37
+<PROJECT_ROOT>/node_modules/reqwest/.*
38
+<PROJECT_ROOT>/node_modules/metro-bundler/.*
39
+
40
+[include]
41
+
42
+[libs]
43
+node_modules/react-native/Libraries/react-native/react-native-interface.js
44
+node_modules/react-native/flow/
45
+node_modules/expo/flow/
46
+
47
+[options]
48
+emoji=true
49
+
50
+module.system=haste
51
+
52
+module.file_ext=.js
53
+module.file_ext=.jsx
54
+module.file_ext=.json
55
+module.file_ext=.ios.js
56
+
57
+munge_underscores=true
58
+
59
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
60
+
61
+suppress_type=$FlowIssue
62
+suppress_type=$FlowFixMe
63
+suppress_type=$FlowFixMeProps
64
+suppress_type=$FlowFixMeState
65
+suppress_type=$FixMe
66
+
67
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)
68
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)?:? #[0-9]+
69
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
70
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
71
+
72
+unsafe.enable_getters_and_setters=true
73
+
74
+[version]
75
+^0.56.0

+ 18 - 0
redux-sample/.gitignore

@@ -0,0 +1,18 @@
1
+# See https://help.github.com/ignore-files/ for more about ignoring files.
2
+
3
+# expo
4
+.expo/
5
+.idea
6
+
7
+# dependencies
8
+/node_modules
9
+
10
+# misc
11
+.env.local
12
+.env.development.local
13
+.env.test.local
14
+.env.production.local
15
+
16
+npm-debug.log*
17
+yarn-debug.log*
18
+yarn-error.log*

+ 1 - 0
redux-sample/.watchmanconfig

@@ -0,0 +1 @@
1
+{}

+ 26 - 0
redux-sample/App.js

@@ -0,0 +1,26 @@
1
+import React from 'react';
2
+import { Provider } from 'react-redux';
3
+import {
4
+  NavigationContext,
5
+  NavigationProvider,
6
+  StackNavigation,
7
+} from '@expo/ex-navigation';
8
+import Router from './Router';
9
+import Store from './application/redux/store';
10
+
11
+const navigationContext = new NavigationContext({
12
+  router: Router,
13
+  store: Store
14
+});
15
+
16
+export default class App extends React.Component {
17
+  render() {
18
+    return (
19
+      <Provider store={Store}>
20
+        <NavigationProvider context={navigationContext}>
21
+          <StackNavigation initialRoute={Router.getRoute('hello')} />
22
+        </NavigationProvider>
23
+      </Provider>
24
+    );
25
+  }
26
+};

+ 9 - 0
redux-sample/App.test.js

@@ -0,0 +1,9 @@
1
+import React from 'react';
2
+import App from './App';
3
+
4
+import renderer from 'react-test-renderer';
5
+
6
+it('renders without crashing', () => {
7
+  const rendered = renderer.create(<App />).toJSON();
8
+  expect(rendered).toBeTruthy();
9
+});

+ 10 - 0
redux-sample/Router.js

@@ -0,0 +1,10 @@
1
+import {Hello} from "./screens/hello";
2
+import {createRouter} from "@expo/ex-navigation/src/ExNavigation";
3
+import World from "./screens/world";
4
+
5
+const Router = createRouter(() => ({
6
+  hello: () => Hello,
7
+  world: () => World
8
+}));
9
+
10
+export default Router;

+ 5 - 0
redux-sample/app.json

@@ -0,0 +1,5 @@
1
+{
2
+  "expo": {
3
+    "sdkVersion": "26.0.0"
4
+  }
5
+}

+ 6 - 0
redux-sample/application/redux/actions/actions.js

@@ -0,0 +1,6 @@
1
+
2
+export function increment() {
3
+  return {
4
+    type: 'increment',
5
+  };
6
+}

+ 13 - 0
redux-sample/application/redux/reducers/reducers.js

@@ -0,0 +1,13 @@
1
+const defaultState = {value: 0};
2
+
3
+export default function incrementReducer (state = defaultState, action) {
4
+  switch (action.type) {
5
+    case 'increment':
6
+      const currentValue = state.value;
7
+      return {
8
+        value: currentValue + 1,
9
+      };
10
+    default:
11
+      return state;
12
+  }
13
+}

+ 19 - 0
redux-sample/application/redux/store.js

@@ -0,0 +1,19 @@
1
+import { createNavigationEnabledStore, NavigationReducer } from '@expo/ex-navigation';
2
+import { combineReducers, createStore } from 'redux';
3
+import incrementReducer from './reducers/reducers'
4
+
5
+const createStoreWithNavigation = createNavigationEnabledStore({
6
+  createStore,
7
+  navigationStateKey: 'navigation',
8
+});
9
+
10
+const Store = createStoreWithNavigation(
11
+  /* combineReducers and your normal create store things here! */
12
+  combineReducers({
13
+    navigation: NavigationReducer,
14
+    increment: incrementReducer,
15
+    // other reducers
16
+  })
17
+);
18
+
19
+export default Store;

File diff suppressed because it is too large
+ 11939 - 0
redux-sample/package-lock.json


+ 29 - 0
redux-sample/package.json

@@ -0,0 +1,29 @@
1
+{
2
+  "name": "redux-sample",
3
+  "version": "0.1.0",
4
+  "private": true,
5
+  "devDependencies": {
6
+    "react-native-scripts": "1.13.1",
7
+    "jest-expo": "26.0.0",
8
+    "react-test-renderer": "16.3.0-alpha.1"
9
+  },
10
+  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
11
+  "scripts": {
12
+    "start": "react-native-scripts start",
13
+    "eject": "react-native-scripts eject",
14
+    "android": "react-native-scripts android",
15
+    "ios": "react-native-scripts ios",
16
+    "test": "jest"
17
+  },
18
+  "jest": {
19
+    "preset": "jest-expo"
20
+  },
21
+  "dependencies": {
22
+    "@expo/ex-navigation": "^4.2.0",
23
+    "expo": "^26.0.0",
24
+    "react": "16.3.0-alpha.1",
25
+    "react-native": "0.54.0",
26
+    "react-redux": "^5.0.7",
27
+    "redux": "^4.0.0"
28
+  }
29
+}

+ 28 - 0
redux-sample/screens/hello.js

@@ -0,0 +1,28 @@
1
+import React from 'react';
2
+import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
3
+
4
+export class Hello extends React.Component {
5
+
6
+  onPressButton = () => {
7
+    this.props.navigator.push('world');
8
+  };
9
+
10
+  render() {
11
+    return (
12
+      <View style={styles.container}>
13
+        <TouchableOpacity onPress={this.onPressButton} >
14
+          <Text>Hello!</Text>
15
+        </TouchableOpacity>
16
+      </View>
17
+    );
18
+  }
19
+}
20
+
21
+const styles = StyleSheet.create({
22
+  container: {
23
+    flex: 1,
24
+    backgroundColor: '#fff',
25
+    alignItems: 'center',
26
+    justifyContent: 'center',
27
+  },
28
+});

+ 54 - 0
redux-sample/screens/world.js

@@ -0,0 +1,54 @@
1
+import React from 'react';
2
+import { connect } from 'react-redux';
3
+import {increment} from '../application/redux/actions/actions';
4
+import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
5
+
6
+class World extends React.Component {
7
+
8
+  constructor(props) {
9
+    super(props)
10
+  }
11
+
12
+  increment = () => {
13
+    this.props.increment();
14
+  };
15
+
16
+  render() {
17
+    // get the prop of value
18
+    const value = this.props.value;
19
+
20
+    return (
21
+      <View style={styles.container}>
22
+        <Text>World! {value}</Text>
23
+
24
+        <TouchableOpacity onPress={this.increment} >
25
+          <Text>Increment</Text>
26
+        </TouchableOpacity>
27
+      </View>
28
+    );
29
+  }
30
+}
31
+
32
+const styles = StyleSheet.create({
33
+  container: {
34
+    flex: 1,
35
+    backgroundColor: '#fff',
36
+    alignItems: 'center',
37
+    justifyContent: 'center',
38
+  },
39
+});
40
+
41
+
42
+const mapStateToProps = (state) => {
43
+  return {
44
+    value: state.increment.value
45
+  };
46
+};
47
+
48
+const mapDispatchToProps = (dispatch) => {
49
+  return {
50
+    increment: () => { dispatch(increment()); },
51
+  };
52
+};
53
+
54
+export default connect(mapStateToProps, mapDispatchToProps)(World);