Fix linter problems caused by react/prop-types

3 files changed, 55 insertions, 13 deletions

diff --git a/gui/src/renderer/components/Modal.tsx b/gui/src/renderer/components/Modal.tsx
index b0a972955d..31eb8eec24 100644
--- a/gui/src/renderer/components/Modal.tsx
+++ b/gui/src/renderer/components/Modal.tsx
@@ -32,7 +32,11 @@ const styles = {
   }),
 };
 
-export const ModalContent: React.FC = ({ children }) => {
+interface IModalContentProps {
+  children?: React.ReactNode;
+}
+
+export const ModalContent: React.FC = (props: IModalContentProps) => {
   return (
     <div
       style={{
@@ -45,12 +49,16 @@ export const ModalContent: React.FC = ({ children }) => {
         right: 0,
         bottom: 0,
       }}>
-      {children}
+      {props.children}
     </div>
   );
 };
 
-const ModalBackground: React.FC = ({ children }) => {
+interface IModalBackgroundProps {
+  children?: React.ReactNode;
+}
+
+const ModalBackground: React.FC = (props: IModalBackgroundProps) => {
   return (
     <div
       style={{
@@ -64,13 +72,17 @@ const ModalBackground: React.FC = ({ children }) => {
         right: 0,
         bottom: 0,
       }}>
-      {children}
+      {props.children}
     </div>
   );
 };
 
-export const ModalContainer: React.FC = ({ children }) => {
-  return <div style={{ position: 'relative', flex: 1 }}>{children}</div>;
+interface IModalContainerProps {
+  children?: React.ReactNode;
+}
+
+export const ModalContainer: React.FC = (props: IModalContainerProps) => {
+  return <div style={{ position: 'relative', flex: 1 }}>{props.children}</div>;
 };
 
 export enum ModalAlertType {
diff --git a/gui/src/renderer/components/NavigationBar.tsx b/gui/src/renderer/components/NavigationBar.tsx
index cba9df0786..37f47816a9 100644
--- a/gui/src/renderer/components/NavigationBar.tsx
+++ b/gui/src/renderer/components/NavigationBar.tsx
@@ -124,12 +124,16 @@ interface INavigationScrollContextValue {
   showsBarSeparator: boolean;
 }
 
+interface INavigationContainerProps {
+  children?: React.ReactNode;
+}
+
 const NavigationScrollContext = React.createContext<INavigationScrollContextValue>({
   showsBarTitle: false,
   showsBarSeparator: false,
 });
 
-export class NavigationContainer extends Component {
+export class NavigationContainer extends Component<INavigationContainerProps> {
   public state = {
     navigationContainer: this,
     showsBarTitle: false,
diff --git a/gui/src/renderer/components/NotificationBanner.tsx b/gui/src/renderer/components/NotificationBanner.tsx
index b8f935f3c0..ba626c07f4 100644
--- a/gui/src/renderer/components/NotificationBanner.tsx
+++ b/gui/src/renderer/components/NotificationBanner.tsx
@@ -70,13 +70,21 @@ const styles = {
   }),
 };
 
-export class NotificationTitle extends Component {
+interface INotificationTitleProps {
+  children?: React.ReactNode;
+}
+
+export class NotificationTitle extends Component<INotificationTitleProps> {
   public render() {
     return <Text style={styles.title}>{this.props.children}</Text>;
   }
 }
 
-export class NotificationSubtitle extends Component {
+interface INotificationSubtitleProps {
+  children?: React.ReactNode;
+}
+
+export class NotificationSubtitle extends Component<INotificationSubtitleProps> {
   public render() {
     return React.Children.count(this.props.children) > 0 ? (
       <Text style={styles.subtitle}>{this.props.children}</Text>
@@ -84,7 +92,12 @@ export class NotificationSubtitle extends Component {
   }
 }
 
-export class NotificationOpenLinkAction extends Component<{ onPress: () => Promise<void> }> {
+interface INotifcationOpenLinkActionProps {
+  onPress: () => Promise<void>;
+  children?: React.ReactNode;
+}
+
+export class NotificationOpenLinkAction extends Component<INotifcationOpenLinkActionProps> {
   public state = {
     hovered: false,
   };
@@ -116,19 +129,32 @@ export class NotificationOpenLinkAction extends Component<{ onPress: () => Promi
   };
 }
 
-export class NotificationContent extends Component {
+interface INotificationContentProps {
+  children?: React.ReactNode;
+}
+
+export class NotificationContent extends Component<INotificationContentProps> {
   public render() {
     return <View style={styles.textContainer}>{this.props.children}</View>;
   }
 }
 
-export class NotificationActions extends Component {
+interface INotificationActionsProps {
+  children?: React.ReactNode;
+}
+
+export class NotificationActions extends Component<INotificationActionsProps> {
   public render() {
     return <View style={styles.actionContainer}>{this.props.children}</View>;
   }
 }
 
-export class NotificationIndicator extends Component<{ type: 'success' | 'warning' | 'error' }> {
+interface INotificationIndicatorProps {
+  type: 'success' | 'warning' | 'error';
+  children?: React.ReactNode;
+}
+
+export class NotificationIndicator extends Component<INotificationIndicatorProps> {
   public render() {
     return <View style={[styles.indicator.base, styles.indicator[this.props.type]]} />;
   }