Topbar styles was updated.

Author: SevenSwen

example/react-native-calendar/components/Calendar.js

@@ -259,15 +259,14 @@ export default class Calendar extends Component {
     );
   }
 
-  renderCustomTitleView (localizedMonth, year){
+  renderCustomTitleView (date){
     if(this.props.customTitleView) {
-      return React.cloneElement(this.props.customTitleView({year, localizedMonth}))
+      return React.cloneElement(this.props.customTitleView({date}))
     }
     return null;
   }
 
   renderTopBar() {
-    let localizedMonth = this.props.monthNames[this.state.currentMonthMoment.month()];
     if (this.props.showControls) {
       if (this.props.customTopBar) {
         return React.createElement(this.props.customTopBar, this.props);
@@ -278,9 +277,7 @@ export default class Calendar extends Component {
               onPrev={this.onPrev}
               scrollToToday={this.scrollToToday}
               customStyle={this.props.customStyle}
-              localizedMonth={localizedMonth}
-              year={this.state.currentMonthMoment.year()}
-              customTitleView={this.renderCustomTitleView(localizedMonth, this.state.currentMonthMoment.year())}
+              customTitleView={this.renderCustomTitleView(this.state.currentMonthMoment.toDate())}
               onTitlePress={() => this.props.onTitlePress && this.props.onTitlePress(this.selectMonth)}/>
       );
     }

example/react-native-calendar/components/TopBar.js

@@ -30,41 +30,33 @@ Arrow.propTypes = {
   height: React.PropTypes.number.isRequired
 };
 Arrow.defaultProps = {
-  width: 14,
-  height: 14
+  width: 6,
+  height: 11
 };
 
 const todayBtnStyle = StyleSheet.create({
   container: {
-    borderColor: "#d7d7d7",
-    borderRadius: 7,
-    borderWidth: 0.5,
-    paddingVertical: 5,
-    paddingHorizontal: 9
+    width: 47,
+    height: 25,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+    borderRadius: 5,
+    borderColor: "#d7d7d7"
   },
   text: {
     fontSize: 11,
     color: "#676767"
   }
 });
-const TodayBtn = ({text, textStyle}) => (
-    <View style={todayBtnStyle.container}>
-      <Text style={[todayBtnStyle.text, textStyle]}>{text}</Text>
-    </View>
-);
 
 const topBarStyles = StyleSheet.create({
-  centredContent: {
-    flex: 1,
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center"
-  },
   title: {
     fontWeight: "700",
     letterSpacing: 0
   }
 });
+
 const TopBar = ({
     onPrev,
     onNext,
@@ -75,18 +67,21 @@ const TopBar = ({
     year,
     customTitleView}) => (
     <View style={[styles.calendarControls, customStyle.calendarControls]}>
+      <View style={[styles.container, customStyle.container]}>
+        <TouchableOpacity
+            style={[styles.controlButton, customStyle.controlButton]}
+            onPress={onPrev}>
+          <Arrow source={require("./assets/calendar-arrow-left.png")}/>
+        </TouchableOpacity>
+        <View style={styles.controlButton}>
+          <TouchableOpacity style={todayBtnStyle.container}
+                            onPress={scrollToToday}>
+            <Text style={todayBtnStyle.text}>Today</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
       <TouchableOpacity
-          style={[styles.controlButton, customStyle.controlButton]}
-          onPress={onPrev}>
-        <Arrow source={require("./assets/calendar-arrow-left.png")}/>
-      </TouchableOpacity>
-      <TouchableOpacity
-          style={[styles.controlButton, customStyle.controlButton]}
-          onPress={scrollToToday}>
-        <TodayBtn text="Today"/>
-      </TouchableOpacity>
-      <TouchableOpacity
-          style={topBarStyles.centredContent}
+          style={styles.containerTitle}
           onPress={onTitlePress}>
         {customTitleView ||
         <View style={{flexDirection: "row", alignItems: "center"}}>
@@ -99,11 +94,16 @@ const TopBar = ({
               height={10}/>
         </View>}
       </TouchableOpacity>
-      <TouchableOpacity
-          style={[styles.controlButton, customStyle.controlButton]}
-          onPress={onNext}>
-        <Arrow source={require("./assets/calendar-arrow-right.png")}/>
-      </TouchableOpacity>
+      <View style={[styles.container, customStyle.container]}>
+        <View style={[styles.controlButton, customStyle.controlButton]}>
+        </View>
+        <TouchableOpacity
+            style={[styles.controlButton, customStyle.controlButton]}
+            onPress={onNext}>
+          <Arrow source={require("./assets/calendar-arrow-right.png")}/>
+        </TouchableOpacity>
+
+      </View>
     </View>
 );
 TopBar.defaultProps = {

example/react-native-calendar/components/styles.js

@@ -19,9 +19,21 @@ const styles = StyleSheet.create({
   },
   calendarControls: {
     flexDirection: 'row',
-    alignItems: 'center'
+    alignItems: 'center',
+  },
+  container: {
+    flex: 2,
+    flexDirection: "row",
+  },
+  containerTitle: {
+    flex: 3,
+    alignItems: "center",
+    justifyContent: "center",
   },
   controlButton: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
   },
   controlButtonText: {
     margin: 10,