lbry-android-sdk/app/src/component/AppNavigator.js

137 lines
4.3 KiB
JavaScript
Raw Normal View History

import React from 'react';
import DiscoverPage from '../page/discover';
import FilePage from '../page/file';
import SearchPage from '../page/search';
import SettingsPage from '../page/settings';
import AboutPage from '../page/about';
import SplashScreen from '../page/splash';
import SearchInput from '../component/searchInput';
import {
addNavigationHelpers,
DrawerNavigator,
StackNavigator,
NavigationActions
} from 'react-navigation';
import { connect } from 'react-redux';
import { addListener } from '../utils/redux';
import { AppState, BackHandler, NativeModules, TextInput } from 'react-native';
import { SETTINGS } from 'lbry-redux';
import { makeSelectClientSetting } from '../redux/selectors/settings';
import Feather from 'react-native-vector-icons/Feather';
import discoverStyle from '../styles/discover';
import searchStyle from '../styles/search';
const discoverStack = StackNavigator({
Discover: {
screen: DiscoverPage,
navigationOptions: ({ navigation }) => ({
title: 'Discover',
headerLeft: <Feather name="menu" size={24} style={discoverStyle.drawerHamburger} onPress={() => navigation.navigate('DrawerOpen')} />,
headerRight: <Feather name="search" size={24} style={discoverStyle.rightHeaderIcon} onPress={() => navigation.navigate('Search')} />
})
},
File: {
screen: FilePage,
navigationOptions: {
header: null,
drawerLockMode: 'locked-closed'
}
},
Search: {
screen: SearchPage,
navigationOptions: ({ navigation }) => ({
drawerLockMode: 'locked-closed',
headerTitle: <SearchInput style={searchStyle.searchInput} />,
headerRight: <Feather name="x" size={24} style={discoverStyle.rightHeaderIcon} onPress={() => navigation.dispatch(NavigationActions.back())} />
})
}
}, {
headerMode: 'screen',
});
const drawer = DrawerNavigator({
Discover: { screen: discoverStack },
Settings: { screen: SettingsPage, navigationOptions: { drawerLockMode: 'locked-closed' } },
About: { screen: AboutPage, navigationOptions: { drawerLockMode: 'locked-closed' } }
}, {
drawerWidth: 300,
headerMode: 'none'
});
export const AppNavigator = new StackNavigator({
Splash: {
screen: SplashScreen,
navigationOptions: {
drawerLockMode: 'locked-closed'
}
},
Main: {
screen: drawer
}
}, {
headerMode: 'none'
});
class AppWithNavigationState extends React.Component {
componentWillMount() {
AppState.addEventListener('change', this._handleAppStateChange);
BackHandler.addEventListener('hardwareBackPress', function() {
const { dispatch, navigation, nav } = this.props;
// There should be a better way to check this
if (nav.routes.length > 1) {
const subRoutes = nav.routes[1].routes[0].routes;
const lastRoute = subRoutes[subRoutes.length - 1];
if (['About', 'Settings'].indexOf(lastRoute.key) > -1) {
dispatch({ type: 'Navigation/BACK' });
return true;
}
if (nav.routes[1].routeName === 'Main') {
if (nav.routes[1].routes[0].routes[0].index > 0) {
dispatch({ type: 'Navigation/BACK' });
return true;
}
}
}
return false;
}.bind(this));
}
componentWillUnmount() {
AppState.removeEventListener('change', this._handleAppStateChange);
BackHandler.removeEventListener('hardwareBackPress');
}
_handleAppStateChange = (nextAppState) => {
// this is properly handled in native code at the moment
/*const { keepDaemonRunning } = this.props;
if (AppState.currentState &&
AppState.currentState.match(/inactive|background/) &&
NativeModules.DaemonServiceControl) {
if (!keepDaemonRunning) {
// terminate the daemon background service when is suspended / inactive
//NativeModules.DaemonServiceControl.stopService();
}
}*/
}
render() {
const { dispatch, nav } = this.props;
return (
<AppNavigator
navigation={addNavigationHelpers({
dispatch,
state: nav,
addListener,
})}
/>
);
}
}
const mapStateToProps = state => ({
nav: state.nav,
keepDaemonRunning: makeSelectClientSetting(SETTINGS.KEEP_DAEMON_RUNNING)(state),
showNsfw: makeSelectClientSetting(SETTINGS.SHOW_NSFW)(state)
});
export default connect(mapStateToProps)(AppWithNavigationState);