Lint rule react prop types addition

.eslintrc

@@ -44,7 +44,7 @@
     "no-var": "error",
     "prefer-const": "error",
     "no-trailing-spaces": "error",
-    "react/prop-types": 0,
+    "react/prop-types": 2,
     "max-len": [
       1,
       {

components/app-text-input.js

@@ -18,7 +18,11 @@ export default function AppTextInput({ style, ...props }) {
 }
 
 AppTextInput.propTypes = {
-  secureTextEntry: PropTypes.bool
+  autoFocus: PropTypes.bool,
+  onChangeText: PropTypes.func,
+  placeholder: PropTypes.string,
+  style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+  value: PropTypes.string,
 }
 
 AppTextInput.defaultProps = {

components/app-text.js

@@ -1,27 +1,26 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { Text } from 'react-native'
 import styles from "../styles"
 import Link from './link'
 
-export default function AppText(props) {
+export default function AppText({ children, onPress, numberOfLines, style}) {
   // we parse for links in case the text contains any
   return (
     <Link>
-      <Text
+      <Text style={[styles.appText, style]}
-        style={[styles.appText, props.style]}
+        onPress={onPress}
-        onPress={props.onPress}
+        numberOfLines={numberOfLines}
-        numberOfLines={props.numberOfLines}
       >
-        {props.children}
+        {children}
       </Text>
     </Link>
   )
 }
 
-export function SymptomSectionHeader(props) {
+AppText.propTypes = {
-  return (
+  children: PropTypes.node,
-    <AppText style={styles.symptomViewHeading}>
+  onPress: PropTypes.func,
-      {props.children}
+  numberOfLines: PropTypes.number,
-    </AppText>
+  style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-  )
 }

components/button.js

@@ -1,22 +1,31 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { TouchableOpacity } from 'react-native'
 import AppText from './app-text'
 import styles from '../styles'
 
-export default function Button(props) {
+export default function Button({
+  backgroundColor,
+  children,
+  onPress,
+  style,
+  testID
+}) {
   return (
     <TouchableOpacity
-      onPress={props.onPress}
+      onPress={onPress}
-      style={[
+      style={[styles.button, style, { backgroundColor }]}
-        styles.button,
+      testID={testID}
-        props.style,
-        {backgroundColor: props.backgroundColor}
-      ]}
-      testID={props.testID}
     >
-      <AppText style={styles.homeButtonText}>
+      <AppText style={styles.homeButtonText}>{children}</AppText>
-        {props.children}
-      </AppText>
     </TouchableOpacity>
   )
 }
+
+Button.propTypes = {
+  backgroundColor: PropTypes.string,
+  children: PropTypes.node,
+  onPress: PropTypes.func,
+  style: PropTypes.object,
+  testID: PropTypes.string
+}

components/calendar.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { CalendarList } from 'react-native-calendars'
 import { connect } from 'react-redux'
 
@@ -13,6 +14,11 @@ import styles from '../styles/index'
 import nothingChanged from '../db/db-unchanged'
 
 class CalendarView extends Component {
+  static propTypes = {
+    setDate: PropTypes.func.isRequired,
+    navigate: PropTypes.func.isRequired
+  }
+
   constructor(props) {
     super(props)
     this.bleedingDays = getBleedingDaysSortedByDate()

components/chart/chart.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { View, FlatList, ActivityIndicator } from 'react-native'
 
 import AppLoadingView from '../app-loading'
@@ -17,6 +18,11 @@ import config from '../../config'
 import styles from './styles'
 
 export default class CycleChart extends Component {
+  static propTypes = {
+    navigate: PropTypes.func,
+    end: PropTypes.bool
+  }
+
   constructor(props) {
     super(props)
     this.state = {}
@@ -147,12 +153,14 @@ export default class CycleChart extends Component {
   }
 }
 
-function LoadingMoreView(props) {
+function LoadingMoreView({ end }) {
   return (
     <View style={styles.loadingMore}>
-      {!props.end &&
+      {!end && <ActivityIndicator size={'large'} color={'white'}/>}
-        <ActivityIndicator size={'large'} color={'white'}/>
-      }
     </View>
   )
 }
+
+LoadingMoreView.propTypes = {
+  end: PropTypes.bool
+}

components/chart/day-column.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { TouchableOpacity } from 'react-native'
 import { connect } from 'react-redux'
 
@@ -18,6 +19,18 @@ import {
 } from '../helpers/chart'
 
 class DayColumn extends Component {
+  static propTypes = {
+    dateString: PropTypes.string.isRequired,
+    chartSymptoms: PropTypes.array,
+    columnHeight: PropTypes.number.isRequired,
+    getFhmAndLtlInfo: PropTypes.func.isRequired,
+    navigate: PropTypes.func.isRequired,
+    setDate: PropTypes.func.isRequired,
+    symptomHeight: PropTypes.number.isRequired,
+    symptomRowSymptoms: PropTypes.array,
+    xAxisHeight: PropTypes.number
+  }
+
   constructor(props) {
     super()
 

components/chart/dot-and-line.js

@@ -1,10 +1,20 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { Path, Shape } from 'react-native/Libraries/ART/ReactNativeART'
 
 import styles from './styles'
 import config from '../../config'
 
 export default class DotAndLine extends Component {
+  static propTypes = {
+    exclude: PropTypes.bool,
+    leftY: PropTypes.number,
+    leftTemperatureExclude: PropTypes.bool,
+    rightY: PropTypes.number,
+    rightTemperatureExclude: PropTypes.bool,
+    y: PropTypes.number.isRequired
+  }
+
   shouldComponentUpdate(newProps) {
     return Object.keys(newProps).some(key => newProps[key] != this.props[key])
   }

components/cycle-day/SymptomBox.js

@@ -1,4 +1,5 @@
-import React, { Component } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import { View, TouchableOpacity } from 'react-native'
 
 import AppText from '../app-text'
@@ -124,15 +125,14 @@ const l = {
   }
 }
 
-export default class SymptomBox extends Component {
+const getLabel = (symptom, symptomData) => {
-  getLabel = () => {
-    const { symptom, symptomData } = this.props
   return symptomData && l[symptom](symptomData)
 }
 
-  render() {
+export default function SymptomBox(
-    const { symptom, onPress, disabled } = this.props
+  { disabled, onPress, symptom, symptomData }) {
-    const data = this.getLabel()
+
+  const data = getLabel(symptom, symptomData)
   const iconName = `drip-icon-${symptom}`
 
   const disabledStyle = disabled ? styles.symptomInFuture : null
@@ -147,11 +147,12 @@ export default class SymptomBox extends Component {
     {fontSize: 15}
   ]
   const dataBoxStyle = [styles.symptomDataBox, disabledStyle]
+  const iconColor = data ? 'white' : 'black'
 
   return (
     <TouchableOpacity onPress={onPress} disabled={disabled} testID={iconName}>
       <View style={containerStyle}>
-          <Icon name={iconName} isActive={data} />
+        <DripIcon name={iconName} size={50} color={iconColor} />
         <AppText style={titleStyle} numberOfLines={1}>
           {symptomTitles[symptom].toLowerCase()}
         </AppText>
@@ -164,7 +165,10 @@ export default class SymptomBox extends Component {
     </TouchableOpacity>
   )
 }
-}
 
-const Icon = ({name, isActive}) =>
+SymptomBox.propTypes = {
-  <DripIcon name={name} size={50} color={isActive ? 'white' : 'black'} />
+  disabled: PropTypes.bool.isRequired,
+  onPress: PropTypes.func.isRequired,
+  symptom: PropTypes.string.isRequired,
+  symptomData: PropTypes.object
+}

components/cycle-day/select-box-group.js

@@ -1,29 +1,28 @@
-import React, { Component } from 'react'
+import React from 'react'
-import {
+import PropTypes from 'prop-types'
-  View,
+import { View, TouchableOpacity } from 'react-native'
-  TouchableOpacity,
+
-} from 'react-native'
-import styles from '../../styles'
 import AppText from '../app-text'
 
-export default class SelectBoxGroup extends Component {
+import styles from '../../styles'
-  render() {
+
+export default function SelectBoxGroup({ labels, onSelect, optionsState }) {
   return (
     <View style={styles.selectBoxSection}>
-        {Object.keys(this.props.labels).map(key => {
+      {Object.keys(labels).map(key => {
         const style = [styles.selectBox]
         const textStyle = []
-          if (this.props.optionsState[key]) {
+        if (optionsState[key]) {
           style.push(styles.selectBoxActive)
           textStyle.push(styles.selectBoxTextActive)
         }
         return (
           <TouchableOpacity
-              onPress={() => this.props.onSelect(key)}
+            onPress={() => onSelect(key)}
             key={key}
           >
             <View style={style}>
-                <AppText style={textStyle}>{this.props.labels[key]}</AppText>
+              <AppText style={textStyle}>{labels[key]}</AppText>
             </View>
           </TouchableOpacity>
         )
@@ -31,4 +30,9 @@ export default class SelectBoxGroup extends Component {
     </View>
   )
 }
+
+SelectBoxGroup.propTypes = {
+  labels: PropTypes.object.isRequired,
+  onSelect: PropTypes.func.isRequired,
+  optionsState: PropTypes.object.isRequired
 }

components/cycle-day/select-tab-group.js

@@ -1,14 +1,12 @@
-import React, { Component } from 'react'
+import React from 'react'
-import {
+import PropTypes from 'prop-types'
-  View,
+import { View, TouchableOpacity } from 'react-native'
-  TouchableOpacity,
+
-} from 'react-native'
-import styles from '../../styles'
 import AppText from '../app-text'
 
-export default class SelectTabGroup extends Component {
+import styles from '../../styles'
-  render() {
+
-    const { buttons, onSelect } = this.props
+export default function SelectTabGroup({ active, buttons, onSelect }) {
   return (
     <View style={styles.selectTabGroup}>
       {
@@ -20,7 +18,7 @@ export default class SelectTabGroup extends Component {
             firstOrLastStyle = styles.selectTabFirst
           }
           let activeStyle
-            const isActive = value === this.props.active
+          const isActive = value === active
           if (isActive) activeStyle = styles.selectTabActive
           return (
             <TouchableOpacity
@@ -44,4 +42,9 @@ export default class SelectTabGroup extends Component {
     </View>
   )
 }
+
+SelectTabGroup.propTypes = {
+  active: PropTypes.number,
+  buttons: PropTypes.array.isRequired,
+  onSelect: PropTypes.func.isRequired
 }

components/cycle-day/symptoms/desire.js

@@ -21,7 +21,7 @@ class Desire extends Component {
     const symptom = 'desire'
     const { cycleDay } = props
 
-    const defaultSymptomData = { value: '' }
+    const defaultSymptomData = { value: null }
 
     const symptomData =
       cycleDay && cycleDay[symptom] ? cycleDay[symptom] : defaultSymptomData

components/cycle-day/symptoms/info-symptom.js

@@ -1,22 +1,28 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { ScrollView, View, TouchableOpacity } from 'react-native'
 import Icon from 'react-native-vector-icons/SimpleLineIcons'
 import AppText from '../../app-text'
 import labels from '../../../i18n/en/symptom-info.js'
 import styles, {iconStyles} from '../../../styles/index'
 
-export default function InfoSymptom(props) {
+export default function InfoSymptom({ close, symptom }) {
   return (
     <View style={styles.infoPopUpWrapper}>
       <View style={styles.dimmed}></View>
       <View style={styles.infoPopUp} testID="symptomInfoPopup">
-        <TouchableOpacity onPress={props.close} style={styles.infoSymptomClose}>
+        <TouchableOpacity onPress={close} style={styles.infoSymptomClose}>
           <Icon name='close' {...iconStyles.infoPopUpClose}/>
         </TouchableOpacity>
         <ScrollView style={styles.infoSymptomText}>
-          <AppText>{labels[props.symptom].text}</AppText>
+          <AppText>{labels[symptom].text}</AppText>
         </ScrollView>
       </View>
     </View>
   )
 }
+
+InfoSymptom.propTypes = {
+  close: PropTypes.func.isRequired,
+  symptom: PropTypes.string.isRequired
+}

components/cycle-day/symptoms/note.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { TextInput } from 'react-native'
 
 import SymptomSection from './symptom-section'
@@ -9,6 +10,11 @@ import SymptomView from './symptom-view'
 import { saveSymptom } from '../../../db'
 
 class Note extends Component {
+  static propTypes = {
+    cycleDay: PropTypes.object.isRequired,
+    date: PropTypes.string.isRequired
+  }
+
   constructor(props) {
     super(props)
     const symptom = 'note'
@@ -41,16 +47,12 @@ class Note extends Component {
         values={this.state}
         date={this.props.date}
       >
-        <SymptomSection
+        <SymptomSection explainer={noteExplainer} >
-          explainer={noteExplainer}
-        >
           <TextInput
             autoFocus={true}
             multiline={true}
             placeholder={sharedLabels.enter}
-            onChangeText={(val) => {
+            onChangeText={(val) => { this.setState({ value: val })}}
-              this.setState({ value: val })
-            }}
             value={this.state.value}
             testID='noteInput'
           />

components/cycle-day/symptoms/symptom-section.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import { View } from 'react-native'
-import AppText, { SymptomSectionHeader } from '../../app-text'
+import AppText from '../../app-text'
 import styles from '../../../styles'
 
 export default class SymptomSection extends Component {
@@ -16,7 +16,7 @@ export default class SymptomSection extends Component {
     return (
       <View style={[placeHeadingInline, styles.symptomSection]}>
         { p.header &&
-          <SymptomSectionHeader flex={1}>{p.header}</SymptomSectionHeader>
+          <AppText style={styles.symptomViewHeading}>{p.header}</AppText>
         }
         <View
           flexDirection={p.inline ? 'row' : null}

components/cycle-day/symptoms/symptom-view.js

@@ -77,15 +77,16 @@ class SymptomView extends Component {
 
   render() {
     const { symptom, date, goBack } = this.props
+    const { shouldShowDelete } = this.state
+    const handleDelete = shouldShowDelete ? this.showConfirmationAlert : null
+
     return (
       <View style={{flex: 1}}>
         <Header
           title={headerTitles[symptom]}
           subtitle={formatDate(date)}
           handleBack={goBack}
-          handleDelete={
+          handleDelete={handleDelete}
-            this.state.shouldShowDelete && this.showConfirmationAlert
-          }
         />
         <View flex={1}>
           <ScrollView style={styles.page}>

components/cycle-day/symptoms/temperature-input.js

@@ -102,3 +102,7 @@ const OutOfRangeWarning = ({ temperature }) => {
 
   return <AppText style={styles.hint}>{warningMsg}</AppText>
 }
+
+OutOfRangeWarning.propTypes = {
+  temperature: PropTypes.string.isRequired
+}

components/framed-segment.js

@@ -5,21 +5,24 @@ import { View } from 'react-native'
 import AppText from './app-text'
 import styles from '../styles'
 
-const FramedSegment = ({children, ...props}) => {
+const FramedSegment = ({ children, last, style, title }) => {
-  const style = [styles.framedSegment, props.style]
+  const viewStyle = [styles.framedSegment, style]
-  if (props.last) style.push(styles.framedSegmentLast)
+  if (last) viewStyle.push(styles.framedSegmentLast)
   return (
-    <View style={[style]}>
+    <View style={[viewStyle]}>
-      {
+      {title && <AppText style={styles.framedSegmentTitle}>{title}</AppText>}
-        props.title
-        && <AppText style={styles.framedSegmentTitle}>{props.title}</AppText>
-      }
       {children}
     </View>
   )
 }
 
 FramedSegment.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ]),
+  last: PropTypes.bool,
+  style: PropTypes.object,
   title: PropTypes.string
 }
 

components/header/index.js

@@ -29,7 +29,8 @@ export default function Header({
 
 Header.propTypes = {
   handleBack: PropTypes.func,
+  handleDelete: PropTypes.func,
   handleNext: PropTypes.func,
-  title: PropTypes.string,
   subtitle: PropTypes.string,
+  title: PropTypes.string.isRequired
 }

components/license.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { ScrollView, View, BackHandler } from 'react-native'
 import AppText from './app-text'
 import { shared } from '../i18n/en/labels'
@@ -37,3 +38,7 @@ export default function License({setLicense}) {
     </ScrollView>
   )
 }
+
+License.propTypes = {
+  setLicense: PropTypes.func.isRequired
+}

components/link.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import Hyperlink from 'react-native-hyperlink'
 import styles from '../styles'
 import links from '../i18n/en/links'
@@ -15,6 +16,13 @@ export default function Link(props) {
   )
 }
 
+Link.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ])
+}
+
 function replaceUrlWithText(url) {
   const link = Object.values(links).find(l => l.url === url)
   return (link && link.text) || url

components/menu/menu-item.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { Text, TouchableOpacity } from 'react-native'
 
 import styles, { iconStyles, secondaryColor } from '../../styles'
@@ -11,13 +12,11 @@ const menuTitlesLowerCase = Object.keys(menuTitles).reduce((acc, curr) => {
   return acc
 }, {})
 
-const MenuItem = ({ icon, label, active, onPress }) => {
+export default function MenuItem({ active, icon, label, onPress }) {
   const styleActive = active ? { color: secondaryColor } : null
+
   return (
-    <TouchableOpacity
+    <TouchableOpacity style={styles.menuItem} onPress={onPress} >
-      style={styles.menuItem}
-      onPress={onPress}
-    >
       <Icon name={icon} {...iconStyles.menuIcon} {...styleActive} />
       <Text
         testID={active ? 'activeMenuItem' : `menuItem${label}`}
@@ -29,4 +28,9 @@ const MenuItem = ({ icon, label, active, onPress }) => {
   )
 }
 
-export default MenuItem
+MenuItem.propTypes = {
+  active: PropTypes.bool,
+  icon: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  onPress: PropTypes.func.isRequired
+}

components/password-prompt.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { View, TextInput, TouchableOpacity, Alert } from 'react-native'
 import nodejs from 'nodejs-mobile-react-native'
 import { saveEncryptionFlag } from '../local-storage'
@@ -9,6 +10,10 @@ import { passwordPrompt as labels, shared, menuTitles } from '../i18n/en/labels'
 import { requestHash, deleteDbAndOpenNew, openDb } from '../db'
 
 export default class PasswordPrompt extends Component {
+  static propTypes = {
+    enableShowApp: PropTypes.func.isRequired
+  }
+
   constructor(props) {
     super(props)
     this.state = {

components/settings/settings-menu.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { TouchableOpacity, ScrollView } from 'react-native'
 import { connect } from 'react-redux'
 
@@ -21,7 +22,7 @@ const menu = [
   {title: labels.license, component: 'License'}
 ]
 
-const SettingsMenu = (props) => {
+const SettingsMenu = ({ navigate }) => {
   return (
     <ScrollView>
       { menu.map(menuItem)}
@@ -33,7 +34,7 @@ const SettingsMenu = (props) => {
       <TouchableOpacity
         style={styles.framedSegment}
         key={item.title}
-        onPress={() => props.navigate(item.component)}
+        onPress={() => navigate(item.component)}
       >
         <AppText>{item.title.toLowerCase()}</AppText>
       </TouchableOpacity>
@@ -41,6 +42,10 @@ const SettingsMenu = (props) => {
   }
 }
 
+SettingsMenu.propTypes = {
+  navigate: PropTypes.func.isRequired
+}
+
 const mapDispatchToProps = (dispatch) => {
   return({
     navigate: (page) => dispatch(navigate(page)),

components/settings/shared/settings-button.js

@@ -28,8 +28,11 @@ const SettingsButton = ({ children, style, secondary, ...props }) => {
 }
 
 SettingsButton.propTypes = {
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
   onPress: PropTypes.func.isRequired,
-  disabled: PropTypes.bool
+  secondary: PropTypes.bool,
+  style: PropTypes.object
 }
 
 export default SettingsButton

styles/index.js

@@ -157,7 +157,8 @@ export default StyleSheet.create({
   },
   symptomViewHeading: {
     fontWeight: 'bold',
-    fontFamily: textFontBold
+    fontFamily: textFontBold,
+    flex: 1
   },
   symptomSection: {
     marginBottom: 10