Started Componet

Author: Ifechukwudaniel

.DS_Store

@@ -10,18 +10,98 @@ import React, {Component} from 'react';
 import {Platform, StyleSheet, Text, View, TouchableOpacity} from 'react-native';
 import style from './style'
 
-type Props = {};
-export default class NumberView extends Component<Props> {
-  render() {
+function ScrollMonthCalender({history, enableDefaultStyles , onMonthChange}){
+    const scrollViewRef = useRef();
+    const [monthNumber, setMonthNumber] = useState(0)
+    const [heightArray , setArray ]= useState([]);
+    let offset= 0
+    useEffect(()=>{
+        if(monthNumber>11)
+          setMonthNumber(0)
+          scrollViewRef.current.scrollTo({
+            x: heightArray[monthNumber]-100,
+            y:0,
+            animated: true,
+        });
+        onMonthChange()
+    },[monthNumber])
+
     return (
-  
+       <View style={styles.mainView}>
+          <View style= {styles.flexRow} >
+                <ScrollView
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                scrollEventThrottle={0}
+                ref={scrollViewRef}
+                onMomentumScrollBegin={
+                    (e)=>{
+                        var currentOffset = e.nativeEvent.contentOffset.x;
+                        var direction = currentOffset > offset ? 'left' : 'right';
+                        offset = currentOffset;
+                        if(direction==="left"){
+                            setMonthNumber(monthNumber+1)
+                        }
+                    }
+                }
+                >
+                    {
+                        history.map((item , i)=>{   
+                         if(i===0) {
+                           return  (<View key={i} 
+                            style={styles.monthView}
+                            onLayout={event => {
+                            const layout = event.nativeEvent.layout;
+                            heightArray[i] = layout.x
+                            }}>
+                                  <Text style={[styles.monthText,{marginLeft:100,opacity:i==monthNumber?1:0.5 }]}>{item.month}</Text>
+                            </View>)
+                         }
+                         if(i === history.length - 1) {
+                           return  (<View key={i} 
+                            style={styles.monthView}
+                            onLayout={event => {
+                            const layout = event.nativeEvent.layout;
+                            heightArray[i] = layout.x
+                            }}>
+                                 <Text style={[styles.monthText,{marginRight:100, opacity:i==monthNumber?1:0.5 }]}>{item.month}</Text>
+                            </View>)
+                         }
+                         else 
+                            return  (<View key={i} 
+                                style={styles.monthView}
+                                onLayout={event => {
+                                const layout = event.nativeEvent.layout;
+                                heightArray[i] = layout.x
+                                }}>
+                                    <Text style={[styles.monthText, {opacity:i==monthNumber?1:0.5 }]}>{item.month}</Text>
+                                </View>)
+                        })
+                    }
+                </ScrollView>
+          </View>
+                <View style={{flex:1, alignSelf:"center"}}>
+                    <Text style= {styles.task}>{history[monthNumber]?history[monthNumber].task:0 } Tasks  Completed </Text>
+                </View>
+        </View>
     );
-  }
 }
 
-NumberView.defaultProps = {
-   initialValue:0,
+ScrollMonthCalender.defaultProps = {
+   history:[{month:"January", task: 10},
+   {month:"February", task:20},
+   {month:"March", task:1},
+   {month:"April", task:44},
+   {month:"May", task:77},
+   {month:"June", task:9},
+   {month:"July", task:27},
+   {month:"August", task:0},
+   {month:"September", task:8},
+   {month:"October", task:2},
+   {month:"November", task:7},
+   {month:"December", task:26}],
    enableDefaultStyles:true,
-   themeColor:false,
-   maxLimit:false
-}
+}
+
+
+export default ScrollMonthCalender

components/ScrollMonthCalender/index.js

@@ -0,0 +1,49 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow
+ */
+
+
+import {StyleSheet} from 'react-native';
+
+const style = StyleSheet.create({
+  mainView : {
+    flex:0,
+    flexGrow:0,
+    height:80,
+    marginTop:40, 
+    marginBottom:40,
+    backgroundColor:'#ffffff',
+   },
+   flexRow:{
+     flexDirection:'row',
+   },
+   content:{
+       width: 150,
+       fontSize:14,
+       textAlign:'center', 
+       opacity:1,
+       fontFamily:"Brother1816-Medium",
+       paddingTop:15,
+   },
+   monthView:{
+       borderBottomWidth:1, 
+       flexDirection:'row' , 
+       borderColor:"#F2F2F3",
+       flexWrap:"wrap",
+   },
+   monthText:{
+      textAlign: 'center',
+      fontSize: 20,
+      width: 180,
+      opacity:0.5,
+      textAlignVertical:"center",
+      fontFamily:"Brother1816-Medium",
+      paddingTop:11,
+   }
+  });
+  
+export default style;

components/ScrollMonthCalender/style.js

@@ -1,5 +1,5 @@
 {
-  "name": "react-native-number-view",
+  "name": "react-native-scroll-month-calender",
   "version": "0.0.1",
   "description": "A simple React Native scroll calender for Months ",
   "main": "index.js",