use react-navigation-stack module
This commit is contained in:
Akinwale Ariwodola
parent
76cc8eaea1
commit
23cf8b15bc
5 changed files with 77 additions and 49 deletions
20
package-lock.json
generated
20
package-lock.json
generated
|
|
@ -8125,9 +8125,9 @@
|
|||
}
|
||||
},
|
||||
"react-native-gesture-handler": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.1.0.tgz",
|
||||
"integrity": "sha512-E9IKHpmL+sz/iCYkUriTUjBaQBORWV+oheYPQleADkxjo2sYsQfnlyTz4EQYFONkUwJ6WmfTNkYt2/yc5U4Ziw==",
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.3.0.tgz",
|
||||
"integrity": "sha512-ASRFIXBuKRvqlmwkWJhV8yP2dTpvcqVrLNpd7FKVBFHYWr6SAxjGyO9Ik8w1lAxDhMlRP2IcJ9p9eq5X2WWeLQ==",
|
||||
"requires": {
|
||||
"hoist-non-react-statics": "^2.3.1",
|
||||
"invariant": "^2.2.2",
|
||||
|
|
@ -8390,6 +8390,14 @@
|
|||
"requires": {
|
||||
"react-native-tab-view": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"react-navigation-stack": {
|
||||
"version": "1.5.5",
|
||||
"resolved": "https://registry.npmjs.org/react-navigation-stack/-/react-navigation-stack-1.5.5.tgz",
|
||||
"integrity": "sha512-qMhOhmUmyPNfFGWMbwv5flrNVsFU4JZSBWnONSgVGK4KWGW8DbobXBi4i4sBAC9Kg8EqJK0qyWcxnkMJJtfMWA==",
|
||||
"requires": {
|
||||
"prop-types": "^15.7.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -8407,9 +8415,9 @@
|
|||
}
|
||||
},
|
||||
"react-navigation-stack": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/react-navigation-stack/-/react-navigation-stack-1.5.0.tgz",
|
||||
"integrity": "sha512-XwgdQY8c7PguPw/cx6GCRMnYMe6P/izzOpeOfE8g6sWrWW2vs/vwodRb9a820QePhX0I7dkgxdnTSq+o7/R49Q==",
|
||||
"version": "1.8.1",
|
||||
"resolved": "https://registry.npmjs.org/react-navigation-stack/-/react-navigation-stack-1.8.1.tgz",
|
||||
"integrity": "sha512-XOkHuYlQjZKnD4jTU0Ml847sKjpwsJpQ6JX4ZfOq8D0e6fPWXbpYNhvUnzHMHMm+tnbhTqkqP1Umu40Hmx748Q==",
|
||||
"requires": {
|
||||
"prop-types": "^15.7.2"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
"react-native-exception-handler": "2.9.0",
|
||||
"react-native-fast-image": "^6.1.1",
|
||||
"react-native-fs": "^2.13.3",
|
||||
"react-native-gesture-handler": "1.1.0",
|
||||
"react-native-gesture-handler": "1.3.0",
|
||||
"react-native-image-zoom-viewer": "^2.2.5",
|
||||
"react-native-password-strength-meter": "^0.0.2",
|
||||
"react-native-phone-input": "lbryio/react-native-phone-input",
|
||||
|
|
@ -36,6 +36,7 @@
|
|||
"react-navigation": "^3.11.0",
|
||||
"react-navigation-drawer": "^2.2.2",
|
||||
"react-navigation-redux-helpers": "^3.0.2",
|
||||
"react-navigation-stack": "^1.8.1",
|
||||
"react-redux": "^5.0.3",
|
||||
"redux": "^4.0.4",
|
||||
"redux-persist": "^5.10.0",
|
||||
|
|
|
|||
|
|
@ -18,8 +18,9 @@ import SubscriptionsPage from 'page/subscriptions';
|
|||
import TransactionHistoryPage from 'page/transactionHistory';
|
||||
import VerificationScreen from 'page/verification';
|
||||
import WalletPage from 'page/wallet';
|
||||
import { createStackNavigator, NavigationActions } from 'react-navigation';
|
||||
import { NavigationActions } from 'react-navigation';
|
||||
import { createDrawerNavigator } from 'react-navigation-drawer';
|
||||
import { createStackNavigator } from 'react-navigation-stack';
|
||||
import {
|
||||
createReduxContainer,
|
||||
createReactNavigationReduxMiddleware,
|
||||
|
|
@ -210,6 +211,7 @@ const drawer = createDrawerNavigator(
|
|||
},
|
||||
{
|
||||
drawerWidth: 300,
|
||||
drawerBackgroundColor: 'transparent',
|
||||
headerMode: 'none',
|
||||
backBehavior: 'none',
|
||||
unmountInactiveRoutes: true,
|
||||
|
|
|
|||
|
|
@ -37,48 +37,61 @@ class DrawerContent extends React.PureComponent {
|
|||
const activeItemKey = state.routes[state.index] ? state.routes[state.index].key : null;
|
||||
|
||||
return (
|
||||
<ScrollView contentContainerStyle={discoverStyle.menuScrollContent}>
|
||||
<SafeAreaView style={discoverStyle.drawerContentContainer} forceInset={{ top: 'always', horizontal: 'never' }}>
|
||||
{groupNames.map(groupName => {
|
||||
const menuItems = groupedMenuItems[groupName];
|
||||
<View style={discoverStyle.drawerContentArea}>
|
||||
<ScrollView contentContainerStyle={discoverStyle.menuScrollContent}>
|
||||
<SafeAreaView
|
||||
style={discoverStyle.drawerContentContainer}
|
||||
forceInset={{ top: 'always', horizontal: 'never' }}
|
||||
>
|
||||
{groupNames.map(groupName => {
|
||||
const menuItems = groupedMenuItems[groupName];
|
||||
|
||||
return (
|
||||
<View key={groupName} style={discoverStyle.menuGroup}>
|
||||
{groupNames[3] !== groupName && (
|
||||
<Text key={`${groupName}-title`} style={discoverStyle.menuGroupName}>
|
||||
{groupName}
|
||||
</Text>
|
||||
)}
|
||||
{menuItems.map(item => {
|
||||
const focused =
|
||||
activeItemKey === item.route ||
|
||||
(activeItemKey === Constants.FULL_ROUTE_NAME_DISCOVER &&
|
||||
item.route === Constants.DRAWER_ROUTE_DISCOVER) ||
|
||||
(activeItemKey === Constants.FULL_ROUTE_NAME_WALLET &&
|
||||
item.route === Constants.DRAWER_ROUTE_WALLET);
|
||||
return (
|
||||
<TouchableOpacity
|
||||
accessible
|
||||
accessibilityLabel={item.label}
|
||||
style={[discoverStyle.menuItemTouchArea, focused ? discoverStyle.menuItemTouchAreaFocused : null]}
|
||||
key={item.label}
|
||||
onPress={() => navigation.navigate({ routeName: item.route })}
|
||||
delayPressIn={0}
|
||||
>
|
||||
<View style={discoverStyle.menuItemIcon}>
|
||||
<Icon name={item.icon} size={16} solid={item.solid} color={focused ? activeTintColor : null} />
|
||||
</View>
|
||||
<Text style={[discoverStyle.menuItem, focused ? discoverStyle.menuItemFocused : null]}>
|
||||
{item.label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</SafeAreaView>
|
||||
</ScrollView>
|
||||
return (
|
||||
<View key={groupName} style={discoverStyle.menuGroup}>
|
||||
{groupNames[3] !== groupName && (
|
||||
<Text key={`${groupName}-title`} style={discoverStyle.menuGroupName}>
|
||||
{groupName}
|
||||
</Text>
|
||||
)}
|
||||
{menuItems.map(item => {
|
||||
const focused =
|
||||
activeItemKey === item.route ||
|
||||
(activeItemKey === Constants.FULL_ROUTE_NAME_DISCOVER &&
|
||||
item.route === Constants.DRAWER_ROUTE_DISCOVER) ||
|
||||
(activeItemKey === Constants.FULL_ROUTE_NAME_WALLET &&
|
||||
item.route === Constants.DRAWER_ROUTE_WALLET);
|
||||
return (
|
||||
<TouchableOpacity
|
||||
accessible
|
||||
accessibilityLabel={item.label}
|
||||
style={[
|
||||
discoverStyle.menuItemTouchArea,
|
||||
focused ? discoverStyle.menuItemTouchAreaFocused : null,
|
||||
]}
|
||||
key={item.label}
|
||||
onPress={() => navigation.navigate({ routeName: item.route })}
|
||||
delayPressIn={0}
|
||||
>
|
||||
<View style={discoverStyle.menuItemIcon}>
|
||||
<Icon
|
||||
name={item.icon}
|
||||
size={16}
|
||||
solid={item.solid}
|
||||
color={focused ? activeTintColor : null}
|
||||
/>
|
||||
</View>
|
||||
<Text style={[discoverStyle.menuItem, focused ? discoverStyle.menuItemFocused : null]}>
|
||||
{item.label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</SafeAreaView>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,10 @@ const discoverStyle = StyleSheet.create({
|
|||
flex: 1,
|
||||
backgroundColor: Colors.PageBackground,
|
||||
},
|
||||
drawerContentArea: {
|
||||
flex: 1,
|
||||
backgroundColor: Colors.White,
|
||||
},
|
||||
drawerContentContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue