LBRYCommunity/lbry-react-native
1
0
Fork 0
Code Issues Pull requests 12 Projects Releases Packages Wiki Activity

use react-navigation-stack module

Browse source
This commit is contained in:
Akinwale Ariwodola 2019-09-23 17:47:30 +01:00
parent 76cc8eaea1
commit 23cf8b15bc
5 changed files with 77 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
package-lock.json generated
View file

@ -8125,9 +8125,9 @@
} }
}, },
"react-native-gesture-handler": { "react-native-gesture-handler": {
"version": "1.1.0", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.1.0.tgz", "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.3.0.tgz",
"integrity": "sha512-E9IKHpmL+sz/iCYkUriTUjBaQBORWV+oheYPQleADkxjo2sYsQfnlyTz4EQYFONkUwJ6WmfTNkYt2/yc5U4Ziw==", "integrity": "sha512-ASRFIXBuKRvqlmwkWJhV8yP2dTpvcqVrLNpd7FKVBFHYWr6SAxjGyO9Ik8w1lAxDhMlRP2IcJ9p9eq5X2WWeLQ==",
"requires": { "requires": {
"hoist-non-react-statics": "^2.3.1", "hoist-non-react-statics": "^2.3.1",
"invariant": "^2.2.2", "invariant": "^2.2.2",
@ -8390,6 +8390,14 @@
"requires": { "requires": {
"react-native-tab-view": "^1.2.0" "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": { "react-navigation-stack": {
"version": "1.5.0", "version": "1.8.1",
"resolved": "https://registry.npmjs.org/react-navigation-stack/-/react-navigation-stack-1.5.0.tgz", "resolved": "https://registry.npmjs.org/react-navigation-stack/-/react-navigation-stack-1.8.1.tgz",
"integrity": "sha512-XwgdQY8c7PguPw/cx6GCRMnYMe6P/izzOpeOfE8g6sWrWW2vs/vwodRb9a820QePhX0I7dkgxdnTSq+o7/R49Q==", "integrity": "sha512-XOkHuYlQjZKnD4jTU0Ml847sKjpwsJpQ6JX4ZfOq8D0e6fPWXbpYNhvUnzHMHMm+tnbhTqkqP1Umu40Hmx748Q==",
"requires": { "requires": {
"prop-types": "^15.7.2" "prop-types": "^15.7.2"
} }

3
package.json
View file

@ -25,7 +25,7 @@
"react-native-exception-handler": "2.9.0", "react-native-exception-handler": "2.9.0",
"react-native-fast-image": "^6.1.1", "react-native-fast-image": "^6.1.1",
"react-native-fs": "^2.13.3", "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-image-zoom-viewer": "^2.2.5",
"react-native-password-strength-meter": "^0.0.2", "react-native-password-strength-meter": "^0.0.2",
"react-native-phone-input": "lbryio/react-native-phone-input", "react-native-phone-input": "lbryio/react-native-phone-input",
@ -36,6 +36,7 @@
"react-navigation": "^3.11.0", "react-navigation": "^3.11.0",
"react-navigation-drawer": "^2.2.2", "react-navigation-drawer": "^2.2.2",
"react-navigation-redux-helpers": "^3.0.2", "react-navigation-redux-helpers": "^3.0.2",
"react-navigation-stack": "^1.8.1",
"react-redux": "^5.0.3", "react-redux": "^5.0.3",
"redux": "^4.0.4", "redux": "^4.0.4",
"redux-persist": "^5.10.0", "redux-persist": "^5.10.0",

4
src/component/AppNavigator.js
View file

@ -18,8 +18,9 @@ import SubscriptionsPage from 'page/subscriptions';
import TransactionHistoryPage from 'page/transactionHistory'; import TransactionHistoryPage from 'page/transactionHistory';
import VerificationScreen from 'page/verification'; import VerificationScreen from 'page/verification';
import WalletPage from 'page/wallet'; import WalletPage from 'page/wallet';
import { createStackNavigator, NavigationActions } from 'react-navigation'; import { NavigationActions } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer'; import { createDrawerNavigator } from 'react-navigation-drawer';
import { createStackNavigator } from 'react-navigation-stack';
import { import {
createReduxContainer, createReduxContainer,
createReactNavigationReduxMiddleware, createReactNavigationReduxMiddleware,
@ -210,6 +211,7 @@ const drawer = createDrawerNavigator(
}, },
{ {
drawerWidth: 300, drawerWidth: 300,
drawerBackgroundColor: 'transparent',
headerMode: 'none', headerMode: 'none',
backBehavior: 'none', backBehavior: 'none',
unmountInactiveRoutes: true, unmountInactiveRoutes: true,

95
src/component/drawerContent/view.js
View file

@ -37,48 +37,61 @@ class DrawerContent extends React.PureComponent {
const activeItemKey = state.routes[state.index] ? state.routes[state.index].key : null; const activeItemKey = state.routes[state.index] ? state.routes[state.index].key : null;
return ( return (
<ScrollView contentContainerStyle={discoverStyle.menuScrollContent}> <View style={discoverStyle.drawerContentArea}>
<SafeAreaView style={discoverStyle.drawerContentContainer} forceInset={{ top: 'always', horizontal: 'never' }}> <ScrollView contentContainerStyle={discoverStyle.menuScrollContent}>
{groupNames.map(groupName => { <SafeAreaView
const menuItems = groupedMenuItems[groupName]; style={discoverStyle.drawerContentContainer}
forceInset={{ top: 'always', horizontal: 'never' }}
>
{groupNames.map(groupName => {
const menuItems = groupedMenuItems[groupName];
return ( return (
<View key={groupName} style={discoverStyle.menuGroup}> <View key={groupName} style={discoverStyle.menuGroup}>
{groupNames[3] !== groupName && ( {groupNames[3] !== groupName && (
<Text key={`${groupName}-title`} style={discoverStyle.menuGroupName}> <Text key={`${groupName}-title`} style={discoverStyle.menuGroupName}>
{groupName} {groupName}
</Text> </Text>
)} )}
{menuItems.map(item => { {menuItems.map(item => {
const focused = const focused =
activeItemKey === item.route || activeItemKey === item.route ||
(activeItemKey === Constants.FULL_ROUTE_NAME_DISCOVER && (activeItemKey === Constants.FULL_ROUTE_NAME_DISCOVER &&
item.route === Constants.DRAWER_ROUTE_DISCOVER) || item.route === Constants.DRAWER_ROUTE_DISCOVER) ||
(activeItemKey === Constants.FULL_ROUTE_NAME_WALLET && (activeItemKey === Constants.FULL_ROUTE_NAME_WALLET &&
item.route === Constants.DRAWER_ROUTE_WALLET); item.route === Constants.DRAWER_ROUTE_WALLET);
return ( return (
<TouchableOpacity <TouchableOpacity
accessible accessible
accessibilityLabel={item.label} accessibilityLabel={item.label}
style={[discoverStyle.menuItemTouchArea, focused ? discoverStyle.menuItemTouchAreaFocused : null]} style={[
key={item.label} discoverStyle.menuItemTouchArea,
onPress={() => navigation.navigate({ routeName: item.route })} focused ? discoverStyle.menuItemTouchAreaFocused : null,
delayPressIn={0} ]}
> key={item.label}
<View style={discoverStyle.menuItemIcon}> onPress={() => navigation.navigate({ routeName: item.route })}
<Icon name={item.icon} size={16} solid={item.solid} color={focused ? activeTintColor : null} /> delayPressIn={0}
</View> >
<Text style={[discoverStyle.menuItem, focused ? discoverStyle.menuItemFocused : null]}> <View style={discoverStyle.menuItemIcon}>
{item.label} <Icon
</Text> name={item.icon}
</TouchableOpacity> size={16}
); solid={item.solid}
})} color={focused ? activeTintColor : null}
</View> />
); </View>
})} <Text style={[discoverStyle.menuItem, focused ? discoverStyle.menuItemFocused : null]}>
</SafeAreaView> {item.label}
</ScrollView> </Text>
</TouchableOpacity>
);
})}
</View>
);
})}
</SafeAreaView>
</ScrollView>
</View>
); );
} }
} }

4
src/styles/discover.js
View file

@ -22,6 +22,10 @@ const discoverStyle = StyleSheet.create({
flex: 1, flex: 1,
backgroundColor: Colors.PageBackground, backgroundColor: Colors.PageBackground,
}, },
drawerContentArea: {
flex: 1,
backgroundColor: Colors.White,
},
drawerContentContainer: { drawerContentContainer: {
flex: 1, flex: 1,
}, },