Only remove component's listener, not all

calendar.js

@@ -4,16 +4,24 @@ import { Calendar } from 'react-native-calendars'
 import * as styles from './styles'
 import { getOrCreateCycleDay, bleedingDaysSortedByDate } from './db'
 
-export default class DatePickView extends Component {
+export default class CalendarView extends Component {
   constructor(props) {
     super(props)
     this.state = { bleedingDaysInCalFormat: getBleedingDaysInCalFormat(bleedingDaysSortedByDate) }
 
-    bleedingDaysSortedByDate.addListener(setStateWithCalendarFormattedDays.bind(this))
+    this.setStateWithCalendarFormattedDays = (function (CalendarComponent) {
+      return function() {
+        CalendarComponent.setState({
+          bleedingDaysInCalFormat: getBleedingDaysInCalFormat(bleedingDaysSortedByDate)
+        })
+      }
+    })(this)
+
+    bleedingDaysSortedByDate.addListener(this.setStateWithCalendarFormattedDays)
   }
 
   componentWillUnmount() {
-    bleedingDaysSortedByDate.removeAllListeners()
+    bleedingDaysSortedByDate.removeListener(this.setStateWithCalendarFormattedDays)
   }
 
   passDateToDayView(result) {
@@ -41,8 +49,4 @@ function getBleedingDaysInCalFormat(bleedingDaysSortedByDate) {
     acc[day.date] = { startingDay: true, endingDay: true, color: shadesOfRed[day.bleeding.value] }
     return acc
   }, {})
-}
-
-function setStateWithCalendarFormattedDays() {
-  this.setState({ bleedingDaysInCalFormat: getBleedingDaysInCalFormat(bleedingDaysSortedByDate) })
 }

cycle-day-overview.js

@@ -16,11 +16,23 @@ export default class DayView extends Component {
     super(props)
     this.cycleDay = props.cycleDay
     this.showView = props.showView
-    bleedingDaysSortedByDate.addListener(setStateWithCurrentCycleDayNumber.bind(this))
+    this.state = {
+      cycleDayNumber: getCycleDayNumber(this.cycleDay.date),
+    }
+
+    this.setStateWithCurrentCycleDayNumber = (function (DayViewComponent) {
+      return function () {
+        DayViewComponent.setState({
+          cycleDayNumber: getCycleDayNumber(DayViewComponent.cycleDay.date)
+        })
+      }
+    })(this)
+
+    bleedingDaysSortedByDate.addListener(this.setStateWithCurrentCycleDayNumber)
   }
 
   componentWillUnmount() {
-    bleedingDaysSortedByDate.removeAllListeners()
+    bleedingDaysSortedByDate.removeListener(this.setStateWithCurrentCycleDayNumber)
   }
 
   render() {
@@ -56,10 +68,4 @@ export default class DayView extends Component {
       </View >
     )
   }
-}
-
-function setStateWithCurrentCycleDayNumber() {
-  this.setState({
-    cycleDayNumber: getCycleDayNumber(this.cycleDay.date)
-  })
 }

cycle-day.js

@@ -16,7 +16,6 @@ export default class Day extends Component {
   constructor(props) {
     super(props)
     this.cycleDay = props.navigation.state.params.cycleDay
-    this.cycleDayNumber = getCycleDayNumber(this.cycleDay.date)
 
     this.state = {
       visibleComponent: 'dayView',
@@ -28,10 +27,11 @@ export default class Day extends Component {
   }
 
   render() {
+    const cycleDayNumber = getCycleDayNumber(this.cycleDay.date)
     return (
       <View style={styles.container}>
         <Text style={styles.welcome}>{formatDateForViewHeader(this.cycleDay.date)}</Text>
-        { this.cycleDayNumber && <Text>Cycle day {this.cycleDayNumber}</Text> }
+        { cycleDayNumber && <Text>Cycle day {cycleDayNumber}</Text> }
         {
           { dayView: <DayView cycleDay={this.cycleDay} showView={this.showView} />,
             bleedingEditView: <BleedingEditView cycleDay={this.cycleDay} showView={this.showView}/>,

home.js

@@ -21,11 +21,19 @@ export default class Home extends Component {
       welcomeText: determineWelcomeText(cycleDayNumber)
     }
 
-    bleedingDaysSortedByDate.addListener(setStateWithCurrentWelcomeText.bind(this))
+    this.setStateWithCurrentWelcomeText = (function (HomeComponent) {
+      return function () {
+        HomeComponent.setState({
+          welcomeText: determineWelcomeText(getCycleDayNumber(HomeComponent.todayDateString))
+        })
+      }
+    })(this)
+
+    bleedingDaysSortedByDate.addListener(this.setStateWithCurrentWelcomeText)
   }
 
   componentWillUnmount() {
-    bleedingDaysSortedByDate.removeAllListeners()
+    bleedingDaysSortedByDate.removeListener(this.setStateWithCurrentWelcomeText)
   }
 
   passTodayToDayView() {
@@ -63,6 +71,3 @@ function determineWelcomeText(cycleDayNumber) {
   return cycleDayNumber ? welcomeTextWithCycleDay : welcomeText
 }
 
-function setStateWithCurrentWelcomeText() {
-  this.setState({ welcomeText: determineWelcomeText(getCycleDayNumber(this.todayDateString)) })
-}