move Title to new file

src/Header/Header.js

@@ -2,18 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Text, View } from 'react-native';
 
-import { getFormattedDate, getCurrentMonth, calculateDaysArray } from '../utils';
-
+import { getFormattedDate, calculateDaysArray } from '../utils';
 import styles from './Header.styles';
 
-const getFontSizeHeader = (numberOfDays) => {
-  if (numberOfDays > 1) {
-    return 12;
-  }
-
-  return 16;
-};
-
 const getDayTextStyles = (numberOfDays) => {
   const fontSize = numberOfDays === 7 ? 12 : 14;
   return {
@@ -59,22 +50,6 @@ const Columns = ({
   );
 };
 
-export const Title = ({
-  style,
-  numberOfDays,
-  selectedDate,
-  textColor,
-}) => { // eslint-disable-line react/prop-types
-  return (
-    <View style={[styles.title, style]}>
-      <Text
-        style={{ color: textColor, fontSize: getFontSizeHeader(numberOfDays) }}
-      >
-        {getCurrentMonth(selectedDate)}
-      </Text>
-    </View>
-  );
-};
 
 const WeekViewHeader = ({
   numberOfDays,

src/Header/Header.styles.js

@@ -6,13 +6,6 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'space-between',
   },
-  title: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: 60,
-    borderColor: '#fff',
-    borderTopWidth: 1,
-  },
   columns: {
     flex: 1,
     flexDirection: 'row',

src/Title/Title.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import PropTypes from 'prop-types';
+
+import { getCurrentMonth } from '../utils';
+import styles from './Title.styles';
+
+const getFontSizeHeader = (numberOfDays) => {
+  if (numberOfDays > 1) {
+    return 12;
+  }
+  return 16;
+};
+
+const Title = ({
+  style,
+  numberOfDays,
+  selectedDate,
+  textColor,
+}) => {
+  return (
+    <View style={[styles.title, style]}>
+      <Text
+        style={{ color: textColor, fontSize: getFontSizeHeader(numberOfDays) }}
+      >
+        {getCurrentMonth(selectedDate)}
+      </Text>
+    </View>
+  );
+};
+
+Title.propTypes = {
+  numberOfDays: PropTypes.oneOf([1, 3, 5, 7]).isRequired,
+  selectedDate: PropTypes.instanceOf(Date).isRequired,
+  style: PropTypes.object,
+  textColor: PropTypes.string,
+};
+
+export default React.memo(Title);

src/Title/Title.styles.js

@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  title: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 60,
+    borderColor: '#fff',
+    borderTopWidth: 1,
+  },
+});
+
+export default styles;

src/WeekView/WeekView.js

@@ -11,7 +11,8 @@ import memoizeOne from 'memoize-one';
 
 import Event from '../Event/Event';
 import Events from '../Events/Events';
-import Header, { Title } from '../Header/Header';
+import Header from '../Header/Header';
+import Title from '../Title/Title';
 import Times from '../Times/Times';
 import styles from './WeekView.styles';
 import {
@@ -190,7 +191,7 @@ export default class WeekView extends Component {
     const eventsByDate = this.sortEventsByDate(events);
     return (
       <View style={styles.container}>
-        <View style={{ flexDirection: 'row' }}>
+        <View style={styles.headerContainer}>
           <Title
             style={headerStyle}
             numberOfDays={numberOfDays}

src/WeekView/WeekView.styles.js

@@ -9,6 +9,9 @@ const styles = StyleSheet.create({
   scrollViewContent: {
     flexDirection: 'row',
   },
+  headerContainer: {
+    flexDirection: 'row',
+  },
   header: {
     flex: 1,
     height: 50,