diff --git a/app/containers/List/ListContainer.js b/app/containers/List/ListContainer.tsx
similarity index 78%
rename from app/containers/List/ListContainer.js
rename to app/containers/List/ListContainer.tsx
index f1be3705a..dac760472 100644
--- a/app/containers/List/ListContainer.js
+++ b/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
(
));
-ListContainer.propTypes = {
- children: PropTypes.array.isRequired
-};
-
ListContainer.displayName = 'List.Container';
export default withTheme(ListContainer);
diff --git a/app/containers/List/ListHeader.js b/app/containers/List/ListHeader.tsx
similarity index 73%
rename from app/containers/List/ListHeader.js
rename to app/containers/List/ListHeader.tsx
index 1166e25bd..54d8b009b 100644
--- a/app/containers/List/ListHeader.js
+++ b/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) => (
{translateTitle ? I18n.t(title) : title}
));
-ListHeader.propTypes = {
- title: PropTypes.string,
- theme: PropTypes.string,
- translateTitle: PropTypes.bool
-};
-
-ListHeader.defaultProps = {
- translateTitle: true
-};
-
ListHeader.displayName = 'List.Header';
export default withTheme(ListHeader);
diff --git a/app/containers/List/ListIcon.js b/app/containers/List/ListIcon.tsx
similarity index 69%
rename from app/containers/List/ListIcon.js
rename to app/containers/List/ListIcon.tsx
index 44941f2ca..2fc41e850 100644
--- a/app/containers/List/ListIcon.js
+++ b/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) => (
));
-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);
diff --git a/app/containers/List/ListInfo.js b/app/containers/List/ListInfo.tsx
similarity index 73%
rename from app/containers/List/ListInfo.js
rename to app/containers/List/ListInfo.tsx
index e0cb9eae7..5f75258e0 100644
--- a/app/containers/List/ListInfo.js
+++ b/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) => (
{translateInfo ? I18n.t(info) : info}
));
-ListInfo.propTypes = {
- info: PropTypes.string,
- theme: PropTypes.string,
- translateInfo: PropTypes.bool
-};
-
-ListInfo.defaultProps = {
- translateInfo: true
-};
-
ListInfo.displayName = 'List.Info';
export default withTheme(ListInfo);
diff --git a/app/containers/List/ListItem.js b/app/containers/List/ListItem.tsx
similarity index 67%
rename from app/containers/List/ListItem.js
rename to app/containers/List/ListItem.tsx
index aa3ecbdf0..fa943da0d 100644
--- a/app/containers/List/ListItem.js
+++ b/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
-}) => (
-
+ title, subtitle, disabled, testID, left, right, color, theme, fontScale, alert, translateTitle = true, translateSubtitle = true, showActionIndicator = false
+}: IListItemContent) => (
+
{left
? (
@@ -92,9 +105,16 @@ const Content = React.memo(({
));
-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) => (
onPress(props.title)}
style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }}
@@ -106,7 +126,13 @@ const Button = React.memo(({
));
-const ListItem = React.memo(({ ...props }) => {
+interface IListItem {
+ onPress: Function;
+ theme: string;
+ backgroundColor: string;
+}
+
+const ListItem = React.memo(({ ...props }: IListItem) => {
if (props.onPress) {
return ;
}
@@ -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));
diff --git a/app/containers/List/ListSection.js b/app/containers/List/ListSection.tsx
similarity index 74%
rename from app/containers/List/ListSection.js
rename to app/containers/List/ListSection.tsx
index 8237190e0..105ac5d1b 100644
--- a/app/containers/List/ListSection.js
+++ b/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) => (
{title ? : null}
{children}
));
-ListSection.propTypes = {
- children: PropTypes.array.isRequired,
- title: PropTypes.string,
- translateTitle: PropTypes.bool
-};
-
ListSection.displayName = 'List.Section';
export default withTheme(ListSection);
diff --git a/app/containers/List/ListSeparator.js b/app/containers/List/ListSeparator.tsx
similarity index 72%
rename from app/containers/List/ListSeparator.js
rename to app/containers/List/ListSeparator.tsx
index 59cd3580c..39a30a9d7 100644
--- a/app/containers/List/ListSeparator.js
+++ b/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) => (
(
/>
));
-ListSeparator.propTypes = {
- style: PropTypes.object,
- theme: PropTypes.string
-};
-
ListSeparator.displayName = 'List.Separator';
export default withTheme(ListSeparator);
diff --git a/app/containers/List/constants.js b/app/containers/List/constants.ts
similarity index 100%
rename from app/containers/List/constants.js
rename to app/containers/List/constants.ts
diff --git a/app/containers/List/index.js b/app/containers/List/index.ts
similarity index 100%
rename from app/containers/List/index.js
rename to app/containers/List/index.ts
diff --git a/app/containers/List/styles.js b/app/containers/List/styles.ts
similarity index 100%
rename from app/containers/List/styles.js
rename to app/containers/List/styles.ts