react-navigation 2.x

package.json

@@ -14,8 +14,8 @@
     "apollo-cache-inmemory": "^1.2.9",
     "apollo-client": "^2.4.1",
     "apollo-link-http": "^1.5.4",
-    "email-validator": "^1.1.1",
-    "graphql": "^0.11.7",
+    "email-validator": "^2.0.4",
+    "graphql": "^0.13.2",
     "graphql-tag": "^2.9.2",
     "moment": "^2.22.2",
     "native-base": "^2.8.0",
@@ -28,7 +28,7 @@
     "react-native-htmlview": "^0.13.0",
     "react-native-sentry": "^0.39.0",
     "react-native-vector-icons": "~4.4.2",
-    "react-navigation": "^1.0.0-beta.21",
+    "react-navigation": "^2.12.1",
     "react-redux": "^5.0.7",
     "redux": "^3.7.2",
     "redux-logger": "^3.0.6",
@@ -37,7 +37,6 @@
     "tipsi-stripe": "^4.5.1"
   },
   "devDependencies": {
-    "@babel/core": "7.0.0-beta.47",
     "babel-core": "^7.0.0-0",
     "babel-jest": "^23.4.2",
     "jest": "23.5.0",

src/navigation.js

@@ -1,5 +1,5 @@
 import {Platform, StyleSheet} from 'react-native';
-import {TabNavigator, StackNavigator} from "react-navigation";
+import {createBottomTabNavigator, createStackNavigator} from "react-navigation";
 
 import AboutScreen from "./screens/AboutScreen";
 import EventDetailScreen from "./screens/EventDetailScreen";
@@ -9,9 +9,9 @@ import MembershipScreen from "./screens/MembershipScreen";
 import UserRegisterScreen from "./screens/UserRegisterScreen";
 
 const tabBarRoutes = {
-    EventList: { screen: EventListScreen },
-    Membership: { screen: MembershipScreen },
-    About: { screen: AboutScreen },
+    EventList: EventListScreen,
+    Membership: MembershipScreen,
+    About: AboutScreen,
 };
 
 const tabBarOptions = {
@@ -44,13 +44,40 @@ const tabBarOptions = {
     }
 };
 
-const tabNav = TabNavigator(tabBarRoutes, tabBarOptions);
+const tabNav = createBottomTabNavigator(tabBarRoutes, tabBarOptions);
 
-const DuskenNavigation = StackNavigator({
-    Root: { screen: tabNav },
-    Login: { screen: LoginScreen },
-    UserRegister: { screen: UserRegisterScreen },
-    EventDetail: { screen: EventDetailScreen },
-});
+tabNav.navigationOptions = ({ navigation, screenProps }) => {
+    const tabTitles = {
+      EventList: 'Program',
+      Membership: 'Medlemskap',
+      About: 'Om oss',
+    };
+    const { routeName } = navigation.state.routes[navigation.state.index];
 
-export default DuskenNavigation;
+    // You can do whatever you like here to pick the title based on the route name
+    return {
+        headerTitle: tabTitles[routeName],
+    };
+};
+
+const stackOptions = {
+  navigationOptions: {
+    initialRouteName: 'Home',
+    headerStyle: {
+      backgroundColor: '#f58220',
+    },
+    headerTitleStyle: {
+      color: 'white',
+    },
+    headerTintColor: 'white',
+  }
+};
+
+const DuskenNavigation = createStackNavigator({
+    Root: tabNav,
+    Login: LoginScreen,
+    UserRegister: UserRegisterScreen,
+    EventDetail: EventDetailScreen,
+}, stackOptions);
+
+export default DuskenNavigation;

src/screens/AboutScreen.js

@@ -8,13 +8,6 @@ import getTheme from '../../native-base-theme/components';
 export default class AboutScreen extends Component {
     static navigationOptions = {
         title: 'Om oss',
-        headerStyle: {
-            backgroundColor: '#f58220',
-        },
-        headerTitleStyle: {
-            color: 'white',
-        },
-        headerTintColor: 'white',
         tabBarIcon: ({ tintColor }) => (
             <Icon name="info" size={16} color={tintColor} style={{marginTop: 5}} />
         ),
@@ -26,4 +19,4 @@ export default class AboutScreen extends Component {
                 <AboutContainer />
             </StyleProvider>);
     }
-}
+}

src/screens/EventDetailScreen.js

@@ -6,13 +6,6 @@ import getTheme from '../../native-base-theme/components';
 export default class EventDetailScreen extends Component {
     static navigationOptions = ({navigation}) => ({
         title: navigation.state.params.item.title.decoded,
-        headerStyle: {
-            backgroundColor: '#f58220',
-        },
-        headerTitleStyle: {
-            color: 'white',
-        },
-        headerTintColor: 'white',
     });
 
     render() {
@@ -23,4 +16,4 @@ export default class EventDetailScreen extends Component {
             </StyleProvider>
         );
     }
-}
+}

src/screens/EventListScreen.js

@@ -7,13 +7,6 @@ import getTheme from '../../native-base-theme/components';
 export default class EventsScreen extends Component {
     static navigationOptions = {
         title: 'Program',
-        headerStyle: {
-            backgroundColor: '#f58220',
-        },
-        headerTitleStyle: {
-            color: 'white',
-        },
-        headerTintColor: 'white',
         tabBarIcon: ({ tintColor }) => (
             <Icon name="event" size={16} color={tintColor} style={{marginTop: 5}}/>
         ),
@@ -31,4 +24,4 @@ export default class EventsScreen extends Component {
             </StyleProvider>
         );
     }
-}
+}

src/screens/LoginScreen.js

@@ -6,13 +6,6 @@ import getTheme from '../../native-base-theme/components';
 export default class LoginScreen extends Component {
     static navigationOptions = {
         title: 'Logg inn',
-        headerStyle: {
-            backgroundColor: '#f58220',
-        },
-        headerTitleStyle: {
-            color: 'white',
-        },
-        headerTintColor: 'white',
     };
 
     onLogin = () => {
@@ -27,4 +20,4 @@ export default class LoginScreen extends Component {
             </StyleProvider>
         )
     }
-}
+}

src/screens/MembershipScreen.js

@@ -7,13 +7,6 @@ import getTheme from '../../native-base-theme/components';
 export default class MembershipScreen extends Component {
     static navigationOptions = {
         title: 'Medlemskap',
-        headerStyle: {
-            backgroundColor: '#f58220',
-        },
-        headerTitleStyle: {
-            color: 'white',
-        },
-        headerTintColor: 'white',
         tabBarIcon: ({ tintColor }) => (
             <Icon name="user" size={16} color={tintColor} style={{marginTop: 5}} />
         ),
@@ -41,4 +34,4 @@ export default class MembershipScreen extends Component {
             </StyleProvider>
         )
     }
-}
+}

src/screens/UserRegisterScreen.js

@@ -6,13 +6,6 @@ import getTheme from '../../native-base-theme/components';
 export default class UserRegisterScreen extends Component {
     static navigationOptions = {
         title: 'Bli medlem',
-        headerStyle: {
-            backgroundColor: '#f58220',
-        },
-        headerTitleStyle: {
-            color: 'white',
-        },
-        headerTintColor: 'white',
     };
 
     onRegister = () => {
@@ -27,4 +20,4 @@ export default class UserRegisterScreen extends Component {
             </StyleProvider>
         )
     }
-}
+}

yarn.lock

@@ -1844,6 +1844,13 @@ create-react-class@^15.6.3:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+create-react-context@^0.2.1:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
+  dependencies:
+    fbjs "^0.8.0"
+    gud "^1.0.0"
+
 cross-spawn@^5.0.1, cross-spawn@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -2032,9 +2039,9 @@ ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
-email-validator@^1.1.1:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/email-validator/-/email-validator-1.2.3.tgz#3e3aa65595e079a4686b41c004485a53638a6ed5"
+email-validator@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/email-validator/-/email-validator-2.0.4.tgz#b8dfaa5d0dae28f1b03c95881d904d4e40bfe7ed"
 
 encodeurl@~1.0.1, encodeurl@~1.0.2:
   version "1.0.2"
@@ -2322,7 +2329,7 @@ fbjs@0.8.16:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.9"
 
-fbjs@^0.8.14, fbjs@^0.8.16, fbjs@^0.8.9:
+fbjs@^0.8.0, fbjs@^0.8.14, fbjs@^0.8.16, fbjs@^0.8.9:
   version "0.8.17"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
   dependencies:
@@ -2564,16 +2571,20 @@ graphql-tag@^2.9.2:
   version "2.9.2"
   resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.9.2.tgz#2f60a5a981375f430bf1e6e95992427dc18af686"
 
-graphql@^0.11.7:
-  version "0.11.7"
-  resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.11.7.tgz#e5abaa9cb7b7cccb84e9f0836bf4370d268750c6"
+graphql@^0.13.2:
+  version "0.13.2"
+  resolved "http://registry.npmjs.org/graphql/-/graphql-0.13.2.tgz#4c740ae3c222823e7004096f832e7b93b2108270"
   dependencies:
-    iterall "1.1.3"
+    iterall "^1.2.1"
 
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
 
+gud@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
+
 handlebars@^4.0.11:
   version "4.0.11"
   resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc"
@@ -3101,9 +3112,9 @@ istanbul-reports@^1.4.1:
   dependencies:
     handlebars "^4.0.11"
 
-iterall@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.1.3.tgz#1cbbff96204056dde6656e2ed2e2226d0e6d72c9"
+iterall@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.2.2.tgz#92d70deb8028e0c39ff3164fdbf4d8b088130cd7"
 
 jest-changed-files@^23.4.2:
   version "23.4.2"
@@ -4537,7 +4548,7 @@ prompts@^0.1.9:
     kleur "^2.0.1"
     sisteransi "^0.1.1"
 
-prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
   dependencies:
@@ -4568,6 +4579,13 @@ qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
 
+query-string@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.1.0.tgz#01e7d69f6a0940dac67a937d6c6325647aa4532a"
+  dependencies:
+    decode-uri-component "^0.2.0"
+    strict-uri-encode "^2.0.0"
+
 r2@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/r2/-/r2-2.0.1.tgz#94cd802ecfce9a622549c8182032d8e4a2b2e612"
@@ -4645,7 +4663,7 @@ react-is@^16.4.2:
   version "16.4.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.2.tgz#84891b56c2b6d9efdee577cc83501dfc5ecead88"
 
-react-lifecycles-compat@^3.0.2:
+react-lifecycles-compat@^3, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
 
@@ -4704,6 +4722,12 @@ react-native-keyboard-aware-scroll-view@0.5.0:
     prop-types "^15.6.0"
     react-native-iphone-x-helper "^1.0.1"
 
+react-native-safe-area-view@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.7.0.tgz#38f5ab9368d6ef9e5d18ab64212938af3ec39421"
+  dependencies:
+    hoist-non-react-statics "^2.3.1"
+
 react-native-safe-area-view@^0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.9.0.tgz#10ece2ecac70e7005a5b0b3f06c8833060e6d21f"
@@ -4717,12 +4741,18 @@ react-native-sentry@^0.39.0:
     "@sentry/wizard" "^0.11.0"
     raven-js "^3.24.2"
 
-"react-native-tab-view@github:react-navigation/react-native-tab-view":
-  version "0.0.74"
-  resolved "https://codeload.github.com/react-navigation/react-native-tab-view/tar.gz/36ebd834d78b841fc19778c966465d02fd1213bb"
+react-native-tab-view@^0.0.77:
+  version "0.0.77"
+  resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-0.0.77.tgz#11ceb8e7c23100d07e628dc151b57797524d00d4"
   dependencies:
     prop-types "^15.6.0"
 
+react-native-tab-view@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-1.0.2.tgz#66e0bc6d38a227ed2b212e3a256b7902f6ce02ed"
+  dependencies:
+    prop-types "^15.6.1"
+
 react-native-vector-icons@4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-4.6.0.tgz#e4014311ffa6de397d914ffc31b7097a874cc8d5"
@@ -4795,18 +4825,47 @@ react-native@0.56.0:
     xmldoc "^0.4.0"
     yargs "^9.0.0"
 
-react-navigation@^1.0.0-beta.21:
-  version "1.5.13"
-  resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-1.5.13.tgz#f75109013fe153f19e9cd2dc82e354e998ef0f0a"
+react-navigation-deprecated-tab-navigator@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/react-navigation-deprecated-tab-navigator/-/react-navigation-deprecated-tab-navigator-1.3.0.tgz#015dcae1e977b984ca7e99245261c15439026bb7"
+  dependencies:
+    react-native-tab-view "^0.0.77"
+
+react-navigation-drawer@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/react-navigation-drawer/-/react-navigation-drawer-0.5.0.tgz#d91b6a6ec65c34ba78c00f814b1e6508922cc9ec"
+  dependencies:
+    react-native-drawer-layout-polyfill "^1.3.2"
+
+react-navigation-stack@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/react-navigation-stack/-/react-navigation-stack-0.2.3.tgz#9d1e2524aa1d178302c938948b8ece49d713f12b"
+
+react-navigation-tabs@0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-0.6.0.tgz#2f526194f4360e56c2702e736887449acc2080dc"
+  dependencies:
+    hoist-non-react-statics "^2.5.0"
+    prop-types "^15.6.1"
+    react-lifecycles-compat "^3.0.4"
+    react-native-safe-area-view "^0.7.0"
+    react-native-tab-view "^1.0.0"
+
+react-navigation@^2.12.1:
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-2.12.1.tgz#17122a4162cd5a65d79814385cd61c2c0cb7ebb5"
   dependencies:
     clamp "^1.0.1"
+    create-react-context "^0.2.1"
     hoist-non-react-statics "^2.2.0"
     path-to-regexp "^1.7.0"
-    prop-types "^15.5.10"
-    react-lifecycles-compat "^3.0.2"
-    react-native-drawer-layout-polyfill "^1.3.2"
+    query-string "^6.1.0"
+    react-lifecycles-compat "^3"
     react-native-safe-area-view "^0.9.0"
-    react-native-tab-view "github:react-navigation/react-native-tab-view"
+    react-navigation-deprecated-tab-navigator "1.3.0"
+    react-navigation-drawer "0.5.0"
+    react-navigation-stack "0.2.3"
+    react-navigation-tabs "0.6.0"
 
 react-proxy@^1.1.7:
   version "1.1.8"
@@ -5466,6 +5525,10 @@ stream-buffers@~2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4"
 
+strict-uri-encode@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
+
 string-length@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"