external styles

Author: gereXciTer

Calendar.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types'
 import dateFns from 'date-fns';
 import { View, Text, Animated, TouchableOpacity, TouchableHighlight, ScrollView, Dimensions, PanResponder, Platform } from 'react-native'
 
-import styles from './calendarStyles'
-
+import defaultStyles from './calendarStyles'
 import { defaultEmptyListRenderer, defaultItemRenderer } from './helpers'
+let styles = defaultStyles
 
 class Calendar extends React.Component {
   constructor(props) {
@@ -76,7 +76,10 @@ class Calendar extends React.Component {
   }
 
   static getDerivedStateFromProps(props, state) {
-    const ignoreProps = ['scrollable', 'weekMode']
+    const ignoreProps = ['scrollable', 'weekMode', 'styles']
+    if (props.styles) {
+      styles = props.styles
+    }
     const newState = {...state}
     Object.keys(props).forEach(key => {
       if(!ignoreProps.includes(key))
@@ -373,7 +376,8 @@ Calendar.propTypes = {
   emptyListRenderer: PropTypes.func,
   itemRenderer: PropTypes.func,
   itemClickHandler: PropTypes.func,
-  onDateSelect: PropTypes.func
+  onDateSelect: PropTypes.func,
+  styles: PropTypes.object,
 }
 
 export default Calendar;

README.md

@@ -47,6 +47,7 @@ You can see usage example in this [Expo demo](https://snack.expo.io/@ger_exciter
 | itemRenderer | function     | defaultItemRenderer | agenda item renderer |
 | itemClickHandler | function | void | agenda item click handler |
 | onDateSelect | function     | void | date select handler, doesn't prevent rendering date's agenda, runs after selected date state is updated |
+| styles | object             | defaultStyles | custom styles that can be applied to the component. Import defaultStyles for the reference |
 
 Agenda items data format:
 ```javascript

main.js

@@ -1,8 +1,10 @@
 import Calendar from './Calendar'
 import { defaultEmptyListRenderer, defaultItemRenderer } from './helpers'
+import defaultStyles from './calendarStyles'
 
 export {
   Calendar,
   defaultEmptyListRenderer,
-  defaultItemRenderer
+  defaultItemRenderer,
+  defaultStyles
 }