BugiDev / react-native-calendar-strip

Easy to use and visually stunning calendar component for React Native.
MIT License
933 stars 325 forks source link

markedDates crashing app when any value passed to it #323

Closed aburdiss closed 2 years ago

aburdiss commented 2 years ago

I'm recieving this error (along with 9 others that happen immidiately after it) when passing any value, including an empty array (said to be the default on the docs) or an empty function. Passing in a data object as outlined in the docs doesn't seem to work either:

ERROR  Invariant Violation: [2357,"RCTView",71,{"justifyContent":"center","alignItems":"center","alignSelf":"center","width":0,"height":"<<NaN>>","borderRadius":0,"backgroundColor":0}] is not usable as a native method argument

This error is located at:
    in RCTView (at View.js:34)
    in View (at CalendarDay.js:478)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:217)
    in AnimatedComponent (at createAnimatedComponent.js:278)
    in AnimatedComponentWrapper (at TouchableOpacity.js:221)
    in TouchableOpacity (at TouchableOpacity.js:271)
    in Unknown (at CalendarDay.js:474)
    in RCTView (at View.js:34)
    in View (at CalendarDay.js:521)
    in CalendarDay (at CalendarStrip.js:531)
    in RCTView (at View.js:34)
    in View (at CalendarStrip.js:606)
    in RCTView (at View.js:34)
    in View (at CalendarStrip.js:592)
    in RCTView (at View.js:34)
    in View (at CalendarStrip.js:587)
    in RCTView (at View.js:34)
    in View (at CalendarStrip.js:580)
    in CalendarStrip (at Calendar.js:27)
    in Calendar (at JobDetail.js:200)
    in RCTView (at View.js:34)
    in View (at JobDetail.js:198)
    in RNCSafeAreaView (at JobDetail.js:189)
    in RCTScrollContentView (at ScrollView.js:1107)
    in RCTScrollView (at ScrollView.js:1238)
    in ScrollView (at ScrollView.js:1264)
    in ScrollView (at JobDetail.js:188)
    in JobDetail (at SceneView.tsx:130)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:122)
    in SceneView (at useDescriptors.tsx:181)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:245)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:244)
    in RCTView (at View.js:34)
    in View (at CardSheet.tsx:33)
    in CardSheet (at Card.tsx:573)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:217)
    in AnimatedComponent (at createAnimatedComponent.js:278)
    in AnimatedComponentWrapper (at Card.tsx:555)
    in PanGestureHandler (at GestureHandlerNative.tsx:13)
    in PanGestureHandler (at Card.tsx:549)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:217)
    in AnimatedComponent (at createAnimatedComponent.js:278)
    in AnimatedComponentWrapper (at Card.tsx:544)
    in RCTView (at View.js:34)
    in View (at Card.tsx:538)
    in Card (at CardContainer.tsx:206)
    in CardContainer (at CardStack.tsx:623)
    in RCTView (at View.js:34)
    in View (at Screens.tsx:84)
    in MaybeScreen (at CardStack.tsx:616)
    in RCTView (at View.js:34)
    in View (at Screens.tsx:54)
    in MaybeScreenContainer (at CardStack.tsx:498)
    in CardStack (at StackView.tsx:462)
    in KeyboardManager (at StackView.tsx:458)
    in SafeAreaProviderCompat (at StackView.tsx:455)
    in RCTView (at View.js:34)
    in View (at StackView.tsx:454)
    in StackView (at createStackNavigator.tsx:87)
    in StackNavigator (at JobsStack.js:34)
    in JobsStack (at SceneView.tsx:130)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:122)
    in SceneView (at useDescriptors.tsx:181)
    in RCTView (at View.js:34)
    in View (at BottomTabView.tsx:55)
    in SceneContent (at BottomTabView.tsx:172)
    in RCTView (at View.js:34)
    in View (at ResourceSavingScene.tsx:68)
    in RCTView (at View.js:34)
    in View (at ResourceSavingScene.tsx:63)
    in ResourceSavingScene (at BottomTabView.tsx:166)
    in RCTView (at View.js:34)
    in View (at src/index.native.tsx:145)
    in ScreenContainer (at BottomTabView.tsx:146)
    in SafeAreaProviderCompat (at BottomTabView.tsx:145)
    in BottomTabView (at createBottomTabNavigator.tsx:45)
    in BottomTabNavigator (at App.js:39)
    in AppInside (at App.js:27)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:411)
    in BaseNavigationContainer (at NavigationContainer.tsx:91)
    in ThemeProvider (at NavigationContainer.tsx:90)
    in NavigationContainer (at App.js:26)
    in PreferencesProvider (at App.js:25)
    in QueryClientProvider (at App.js:24)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
    in SafeAreaProvider (at App.js:23)
    in App (at renderApplication.js:47)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:107)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:134)
    in AppContainer (at renderApplication.js:40)

Environment: Xcode 12.5.1 react-native-calendar-strip v. 2.2.4 react-native v. 0.64.1

Usage in my application

<CalendarStrip
      shouldAllowFontScaling={false}
      calendarHeaderStyle={{ color: colors.text }}
      dateNumberStyle={{ color: colors.text }}
      dateNameStyle={{ color: colors.text }}
      highlightDateNumberStyle={{ color: colors.text }}
      highlightDateNameStyle={{ color: colors.text }}
      rightSelector={
        <Ionicons name="chevron-forward" color={colors.text} size={24} />
      }
      leftSelector={
        <Ionicons name="chevron-back" color={colors.text} size={24} />
      }
      // eslint-disable-next-line react-native/no-inline-styles
      style={{
        height: 80,
        paddingVertical: 5,
      }}
      minDate={new Date()}
      maxDate={
        route.params.auditionDate
          ? getDateFromString(route.params.auditionDate)
          : getDateFromString(route.params.closingDate)
      }
      markedDates={[
        {
          date: new Date(),
          lines: [{ color: colors?.green ?? 'rgb(255, 255, 255)' }],
        },
        {
          date: getDateFromString(route.params.closingDate),
          lines: [
            {
              color:
                typeof colors.orange == 'string'
                  ? colors.orange
                  : 'rgb(255, 255, 255)',
            },
          ],
        },
        {
          date: getDateFromString(route.params.auditionDate),
          lines: [{ color: colors?.red ?? 'rgb(255, 255, 255)' }],
        },
      ]}
    />
peacechen commented 2 years ago

This may have been fixed in 2.2.5 that was recently released

aburdiss commented 2 years ago

This update fixed this issue! Thanks for the update 🙏