2019-12-04 16:39:53 +00:00
|
|
|
import { StyleSheet } from 'react-native';
|
2019-07-18 17:44:02 +00:00
|
|
|
|
2019-12-04 16:39:53 +00:00
|
|
|
import { analytics, leaveBreadcrumb } from './log';
|
|
|
|
import { themes } from '../constants/colors';
|
2019-07-18 17:44:02 +00:00
|
|
|
|
|
|
|
export const defaultHeader = {
|
2019-12-04 16:39:53 +00:00
|
|
|
headerBackTitle: null
|
|
|
|
};
|
|
|
|
|
|
|
|
export const cardStyle = {
|
|
|
|
backgroundColor: 'rgba(0,0,0,0)'
|
|
|
|
};
|
|
|
|
|
|
|
|
const borderBottom = theme => ({
|
|
|
|
borderBottomWidth: StyleSheet.hairlineWidth,
|
|
|
|
borderBottomColor: themes[theme].headerBorder,
|
|
|
|
elevation: 0
|
|
|
|
});
|
|
|
|
|
|
|
|
export const themedHeader = theme => ({
|
2019-07-18 17:44:02 +00:00
|
|
|
headerStyle: {
|
2019-12-04 16:39:53 +00:00
|
|
|
...borderBottom(theme),
|
|
|
|
backgroundColor: themes[theme].headerBackground
|
2019-07-18 17:44:02 +00:00
|
|
|
},
|
2019-12-04 16:39:53 +00:00
|
|
|
headerTintColor: themes[theme].headerTintColor,
|
|
|
|
headerTitleStyle: { color: themes[theme].headerTitleColor }
|
|
|
|
});
|
2019-07-18 17:44:02 +00:00
|
|
|
|
|
|
|
// gets the current screen from navigation state
|
|
|
|
export const getActiveRouteName = (navigationState) => {
|
|
|
|
if (!navigationState) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
const route = navigationState.routes[navigationState.index];
|
|
|
|
// dive into nested navigators
|
|
|
|
if (route.routes) {
|
|
|
|
return getActiveRouteName(route);
|
|
|
|
}
|
|
|
|
return route.routeName;
|
|
|
|
};
|
|
|
|
|
|
|
|
export const onNavigationStateChange = (prevState, currentState) => {
|
|
|
|
const currentScreen = getActiveRouteName(currentState);
|
|
|
|
const prevScreen = getActiveRouteName(prevState);
|
|
|
|
|
|
|
|
if (prevScreen !== currentScreen) {
|
2019-08-23 13:18:47 +00:00
|
|
|
analytics().setCurrentScreen(currentScreen);
|
|
|
|
leaveBreadcrumb(currentScreen, { type: 'navigation' });
|
2019-07-18 17:44:02 +00:00
|
|
|
}
|
|
|
|
};
|