Width not found and bgColor fixed

wniemiec-component-reactnative · Aug 11, 2021 · 5ea934a · 5ea934a
1 parent f16ff6a
commit 5ea934a
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wniemiec-component-reactnative/month-picker",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Month selector.",
   "main": "index.js",
   "repository": {

diff --git a/src/MonthPicker/index.js b/src/MonthPicker/index.js
@@ -101,6 +101,7 @@ export default function MonthPicker({
           selected={selectedMonth == index}
           bgColor={bgColor}
           fgColor={fgColor}
+          width={MONTH_WIDTH}
         />
       ))}
     </ScrollView>

diff --git a/src/components/Month/index.js b/src/components/Month/index.js
@@ -8,17 +8,17 @@
  * @format
  */
 
-import React, { useRef, useLayoutEffect } from 'react';
-import { Dimensions, ScrollView, View, Text, TouchableOpacity } from 'react-native';
+import React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
 import styles from './styles';
 
-export default function Month({ key, month, onPress, selected, bgColor, fgColor }) {
+export default function Month({ month, onPress, selected, bgColor, fgColor, width }) {
   return (
     <MonthButton
-      key={key}
       onPress={onPress}
       selected={selected}
-      fgColor={bgColor}
+      bgColor={bgColor}
+      width={width}
     >
       <Text style={buildMonthTextStyle(fgColor)}>
         {month}
@@ -27,12 +27,11 @@ export default function Month({ key, month, onPress, selected, bgColor, fgColor
   );
 }
 
-function MonthButton({ children, key, onPress, selected, bgColor }) {
+function MonthButton({ children, onPress, selected, bgColor, width }) {
   return (
     <TouchableOpacity
-      key={key}
       onPress={onPress}
-      style={buildMonthButtonStyle()}
+      style={buildMonthButtonStyle(width)}
     >
       <View style={buildMonthButtonAreaStyle(selected, bgColor)}>
         {children}
@@ -41,10 +40,10 @@ function MonthButton({ children, key, onPress, selected, bgColor }) {
   );
 }
 
-function buildMonthButtonStyle() {
+function buildMonthButtonStyle(width) {
   return [
     styles.monthButton,
-    { width: MONTH_WIDTH - 20 }
+    { width: width - 20 }
   ];
 }
 

diff --git a/src/components/Month/styles.js b/src/components/Month/styles.js
@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native'
+import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   monthButton: {