diff --git a/src/components/Tabbar/CustomTabBar.js b/src/components/Tabbar/CustomTabBar.tsx
similarity index 78%
rename from src/components/Tabbar/CustomTabBar.js
rename to src/components/Tabbar/CustomTabBar.tsx
index c9ddaa5..797257e 100644
--- a/src/components/Tabbar/CustomTabBar.js
+++ b/src/components/Tabbar/CustomTabBar.tsx
@@ -17,8 +17,6 @@
* along with Campus INSAT. If not, see .
*/
-// @flow
-
import * as React from 'react';
import {Animated} from 'react-native';
import {withTheme} from 'react-native-paper';
@@ -26,40 +24,40 @@ import {Collapsible} from 'react-navigation-collapsible';
import {StackNavigationProp} from '@react-navigation/stack';
import TabIcon from './TabIcon';
import TabHomeIcon from './TabHomeIcon';
-import type {CustomThemeType} from '../../managers/ThemeManager';
type RouteType = {
- name: string,
- key: string,
- params: {collapsible: Collapsible},
+ name: string;
+ key: string;
+ params: {collapsible: Collapsible};
state: {
- index: number,
- routes: Array,
- },
+ index: number;
+ routes: Array;
+ };
};
type PropsType = {
state: {
- index: number,
- routes: Array,
- },
+ index: number;
+ routes: Array;
+ };
descriptors: {
[key: string]: {
options: {
- tabBarLabel: string,
- title: string,
- },
- },
- },
- navigation: StackNavigationProp,
- theme: CustomThemeType,
+ tabBarLabel: string;
+ title: string;
+ };
+ };
+ };
+ navigation: StackNavigationProp;
+ theme: ReactNativePaper.Theme;
};
type StateType = {
- // eslint-disable-next-line flowtype/no-weak-types
- translateY: any,
+ translateY: any;
};
+type validRoutes = 'proxiwash' | 'services' | 'planning' | 'planex';
+
const TAB_ICONS = {
proxiwash: 'tshirt-crew',
services: 'account-circle',
@@ -70,8 +68,8 @@ const TAB_ICONS = {
class CustomTabBar extends React.Component {
static TAB_BAR_HEIGHT = 48;
- constructor() {
- super();
+ constructor(props: PropsType) {
+ super(props);
this.state = {
translateY: new Animated.Value(0),
};
@@ -86,13 +84,9 @@ class CustomTabBar extends React.Component {
*/
onItemPress(route: RouteType, currentIndex: number, destIndex: number) {
const {navigation} = this.props;
- const event = navigation.emit({
- type: 'tabPress',
- target: route.key,
- canPreventDefault: true,
- });
- if (currentIndex !== destIndex && !event.defaultPrevented)
+ if (currentIndex !== destIndex) {
navigation.navigate(route.name);
+ }
}
/**
@@ -102,13 +96,9 @@ class CustomTabBar extends React.Component {
*/
onItemLongPress(route: RouteType) {
const {navigation} = this.props;
- const event = navigation.emit({
- type: 'tabLongPress',
- target: route.key,
- canPreventDefault: true,
- });
- if (route.name === 'home' && !event.defaultPrevented)
+ if (route.name === 'home') {
navigation.navigate('game-start');
+ }
}
/**
@@ -126,11 +116,13 @@ class CustomTabBar extends React.Component {
* @param focused
* @returns {null}
*/
- getTabBarIcon = (route: RouteType, focused: boolean): React.Node => {
- let icon = TAB_ICONS[route.name];
+ getTabBarIcon = (route: RouteType, focused: boolean) => {
+ let icon = TAB_ICONS[route.name as validRoutes];
icon = focused ? icon : `${icon}-outline`;
- if (route.name !== 'home') return icon;
- return null;
+ if (route.name !== 'home') {
+ return icon;
+ }
+ return '';
};
/**
@@ -141,14 +133,18 @@ class CustomTabBar extends React.Component {
* @param index The index of the current route
* @returns {*}
*/
- getRenderIcon = (route: RouteType, index: number): React.Node => {
+ getRenderIcon = (route: RouteType, index: number) => {
const {props} = this;
const {state} = props;
const {options} = props.descriptors[route.key];
let label;
- if (options.tabBarLabel != null) label = options.tabBarLabel;
- else if (options.title != null) label = options.title;
- else label = route.name;
+ if (options.tabBarLabel != null) {
+ label = options.tabBarLabel;
+ } else if (options.title != null) {
+ label = options.title;
+ } else {
+ label = route.name;
+ }
const onPress = () => {
this.onItemPress(route, state.index, index);
@@ -186,7 +182,7 @@ class CustomTabBar extends React.Component {
);
};
- getIcons(): React.Node {
+ getIcons() {
const {props} = this;
return props.state.routes.map(this.getRenderIcon);
}
@@ -209,14 +205,12 @@ class CustomTabBar extends React.Component {
}
};
- render(): React.Node {
+ render() {
const {props, state} = this;
props.navigation.addListener('state', this.onRouteChange);
const icons = this.getIcons();
return (
- // $FlowFixMe
.
*/
-// @flow
-
import * as React from 'react';
import {Image, View} from 'react-native';
import {FAB} from 'react-native-paper';
import * as Animatable from 'react-native-animatable';
-import FOCUSED_ICON from '../../../assets/tab-icon.png';
-import UNFOCUSED_ICON from '../../../assets/tab-icon-outline.png';
+const FOCUSED_ICON = require('../../../assets/tab-icon.png');
+const UNFOCUSED_ICON = require('../../../assets/tab-icon-outline.png');
type PropsType = {
- focused: boolean,
- onPress: () => void,
- onLongPress: () => void,
- tabBarHeight: number,
+ focused: boolean;
+ onPress: () => void;
+ onLongPress: () => void;
+ tabBarHeight: number;
};
const AnimatedFAB = Animatable.createAnimatableComponent(FAB);
@@ -44,6 +42,7 @@ class TabHomeIcon extends React.Component {
Animatable.initializeRegistryWithDefinitions({
fabFocusIn: {
'0': {
+ // @ts-ignore
scale: 1,
translateY: 0,
},
@@ -58,6 +57,7 @@ class TabHomeIcon extends React.Component {
},
fabFocusOut: {
'0': {
+ // @ts-ignore
scale: 1.1,
translateY: -6,
},
@@ -74,13 +74,7 @@ class TabHomeIcon extends React.Component {
return nextProps.focused !== focused;
}
- getIconRender = ({
- size,
- color,
- }: {
- size: number,
- color: string,
- }): React.Node => {
+ getIconRender = ({size, color}: {size: number; color: string}) => {
const {focused} = this.props;
return (
{
);
};
- render(): React.Node {
+ render() {
const {props} = this;
return (
.
*/
-// @flow
-
import * as React from 'react';
import {View} from 'react-native';
import {TouchableRipple, withTheme} from 'react-native-paper';
-import type {MaterialCommunityIconsGlyphs} from 'react-native-vector-icons/MaterialCommunityIcons';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import * as Animatable from 'react-native-animatable';
-import type {CustomThemeType} from '../../managers/ThemeManager';
type PropsType = {
- focused: boolean,
- color: string,
- label: string,
- icon: MaterialCommunityIconsGlyphs,
- onPress: () => void,
- onLongPress: () => void,
- theme: CustomThemeType,
- extraData: null | boolean | number | string,
+ focused: boolean;
+ color: string;
+ label: string;
+ icon: string;
+ onPress: () => void;
+ onLongPress: () => void;
+ theme: ReactNativePaper.Theme;
+ extraData: null | boolean | number | string;
};
/**
@@ -49,6 +45,7 @@ class TabIcon extends React.Component {
Animatable.initializeRegistryWithDefinitions({
focusIn: {
'0': {
+ // @ts-ignore
scale: 1,
translateY: 0,
},
@@ -63,6 +60,7 @@ class TabIcon extends React.Component {
},
focusOut: {
'0': {
+ // @ts-ignore
scale: 1.2,
translateY: 6,
},
@@ -88,7 +86,7 @@ class TabIcon extends React.Component {
);
}
- render(): React.Node {
+ render() {
const {props} = this;
return (
{
style={{
flex: 1,
justifyContent: 'center',
- borderRadius: 10
+ borderRadius: 10,
}}>