From a17c0c36730c774f83ca2a2628f6f0f872e170aa Mon Sep 17 00:00:00 2001 From: Nikolai R Kristiansen Date: Sun, 2 Sep 2018 01:04:09 +0200 Subject: [PATCH] react-navigation 2.x --- package.json | 7 +- src/navigation.js | 51 ++++++++++---- src/screens/AboutScreen.js | 9 +-- src/screens/EventDetailScreen.js | 9 +-- src/screens/EventListScreen.js | 9 +-- src/screens/LoginScreen.js | 9 +-- src/screens/MembershipScreen.js | 9 +-- src/screens/UserRegisterScreen.js | 9 +-- yarn.lock | 109 +++++++++++++++++++++++------- 9 files changed, 134 insertions(+), 87 deletions(-) diff --git a/package.json b/package.json index dfefc9b..4a761a3 100644 --- a/package.json +++ b/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", diff --git a/src/navigation.js b/src/navigation.js index c36adf8..95e0a09 100644 --- a/src/navigation.js +++ b/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; \ No newline at end of file + // 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; diff --git a/src/screens/AboutScreen.js b/src/screens/AboutScreen.js index 5c9506a..83062ca 100644 --- a/src/screens/AboutScreen.js +++ b/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 }) => ( ), @@ -26,4 +19,4 @@ export default class AboutScreen extends Component { ); } -} \ No newline at end of file +} diff --git a/src/screens/EventDetailScreen.js b/src/screens/EventDetailScreen.js index aa0d687..d8cddb3 100644 --- a/src/screens/EventDetailScreen.js +++ b/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 { ); } -} \ No newline at end of file +} diff --git a/src/screens/EventListScreen.js b/src/screens/EventListScreen.js index 7983c56..95c2ca6 100644 --- a/src/screens/EventListScreen.js +++ b/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 }) => ( ), @@ -31,4 +24,4 @@ export default class EventsScreen extends Component { ); } -} \ No newline at end of file +} diff --git a/src/screens/LoginScreen.js b/src/screens/LoginScreen.js index 8bbe737..293a442 100644 --- a/src/screens/LoginScreen.js +++ b/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 { ) } -} \ No newline at end of file +} diff --git a/src/screens/MembershipScreen.js b/src/screens/MembershipScreen.js index 2de3deb..a112de4 100644 --- a/src/screens/MembershipScreen.js +++ b/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 }) => ( ), @@ -41,4 +34,4 @@ export default class MembershipScreen extends Component { ) } -} \ No newline at end of file +} diff --git a/src/screens/UserRegisterScreen.js b/src/screens/UserRegisterScreen.js index 0b16965..668200d 100644 --- a/src/screens/UserRegisterScreen.js +++ b/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 { ) } -} \ No newline at end of file +} diff --git a/yarn.lock b/yarn.lock index 4b6d6c1..413cb7e 100644 --- a/yarn.lock +++ b/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"