React-native-calendars: Warning: Failed prop type: Calendar: prop type `style` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.

Created on 5 Dec 2020 · 9Comments · Source: wix/react-native-calendars

Please make our job easier by filling this template out to completion. If you're requesting a feature instead of reporting a bug, please feel free to skip the Environment and Reproducible Demo sections.

Description

Hi, I have this big warning pop-up when I load my view with a Calendar component in it.

Warning: Failed prop type: Calendar: prop typestyleis invalid; it must be a function, usually from theprop-typespackage, but receivedundefined.

Expected Behavior

What action did you perform, and what did you expect to happen?

initialize new expo project
npm install react-native-calendars
Implemented in my view :

export default function HomeScreen({ navigation }) {
    return (
        <SafeAreaView style={styles.background}>
            <View style={styles.header}>
                <Text style={styles.subtitle}>
                    Calendrier des
                </Text>
                <Text style={styles.title}>
                    Tâches
                </Text>
            </View>
            <View style={styles.calendar}>
                <Calendar
                    onDayPress={(day) => selectedDay(day)}
                        theme={{
                            calendarBackground: color.backgroundColor,
                            arrowColor: color.black,
                            textMonthFontWeight: "bold",
                            todayTextColor: color.green,
                        }}
                    enableSwipeMonths={true}
                    markingType={'simple'}
                />
            </View>
        </SafeAreaView>
    );
}

Observed Behavior

What actually happened when you performed the above actions?

If there's an error message, please paste the full terminal output and error message in this code block:

Warning: Failed prop type: Calendar: prop type `style` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.
    in Calendar (at HomeScreen.js:37)
    in HomeScreen (created by SceneView)
    in StaticContainer
    in StaticContainer (created by SceneView)
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by CardContainer)
    in div (created by View)
    in View (created by CardContainer)
    in div (created by View)
    in View (created by CardContainer)
    in div (created by View)
    in View (created by ForwardRef(CardSheet))
    in ForwardRef(CardSheet) (created by Card)
    in div (created by View)
    in View (created by AnimatedComponent)
    in AnimatedComponent (created by ForwardRef(AnimatedComponentWrapper))
    in ForwardRef(AnimatedComponentWrapper) (created by Card)
    in Dummy (created by Card)
    in div (created by View)
    in View (created by AnimatedComponent)
    in AnimatedComponent (created by ForwardRef(AnimatedComponentWrapper))
    in ForwardRef(AnimatedComponentWrapper) (created by Card)
    in div (created by View)
    in View (created by Card)
    in Card (created by CardContainer)
    in CardContainer (created by CardStack)
    in div (created by View)
    in View (created by MaybeScreen)
    in MaybeScreen (created by CardStack)
    in div (created by View)
    in View (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by CardStack)
    in CardStack (created by Context.Consumer)
    in KeyboardManager (created by Context.Consumer)
    in div (created by View)
    in View (created by NativeSafeAreaView)
    in NativeSafeAreaView (created by SafeAreaProvider)
    in SafeAreaProvider (created by Context.Consumer)
    in SafeAreaProviderCompat (created by StackView)
    in div (created by View)
    in View (created by StackView)
    in StackView (created by StackNavigator)
    in StackNavigator (at App.js:20)
    in EnsureSingleNavigator (created by ForwardRef(BaseNavigationContainer))
    in ForwardRef(BaseNavigationContainer) (created by ForwardRef(NavigationContainer))
    in ThemeProvider (created by ForwardRef(NavigationContainer))
    in ForwardRef(NavigationContainer) (at App.js:19)
    in App (created by ExpoRootComponent)
    in ExpoRootComponent (created by RootComponent)
    in RootComponent
    in div (created by View)
    in View (created by AppContainer)
    in div (created by View)
    in View (created by AppContainer)
    in AppContainer

Environment

Please run these commands in the project folder and fill in their results:

npm ls react-native-calendars:
/home/thibaultp/angel/angel-project/angelMobileApp
└── [email protected]
npm ls react-native:
/home/thibaultp/angel/angel-project/angelMobileApp
└── UNMET PEER DEPENDENCY [email protected]

npm ERR! peer dep missing: react-native@^0.47.2, required by [email protected]

Also specify:

Phone/emulator/simulator & version:
Emulating on Expo iPhone X IOS 14.2

Reproducible Demo

Please provide a minimized reproducible demonstration of the problem you're reporting.

Issues that come with minimal repro's are resolved much more quickly than issues where a maintainer has to reproduce themselves.

Bug report

Source

Retwix

👍9

Most helpful comment

I opened a PR to fix this issue here : https://github.com/wix/react-native-calendars/pull/1406

yoangau on 8 Feb 2021

👍3

All 9 comments

Also seeing this issue with EXPO SDK 39 on an iPhone XS Max running 14.2

tkukla on 8 Dec 2020

I had the same issue but in test env. Use Jest + Enzyme (do shallow rendering).
Warning: Failed prop type: Calendar: prop type style is invalid; it must be a function, usually from the prop-types package, but received undefined.