[IMPROVE] migrate the HeaderButton component and the colors constant

app/constants/colors.ts

@@ -19,7 +19,7 @@ const mentions = {
 	mentionOtherColor: '#F3BE08'
 };
 
-export const themes = {
+export const themes: any = {
 	light: {
 		backgroundColor: '#ffffff',
 		focusedBackground: '#ffffff',

app/containers/HeaderButton/Common.tsx

@@ -1,27 +1,30 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { isIOS } from '../../utils/deviceInfo';
 import I18n from '../../i18n';
 import Container from './HeaderButtonContainer';
 import Item from './HeaderButtonItem';
 
+interface IHeaderButtonCommon {
+	navigation: any;
+	onPress(): void;
+	testID: string;
+}
+
 // Left
-export const Drawer = React.memo(({ navigation, testID, ...props }) => (
+export const Drawer = React.memo(({ navigation, testID, ...props }: Partial<IHeaderButtonCommon>) => (
 	<Container left>
 		<Item iconName='hamburguer' onPress={() => navigation.toggleDrawer()} testID={testID} {...props} />
 	</Container>
 ));
 
-export const CloseModal = React.memo(({
+export const CloseModal = React.memo(({navigation, testID, onPress = () => navigation.pop(), ...props}: IHeaderButtonCommon) => (
-	navigation, testID, onPress = () => navigation.pop(), ...props
-}) => (
 	<Container left>
 		<Item iconName='close' onPress={onPress} testID={testID} {...props} />
 	</Container>
 ));
 
-export const CancelModal = React.memo(({ onPress, testID }) => (
+export const CancelModal = React.memo(({ onPress, testID }: Partial<IHeaderButtonCommon>) => (
 	<Container left>
 		{isIOS
 			? <Item title={I18n.t('Cancel')} onPress={onPress} testID={testID} />
@@ -31,54 +34,24 @@ export const CancelModal = React.memo(({ onPress, testID }) => (
 ));
 
 // Right
-export const More = React.memo(({ onPress, testID }) => (
+export const More = React.memo(({ onPress, testID }: Partial<IHeaderButtonCommon>) => (
 	<Container>
 		<Item iconName='kebab' onPress={onPress} testID={testID} />
 	</Container>
 ));
 
-export const Download = React.memo(({ onPress, testID, ...props }) => (
+export const Download = React.memo(({ onPress, testID, ...props }: Partial<IHeaderButtonCommon>) => (
 	<Container>
 		<Item iconName='download' onPress={onPress} testID={testID} {...props} />
 	</Container>
 ));
 
-export const Preferences = React.memo(({ onPress, testID, ...props }) => (
+export const Preferences = React.memo(({ onPress, testID, ...props }: Partial<IHeaderButtonCommon>) => (
 	<Container>
 		<Item iconName='settings' onPress={onPress} testID={testID} {...props} />
 	</Container>
 ));
 
-export const Legal = React.memo(({ navigation, testID }) => (
+export const Legal = React.memo(({ navigation, testID }: Partial<IHeaderButtonCommon>) => (
 	<More onPress={() => navigation.navigate('LegalView')} testID={testID} />
 ));
-
-Drawer.propTypes = {
-	navigation: PropTypes.object.isRequired,
-	testID: PropTypes.string.isRequired
-};
-CloseModal.propTypes = {
-	navigation: PropTypes.object.isRequired,
-	testID: PropTypes.string.isRequired,
-	onPress: PropTypes.func
-};
-CancelModal.propTypes = {
-	onPress: PropTypes.func.isRequired,
-	testID: PropTypes.string.isRequired
-};
-More.propTypes = {
-	onPress: PropTypes.func.isRequired,
-	testID: PropTypes.string.isRequired
-};
-Download.propTypes = {
-	onPress: PropTypes.func.isRequired,
-	testID: PropTypes.string.isRequired
-};
-Preferences.propTypes = {
-	onPress: PropTypes.func.isRequired,
-	testID: PropTypes.string.isRequired
-};
-Legal.propTypes = {
-	navigation: PropTypes.object.isRequired,
-	testID: PropTypes.string.isRequired
-};

app/containers/HeaderButton/HeaderButtonContainer.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import PropTypes from 'prop-types';
+
+interface IHeaderButtonContainer {
+	children: JSX.Element;
+	left?: boolean;
+}
 
 const styles = StyleSheet.create({
 	container: {
@@ -16,21 +20,12 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Container = ({ children, left }) => (
+const Container = ({ children, left }: IHeaderButtonContainer) => (
 	<View style={[styles.container, left ? styles.left : styles.right]}>
 		{children}
 	</View>
 );
 
-Container.propTypes = {
-	children: PropTypes.arrayOf(PropTypes.element),
-	left: PropTypes.bool
-};
-
-Container.defaultProps = {
-	left: false
-};
-
 Container.displayName = 'HeaderButton.Container';
 
 export default Container;

app/containers/HeaderButton/HeaderButtonItem.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Text, StyleSheet, Platform } from 'react-native';
-import PropTypes from 'prop-types';
 import Touchable from 'react-native-platform-touchable';
 
 import { CustomIcon } from '../../lib/Icons';
@@ -8,6 +7,15 @@ import { withTheme } from '../../theme';
 import { themes } from '../../constants/colors';
 import sharedStyles from '../../views/Styles';
 
+interface IHeaderButtonItem {
+	title: string;
+	iconName: string;
+	onPress(): void;
+	testID: string;
+	theme: string;
+	badge(): void;
+}
+
 export const BUTTON_HIT_SLOP = {
 	top: 5, right: 5, bottom: 5, left: 5
 };
@@ -29,9 +37,7 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Item = ({
+const Item = ({title, iconName, onPress, testID, theme, badge}: IHeaderButtonItem) => (
-	title, iconName, onPress, testID, theme, badge
-}) => (
 	<Touchable onPress={onPress} testID={testID} hitSlop={BUTTON_HIT_SLOP} style={styles.container}>
 		<>
 			{
@@ -44,15 +50,6 @@ const Item = ({
 	</Touchable>
 );
 
-Item.propTypes = {
-	onPress: PropTypes.func.isRequired,
-	title: PropTypes.string,
-	iconName: PropTypes.string,
-	testID: PropTypes.string,
-	theme: PropTypes.string,
-	badge: PropTypes.func
-};
-
 Item.displayName = 'HeaderButton.Item';
 
 export default withTheme(Item);