[IMPROVE] migrate the List component

app/containers/List/ListContainer.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { ScrollView, StyleSheet } from 'react-native';
-import PropTypes from 'prop-types';
 import { withTheme } from '../../theme';
 import scrollPersistTaps from '../../utils/scrollPersistTaps';
 
@@ -10,7 +9,11 @@ const styles = StyleSheet.create({
 	}
 });
 
-const ListContainer = React.memo(({ children, ...props }) => (
+type TListContainer = {
+	children: JSX.Element;
+}
+const ListContainer = React.memo(({ children, ...props }: TListContainer) => (
+	// @ts-ignore
 	<ScrollView
 		contentContainerStyle={styles.container}
 		scrollIndicatorInsets={{ right: 1 }} // https://github.com/facebook/react-native/issues/26610#issuecomment-539843444
@@ -21,10 +24,6 @@ const ListContainer = React.memo(({ children, ...props }) => (
 	</ScrollView>
 ));
 
-ListContainer.propTypes = {
-	children: PropTypes.array.isRequired
-};
-
 ListContainer.displayName = 'List.Container';
 
 export default withTheme(ListContainer);

app/containers/List/ListHeader.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
-import PropTypes from 'prop-types';
 
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../constants/colors';
@@ -19,22 +18,18 @@ const styles = StyleSheet.create({
 	}
 });
 
-const ListHeader = React.memo(({ title, theme, translateTitle }) => (
+interface IListHeader {
+	title: string;
+	theme: string;
+	translateTitle: boolean;
+}
+
+const ListHeader = React.memo(({ title, theme, translateTitle = true }: IListHeader) => (
 	<View style={styles.container}>
 		<Text style={[styles.title, { color: themes[theme].infoText }]} numberOfLines={1}>{translateTitle ? I18n.t(title) : title}</Text>
 	</View>
 ));
 
-ListHeader.propTypes = {
-	title: PropTypes.string,
-	theme: PropTypes.string,
-	translateTitle: PropTypes.bool
-};
-
-ListHeader.defaultProps = {
-	translateTitle: true
-};
-
 ListHeader.displayName = 'List.Header';
 
 export default withTheme(ListHeader);

app/containers/List/ListIcon.tsx

@@ -1,12 +1,19 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import PropTypes from 'prop-types';
 
 import { themes } from '../../constants/colors';
 import { CustomIcon } from '../../lib/Icons';
 import { withTheme } from '../../theme';
 import { ICON_SIZE } from './constants';
 
+interface IListIcon {
+	theme: string;
+	name: string;
+	color: string;
+	style: object;
+	testID: string;
+}
+
 const styles = StyleSheet.create({
 	icon: {
 		alignItems: 'center',
@@ -14,13 +21,7 @@ const styles = StyleSheet.create({
 	}
 });
 
-const ListIcon = React.memo(({
-	theme,
-	name,
-	color,
-	style,
-	testID
-}) => (
+const ListIcon = React.memo(({ theme, name, color, style, testID }: IListIcon) => (
 	<View style={[styles.icon, style]}>
 		<CustomIcon
 			name={name}
@@ -31,14 +32,6 @@ const ListIcon = React.memo(({
 	</View>
 ));
 
-ListIcon.propTypes = {
-	theme: PropTypes.string,
-	name: PropTypes.string,
-	color: PropTypes.string,
-	style: PropTypes.object,
-	testID: PropTypes.string
-};
-
 ListIcon.displayName = 'List.Icon';
 
 export default withTheme(ListIcon);

app/containers/List/ListInfo.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
-import PropTypes from 'prop-types';
 
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../constants/colors';
@@ -19,22 +18,18 @@ const styles = StyleSheet.create({
 	}
 });
 
-const ListInfo = React.memo(({ info, translateInfo, theme }) => (
+interface IListHeader {
+	info: string;
+	theme: string;
+	translateInfo: boolean;
+}
+
+const ListInfo = React.memo(({ info, theme, translateInfo = true }: IListHeader) => (
 	<View style={styles.container}>
 		<Text style={[styles.text, { color: themes[theme].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text>
 	</View>
 ));
 
-ListInfo.propTypes = {
-	info: PropTypes.string,
-	theme: PropTypes.string,
-	translateInfo: PropTypes.bool
-};
-
-ListInfo.defaultProps = {
-	translateInfo: true
-};
-
 ListInfo.displayName = 'List.Info';
 
 export default withTheme(ListInfo);

app/containers/List/ListItem.tsx

@@ -1,8 +1,5 @@
 import React from 'react';
-import {
-	View, Text, StyleSheet, I18nManager
-} from 'react-native';
-import PropTypes from 'prop-types';
+import { View, Text, StyleSheet, I18nManager } from 'react-native';
 
 import Touch from '../../utils/touch';
 import { themes } from '../../constants/colors';
@@ -58,10 +55,26 @@ const styles = StyleSheet.create({
 	}
 });
 
+interface IListItemContent {
+	title?: string;
+	subtitle?: string;
+	left?: Function;
+	right?: Function;
+	disabled?: boolean;
+	testID?: string;
+	theme: string;
+	color?: string;
+	translateTitle?: boolean;
+	translateSubtitle?: boolean;
+	showActionIndicator?: boolean;
+	fontScale?: number;
+	alert?: boolean;
+}
+
 const Content = React.memo(({
-	title, subtitle, disabled, testID, left, right, color, theme, translateTitle, translateSubtitle, showActionIndicator, fontScale, alert
-}) => (
-	<View style={[styles.container, disabled && styles.disabled, { height: BASE_HEIGHT * fontScale }]} testID={testID}>
+	title, subtitle, disabled, testID, left, right, color, theme, fontScale, alert, translateTitle = true, translateSubtitle = true, showActionIndicator = false
+}: IListItemContent) => (
+	<View style={[styles.container, disabled && styles.disabled, { height: BASE_HEIGHT * fontScale! }]} testID={testID}>
 		{left
 			? (
 				<View style={styles.leftContainer}>
@@ -92,9 +105,16 @@ const Content = React.memo(({
 	</View>
 ));
 
-const Button = React.memo(({
-	onPress, backgroundColor, underlayColor, ...props
-}) => (
+interface IListItemButton {
+	title?: string;
+	onPress: Function;
+	disabled?: boolean;
+	theme: string;
+	backgroundColor: string;
+	underlayColor?: string;
+}
+
+const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }: IListItemButton) => (
 	<Touch
 		onPress={() => onPress(props.title)}
 		style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }}
@@ -106,7 +126,13 @@ const Button = React.memo(({
 	</Touch>
 ));
 
-const ListItem = React.memo(({ ...props }) => {
+interface IListItem {
+	onPress: Function;
+	theme: string;
+	backgroundColor: string;
+}
+
+const ListItem = React.memo(({ ...props }: IListItem) => {
 	if (props.onPress) {
 		return <Button {...props} />;
 	}
@@ -117,47 +143,6 @@ const ListItem = React.memo(({ ...props }) => {
 	);
 });
 
-ListItem.propTypes = {
-	onPress: PropTypes.func,
-	theme: PropTypes.string,
-	backgroundColor: PropTypes.string
-};
-
 ListItem.displayName = 'List.Item';
 
-Content.propTypes = {
-	title: PropTypes.string.isRequired,
-	subtitle: PropTypes.string,
-	left: PropTypes.func,
-	right: PropTypes.func,
-	disabled: PropTypes.bool,
-	testID: PropTypes.string,
-	theme: PropTypes.string,
-	color: PropTypes.string,
-	translateTitle: PropTypes.bool,
-	translateSubtitle: PropTypes.bool,
-	showActionIndicator: PropTypes.bool,
-	fontScale: PropTypes.number,
-	alert: PropTypes.bool
-};
-
-Content.defaultProps = {
-	translateTitle: true,
-	translateSubtitle: true,
-	showActionIndicator: false
-};
-
-Button.propTypes = {
-	title: PropTypes.string,
-	onPress: PropTypes.func,
-	disabled: PropTypes.bool,
-	theme: PropTypes.string,
-	backgroundColor: PropTypes.string,
-	underlayColor: PropTypes.string
-};
-
-Button.defaultProps = {
-	disabled: false
-};
-
 export default withTheme(withDimensions(ListItem));

app/containers/List/ListSection.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import PropTypes from 'prop-types';
 import { withTheme } from '../../theme';
 import { Header } from '.';
 
@@ -10,19 +9,19 @@ const styles = StyleSheet.create({
 	}
 });
 
-const ListSection = React.memo(({ children, title, translateTitle }) => (
+interface IListSection {
+	children: JSX.Element;
+	title: string;
+	translateTitle: boolean;
+}
+
+const ListSection = React.memo(({ children, title, translateTitle }: IListSection) => (
 	<View style={styles.container}>
 		{title ? <Header {...{ title, translateTitle }} /> : null}
 		{children}
 	</View>
 ));
 
-ListSection.propTypes = {
-	children: PropTypes.array.isRequired,
-	title: PropTypes.string,
-	translateTitle: PropTypes.bool
-};
-
 ListSection.displayName = 'List.Section';
 
 export default withTheme(ListSection);

app/containers/List/ListSeparator.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import PropTypes from 'prop-types';
 
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
@@ -11,8 +10,12 @@ const styles = StyleSheet.create({
 	}
 });
 
+type TListSeparator = {
+	style: object;
+	theme: string;
+}
 
-const ListSeparator = React.memo(({ style, theme }) => (
+const ListSeparator = React.memo(({ style, theme }: TListSeparator) => (
 	<View
 		style={[
 			styles.separator,
@@ -22,11 +25,6 @@ const ListSeparator = React.memo(({ style, theme }) => (
 	/>
 ));
 
-ListSeparator.propTypes = {
-	style: PropTypes.object,
-	theme: PropTypes.string
-};
-
 ListSeparator.displayName = 'List.Separator';
 
 export default withTheme(ListSeparator);