edb/cnapp
9
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Tabbed navigation is back

Browse Source
This commit is contained in:
nikolark committed 2021-10-03 22:11:17 +02:00
1 parent d2925db4ce
commit 3c0bb98725
9 files changed
+112 -155
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

package.json
+1
View File
@@ -17,6 +17,7 @@
"dependencies": {
"@apollo/client": "^3.4.14",
"@react-native-async-storage/async-storage": "^1.15.8",
"@react-navigation/bottom-tabs": "^6.0.7",
"@react-navigation/native": "^6.0.4",
"@react-navigation/native-stack": "^6.2.2",
"@sentry/react-native": "^3.1.1",
src/Dusken.js
+2 -2
View File
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { NativeBaseProvider } from 'native-base';
import DuskenNavigation from './Navigation';
import Navigation from './Navigation';
import { logout as logoutAction, registerUserSuccess as registerUserSuccessAction } from './actions';
import { migrateReduxPersistFourToFive } from './utils';
@@ -21,7 +21,7 @@ const DuskenContainer = ({ registerUserSuccess, userToken, user, logout }) => {
return (
<NativeBaseProvider>
<DuskenNavigation />
<Navigation />
</NativeBaseProvider>
);
};
src/Navigation.js
+67 -88
View File
@@ -1,102 +1,81 @@
import React from 'react';
// import { Platform, StyleSheet } from 'react-native';
// import { createBottomTabNavigator, getActiveChildNavigationOptions } from 'react-navigation';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Icon from 'react-native-vector-icons/SimpleLineIcons';
import EventListScreen from './screens/EventListScreen';
import AboutScreen from './screens/AboutScreen';
import EventDetailScreen from './screens/EventDetailScreen';
import LoginScreen from './screens/LoginScreen';
import MembershipScreen from './screens/MembershipScreen';
// import UserRegisterScreen from './screens/UserRegisterScreen';
import UserRegisterScreen from './screens/UserRegisterScreen';
// const tabBarRoutes = {
// EventList: EventListScreen,
// Membership: MembershipScreen,
// About: AboutScreen,
// };
import Membership from './modules/membership/Membership';
import Login from './modules/login/Login';
import AboutContainer from './modules/about/AboutContainer';
// const tabBarOptions = {
// tabBarPosition: 'bottom',
// tabBarOptions: {
// style: {
// ...Platform.select({
// android: {
// backgroundColor: '#fff',
// borderTopWidth: StyleSheet.hairlineWidth,
// borderTopColor: 'rgba(0, 0, 0, 0.2)',
// },
// }),
// },
// indicatorStyle: {
// backgroundColor: '#f58220',
// },
// activeTintColor: '#f58220',
// inactiveTintColor: '#333333',
// labelStyle: {
// fontSize: 12,
// ...Platform.select({
// android: {
// marginBottom: 4,
// },
// ios: {
// marginBottom: 0,
// },
// }),
// },
// },
// navigationOptions: ({ navigation, screenProps }) => ({
// // get header title from active child screen
// ...getActiveChildNavigationOptions(navigation, screenProps),
// headerStyle: {
// backgroundColor: '#f58220',
// },
// headerTitleStyle: {
// color: 'white',
// },
// headerTintColor: 'white',
// }),
// };
const EventStack = createNativeStackNavigator();
const EventStackScreen = () => (
<EventStack.Navigator initialRouteName="EventList">
<EventStack.Screen
name="EventList"
component={EventListScreen}
options={{
title: 'Program',
}}
/>
<EventStack.Screen
name="EventDetail"
component={EventDetailScreen}
options={({ route }) => ({ title: route.params.item.title.decoded })}
/>
</EventStack.Navigator>
);
// const tabNav = createBottomTabNavigator(tabBarRoutes, tabBarOptions);
// const DuskenNavigation = createStackNavigator(
// {
// Root: tabNav,
// Login: LoginScreen,
// UserRegister: UserRegisterScreen,
// EventDetail: EventDetailScreen,
// },
// {
// defaultNavigationOptions: {
// headerStyle: {
// backgroundColor: '#f58220',
// },
// headerTitleStyle: {
// color: 'white',
// },
// headerTintColor: 'white',
// },
// }
// );
const Stack = createNativeStackNavigator();
const UserStack = createNativeStackNavigator();
const UserStackScreen = () => (
<UserStack.Navigator initialRouteName="Membership">
<UserStack.Screen name="Membership" component={Membership} options={{ title: 'Medlemskap' }} />
<UserStack.Screen name="Login" component={Login} options={{ title: 'Logg inn' }} />
<UserStack.Screen
name="UserRegister"
component={UserRegisterScreen}
options={{
title: 'Bli medlem',
}}
/>
</UserStack.Navigator>
);
const DuskenNavigation = () => (
const HomeTabs = createBottomTabNavigator();
const Navigation = () => (
<NavigationContainer>
<Stack.Navigator initialRouteName="EventList">
<Stack.Screen name="About" component={AboutScreen} />
<Stack.Screen name="Membership" component={MembershipScreen} />
<Stack.Screen name="EventList" component={EventListScreen} />
<Stack.Screen
name="EventDetail"
component={EventDetailScreen}
options={({ route }) => ({
title: route.params.item.title.decoded,
})}
<HomeTabs.Navigator initialRouteName="EventStack">
<HomeTabs.Screen
name="EventStack"
component={EventStackScreen}
options={{
headerShown: false,
tabBarLabel: 'Program',
tabBarIcon: ({ color, size }) => <Icon name="event" size={size} color={color} style={{ marginTop: 5 }} />,
}}
/>
<Stack.Screen name="Login" component={LoginScreen} />
</Stack.Navigator>
<HomeTabs.Screen
name="UserStack"
component={UserStackScreen}
options={{
headerShown: false,
tabBarLabel: 'Medlemskap',
tabBarIcon: ({ color, size }) => <Icon name="user" size={size} color={color} style={{ marginTop: 5 }} />,
}}
/>
<HomeTabs.Screen
name="About"
component={AboutContainer}
options={{
title: 'Om oss',
tabBarIcon: ({ color, size }) => <Icon name="info" size={size} color={color} style={{ marginTop: 5 }} />,
}}
/>
</HomeTabs.Navigator>
</NavigationContainer>
);
export default DuskenNavigation;
export default Navigation;
src/screens/AboutScreen.js
-15
View File
@@ -1,15 +0,0 @@
import React from 'react';
import Icon from 'react-native-vector-icons/SimpleLineIcons';
import AboutContainer from '../modules/about/AboutContainer';
const AboutScreen = () => <AboutContainer />;
const TabBarIcon = ({ tintColor }) => <Icon name="info" size={16} color={tintColor} style={{ marginTop: 5 }} />;
AboutScreen.navigationOptions = {
title: 'Om oss',
tabBarIcon: TabBarIcon,
};
export default AboutScreen;
src/screens/EventListScreen.js
+2 -12
View File
@@ -1,13 +1,9 @@
import React from 'react';
import Icon from 'react-native-vector-icons/SimpleLineIcons';
import { useNavigation } from '@react-navigation/native';
import EventListContainer from '../modules/events/EventListContainer';
// FIXME: theme
// https://docs.nativebase.io/setup-provider#add-custom-theme-optional
// import getTheme from '../../native-base-theme/components';
const EventsScreen = () => {
const EventListScreen = () => {
const { navigate } = useNavigation();
return (
<EventListContainer
@@ -18,10 +14,4 @@ const EventsScreen = () => {
);
};
const tabBarIcon = ({ tintColor }) => <Icon name="event" size={16} color={tintColor} style={{ marginTop: 5 }} />;
EventsScreen.navigationOptions = {
title: 'Program',
tabBarIcon,
};
export default EventsScreen;
export default EventListScreen;
src/screens/LoginScreen.js
-11
View File
@@ -1,11 +0,0 @@
import React from 'react';
import Login from '../modules/login/Login';
const LoginScreen = () => {
return <Login />;
};
LoginScreen.navigationOptions = {
title: 'Logg inn',
};
export default LoginScreen;
src/screens/MembershipScreen.js
-14
View File
@@ -1,14 +0,0 @@
import React, { Component } from 'react';
import Icon from 'react-native-vector-icons/SimpleLineIcons';
import Membership from '../modules/membership/Membership';
export default class MembershipScreen extends Component {
static navigationOptions = {
title: 'Medlemskap',
tabBarIcon: ({ tintColor }) => <Icon name="user" size={16} color={tintColor} style={{ marginTop: 5 }} />,
};
render() {
return <Membership />;
}
}
src/screens/UserRegisterScreen.js
+1 -11
View File
@@ -1,23 +1,13 @@
import React, { Component } from 'react';
import { StyleProvider } from 'native-base';
import UserRegisterContainer from '../modules/register/UserRegisterContainer';
import getTheme from '../../native-base-theme/components';
export default class UserRegisterScreen extends Component {
static navigationOptions = {
title: 'Bli medlem',
};
onRegister = () => {
// This works since UserRegisterScreen is allways navigated to from MembershipScreen
this.props.navigation.goBack();
};
render() {
return (
<StyleProvider style={getTheme()}>
<UserRegisterContainer onRegister={this.onRegister} />
</StyleProvider>
);
return <UserRegisterContainer onRegister={this.onRegister} />;
}
}
yarn.lock
+39 -2
View File
@@ -1944,6 +1944,15 @@
resolved "https://registry.yarnpkg.com/@react-native/polyfills/-/polyfills-2.0.0.tgz#4c40b74655c83982c8cf47530ee7dc13d957b6aa"
integrity sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ==
"@react-navigation/bottom-tabs@^6.0.7":
version "6.0.7"
resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-6.0.7.tgz#3a0772f57b588d10853d05407fc3c0c48c6bb8ba"
integrity sha512-NfSb4Y5wSEPg3T7gHN25O133enSscJ808xEWqhGkR96BtSjcHh/oNMO+dqk6Avgh56uZEyL92Qm/CKFvaGkWow==
dependencies:
"@react-navigation/elements" "^1.1.2"
color "^3.1.3"
warn-once "^0.1.0"
"@react-navigation/core@^6.0.2":
version "6.0.2"
resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-6.0.2.tgz#301be6c28211ae2571f3e9e3f74c8f077619ccdd"
@@ -3542,7 +3551,7 @@ collection-visit@^1.0.0:
map-visit "^1.0.0"
object-visit "^1.0.0"
color-convert@^1.9.0:
color-convert@^1.9.0, color-convert@^1.9.3:
version "1.9.3"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -3561,11 +3570,27 @@ color-name@1.1.3:
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
color-name@~1.1.4:
color-name@^1.0.0, color-name@~1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
color-string@^1.6.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.6.0.tgz#c3915f61fe267672cb7e1e064c9d692219f6c312"
integrity sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==
dependencies:
color-name "^1.0.0"
simple-swizzle "^0.2.2"
color@^3.1.3:
version "3.2.1"
resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164"
integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==
dependencies:
color-convert "^1.9.3"
color-string "^1.6.0"
colorette@^1.0.7:
version "1.4.0"
resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.4.0.tgz#5190fbb87276259a86ad700bff2c6d6faa3fca40"
@@ -5114,6 +5139,11 @@ is-arrayish@^0.2.1:
resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
is-arrayish@^0.3.1:
version "0.3.2"
resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
is-bigint@^1.0.1:
version "1.0.4"
resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
@@ -8089,6 +8119,13 @@ simple-plist@^1.0.0:
bplist-parser "0.2.0"
plist "^3.0.1"
simple-swizzle@^0.2.2:
version "0.2.2"
resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=
dependencies:
is-arrayish "^0.3.1"
sisteransi@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"