lpitault/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Allow selecting default screen on application start

Browse source
This commit is contained in:
keplyx 2019-09-12 23:02:28 +02:00
parent 1c772fc9c0
commit 540d94d877
8 changed files with 106 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
App.js
View file

@ -2,7 +2,7 @@
import * as React from 'react';
import {Root, StyleProvider} from 'native-base';
import AppNavigator from './navigation/AppNavigator';
import {createAppContainerWithInitialRoute} from './navigation/AppNavigator';
import ThemeManager from './utils/ThemeManager';
import LocaleManager from './utils/LocaleManager';
import * as Font from 'expo-font';
@ -94,6 +94,7 @@ export default class App extends React.Component<Props, State> {
if (this.state.showIntro) {
return <CustomIntroSlider onDone={() => this.onIntroDone()}/>;
} else {
const AppNavigator = createAppContainerWithInitialRoute(AsyncStorageManager.getInstance().preferences.defaultStartScreen.current);
return (
<Root>
<StyleProvider style={this.state.currentTheme}>

45
navigation/AppNavigator.js
View file

@ -1,7 +1,7 @@
// @flow
import {createAppContainer, createStackNavigator} from 'react-navigation';
import MainTabNavigator from './MainTabNavigator';
import {createMaterialBottomTabNavigatorWithInitialRoute} from './MainTabNavigator';
import SettingsScreen from '../screens/SettingsScreen';
import AboutScreen from '../screens/About/AboutScreen';
import ProximoListScreen from '../screens/Proximo/ProximoListScreen';
@ -15,23 +15,26 @@ import {fromRight} from "react-navigation-transitions";
/**
* Create a stack navigator using the drawer to handle navigation between screens
*/
export default createAppContainer(
createStackNavigator({
Main: MainTabNavigator,
// Drawer: MainDrawerNavigator,
ProximoListScreen: {screen: ProximoListScreen},
SettingsScreen: {screen: SettingsScreen},
AboutScreen: {screen: AboutScreen},
AboutDependenciesScreen: {screen: AboutDependenciesScreen},
SelfMenuScreen: {screen: SelfMenuScreen},
ProxiwashAboutScreen: {screen: ProxiwashAboutScreen},
ProximoAboutScreen: {screen: ProximoAboutScreen},
DebugScreen: {screen: DebugScreen},
},
{
initialRouteName: "Main",
mode: 'card',
headerMode: "none",
transitionConfig: () => fromRight(),
})
);
function createAppContainerWithInitialRoute(initialRoute: string) {
return createAppContainer(
createStackNavigator({
Main: createMaterialBottomTabNavigatorWithInitialRoute(initialRoute),
// Drawer: MainDrawerNavigator,
ProximoListScreen: {screen: ProximoListScreen},
SettingsScreen: {screen: SettingsScreen},
AboutScreen: {screen: AboutScreen},
AboutDependenciesScreen: {screen: AboutDependenciesScreen},
SelfMenuScreen: {screen: SelfMenuScreen},
ProxiwashAboutScreen: {screen: ProxiwashAboutScreen},
ProximoAboutScreen: {screen: ProximoAboutScreen},
DebugScreen: {screen: DebugScreen},
},
{
initialRouteName: "Main",
mode: 'card',
headerMode: "none",
transitionConfig: () => fromRight(),
})
);
}
export {createAppContainerWithInitialRoute};

46
navigation/MainTabNavigator.js
View file

@ -8,6 +8,7 @@ import ProximoMainScreen from '../screens/Proximo/ProximoMainScreen';
import PlanexScreen from '../screens/PlanexScreen';
import CustomMaterialIcon from "../components/CustomMaterialIcon";
import ThemeManager from "../utils/ThemeManager";
import AsyncStorageManager from "../utils/AsyncStorageManager";
const TAB_ICONS = {
Home: 'triangle',
@ -17,25 +18,30 @@ const TAB_ICONS = {
Planex: 'timetable',
};
function createMaterialBottomTabNavigatorWithInitialRoute(initialRoute: string) {
return createMaterialBottomTabNavigator({
Home: {screen: HomeScreen},
Planning: {screen: PlanningScreen,},
Proxiwash: {screen: ProxiwashScreen,},
Proximo: {screen: ProximoMainScreen,},
Planex: {screen: PlanexScreen},
}, {
defaultNavigationOptions: ({navigation}) => ({
tabBarIcon: ({focused, horizontal, tintColor}) => {
let icon = TAB_ICONS[navigation.state.routeName];
export default createMaterialBottomTabNavigator({
Home: {screen: HomeScreen},
Planning: {screen: PlanningScreen,},
Proxiwash: {screen: ProxiwashScreen,},
Proximo: {screen: ProximoMainScreen,},
Planex: {screen: PlanexScreen},
}, {
defaultNavigationOptions: ({navigation}) => ({
tabBarIcon: ({focused, horizontal, tintColor}) => {
let icon = TAB_ICONS[navigation.state.routeName];
return <CustomMaterialIcon icon={icon} color={tintColor}/>;
}
}),
order: ['Proximo', 'Planning', 'Home', 'Proxiwash', 'Planex'],
initialRouteName: initialRoute,
activeColor: '#f0edf6',
inactiveColor: '#4e1108',
backBehavior: 'initialRoute',
barStyle: {backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary},
});
}
export {createMaterialBottomTabNavigatorWithInitialRoute};
return <CustomMaterialIcon icon={icon} color={tintColor}/>;
}
}),
order: ['Proximo', 'Planning', 'Home', 'Proxiwash', 'Planex'],
initialRouteName: 'Home',
activeColor: '#f0edf6',
inactiveColor: '#4e1108',
backBehavior: 'initialRoute',
barStyle: {backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary},
});

1
screens/HomeScreen.js
View file

@ -8,6 +8,7 @@ import CustomMaterialIcon from '../components/CustomMaterialIcon';
import FetchedDataSectionList from "../components/FetchedDataSectionList";
import Autolink from 'react-native-autolink';
import ThemeManager from "../utils/ThemeManager";
import AsyncStorageManager from "../utils/AsyncStorageManager";
const ICON_AMICALE = require('../assets/amicale.png');
const NAME_AMICALE = 'Amicale INSA Toulouse';

46
screens/SettingsScreen.js
View file

@ -32,6 +32,7 @@ type Props = {
type State = {
nightMode: boolean,
proxiwashNotifPickerSelected: string,
startScreenPickerSelected: string,
};
/**
@ -41,6 +42,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
state = {
nightMode: ThemeManager.getNightMode(),
proxiwashNotifPickerSelected: AsyncStorageManager.getInstance().preferences.proxiwashNotifications.current,
startScreenPickerSelected: AsyncStorageManager.getInstance().preferences.defaultStartScreen.current,
};
/**
@ -60,6 +62,19 @@ export default class SettingsScreen extends React.Component<Props, State> {
NotificationsManager.setMachineReminderNotificationTime(intVal);
}
/**
* Save the value for the proxiwash reminder notification time
*
* @param value The value to store
*/
onStartScreenPickerValueChange(value: string) {
let key = AsyncStorageManager.getInstance().preferences.defaultStartScreen.key;
AsyncStorageManager.getInstance().savePref(key, value);
this.setState({
startScreenPickerSelected: value
});
}
/**
* Returns a picker allowing the user to select the proxiwash reminder notification time
*
@ -83,13 +98,35 @@ export default class SettingsScreen extends React.Component<Props, State> {
);
}
/**
* Returns a picker allowing the user to select the start screen
*
* @returns {React.Node}
*/
getStartScreenPicker() {
return (
<Picker
note
mode="dropdown"
style={{width: 120}}
selectedValue={this.state.startScreenPickerSelected}
onValueChange={(value) => this.onStartScreenPickerValueChange(value)}
>
<Picker.Item label={i18n.t('screens.home')} value="Home"/>
<Picker.Item label={i18n.t('screens.planning')} value="Planning"/>
<Picker.Item label={i18n.t('screens.proxiwash')} value="Proxiwash"/>
<Picker.Item label={i18n.t('screens.proximo')} value="Proximo"/>
<Picker.Item label={'Planex'} value="Planex"/>
</Picker>
);
}
/**
* Toggle night mode and save it to preferences
*/
toggleNightMode() {
ThemeManager.getInstance().setNightMode(!this.state.nightMode);
this.setState({nightMode: !this.state.nightMode});
// Alert.alert(i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.restart'));
this.resetStack();
}
@ -133,7 +170,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
{subtitle}
</Text>
</Body>
<Right style={{flex: 1}}>
<Right>
<CheckBox checked={this.state.nightMode}
onPress={() => this.toggleNightMode()}/>
</Right>
@ -167,7 +204,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
</Text>
</Body>
<Right style={{flex: 1}}>
<Right>
{control}
</Right>
</ListItem>
@ -195,10 +232,11 @@ export default class SettingsScreen extends React.Component<Props, State> {
<Content padder>
<Card>
<CardItem header>
<Text>{i18n.t('settingsScreen.appearanceCard')}</Text>
<Text>{i18n.t('settingsScreen.generalCard')}</Text>
</CardItem>
<List>
{this.getToggleItem(() => this.toggleNightMode(), 'theme-light-dark', i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.nightModeSub'))}
{SettingsScreen.getGeneralItem(this.getStartScreenPicker(), 'power', i18n.t('settingsScreen.startScreen'), i18n.t('settingsScreen.startScreenSub'))}
</List>
</Card>
<Card>

4
translations/en.json
View file

@ -36,9 +36,11 @@
}
},
"settingsScreen": {
"appearanceCard": "Appearance",
"generalCard": "General",
"nightMode": "Night Mode",
"nightModeSub": "Switch the app to a dark or light theme",
"startScreen": "Start Screen",
"startScreenSub": "Select which screen to start the app on",
"proxiwashNotifReminder": "Machine running reminder",
"proxiwashNotifReminderSub": "Choose when to send a notification to remind you a machine is running with your laundry",
"proxiwashNotifReminderPicker": {

4
translations/fr.json
View file

@ -36,9 +36,11 @@
}
},
"settingsScreen": {
"appearanceCard": "Apparence",
"generalCard": "Général",
"nightMode": "Mode Nuit",
"nightModeSub": "Passer l'application dans un thème sombre ou clair",
"startScreen": "Écran de démarrage",
"startScreenSub": "Choisissez l'écran utilisé au démarrage",
"proxiwashNotifReminder": "Rappel de machine en cours",
"proxiwashNotifReminderSub": "Choississez quand envoyer une notification pour vous rappeler qu'une machine avec votre linge est en cours",
"proxiwashNotifReminderPicker": {

5
utils/AsyncStorageManager.js
View file

@ -53,6 +53,11 @@ export default class AsyncStorageManager {
key: 'debugUnlocked',
default: '0',
current: '',
},
defaultStartScreen: {
key: 'defaultStartScreen',
default: 'Home',
current: '',
}
};