Warning: Failed prop type: Invalid props.style key `color` supplied to `Image`.

Which OS ?

OS

Version

Which versions are you using:

• react-native-swiper 1.6.0-nightly.5
• react-native v0.60.5

I run the app and then saw this warning:

Warning: Failed prop type: Invalid props.style key color supplied to Image.
Bad object: {
"color": "red",
"width": 20,
"height": 20
}
Valid keys: [
"display",
"width",
"height",
"start",
"end",
"top",
"left",
"right",
"bottom",
"minWidth",
"maxWidth",
"minHeight",
"maxHeight",
"margin",
"marginVertical",
"marginHorizontal",
"marginTop",
"marginBottom",
"marginLeft",
"marginRight",
"marginStart",
"marginEnd",
"padding",
"paddingVertical",
"paddingHorizontal",
"paddingTop",
"paddingBottom",
"paddingLeft",
"paddingRight",
"paddingStart",
"paddingEnd",
"borderWidth",
"borderTopWidth",
"borderStartWidth",
"borderEndWidth",
"borderRightWidth",
"borderBottomWidth",
"borderLeftWidth",
"position",
"flexDirection",
"flexWrap",
"justifyContent",
"alignItems",
"alignSelf",
"alignContent",
"overflow",
"flex",
"flexGrow",
"flexShrink",
"flexBasis",
"aspectRatio",
"zIndex",
"direction",
"shadowColor",
"shadowOffset",
"shadowOpacity",
"shadowRadius",
"transform",
"transformMatrix",
"decomposedMatrix",
"scaleX",
"scaleY",
"rotation",
"translateX",
"translateY",
"resizeMode",
"backfaceVisibility",
"backgroundColor",
"borderColor",
"borderRadius",
"tintColor",
"opacity",
"overlayColor",
"borderTopLeftRadius",
"borderTopRightRadius",
"borderBottomLeftRadius",
"borderBottomRightRadius"
]
in Image (at DynamicTabNavigator.js:25)
in TabBarIcon (at BottomTabBar.tsx:261)
in RCTView (at View.js:35)
in View (at BottomTabBar.tsx:56)
in TouchableWithoutFeedback (at BottomTabBar.tsx:47)
in TouchableWithoutFeedbackWrapper (at BottomTabBar.tsx:408)
in RCTView (at View.js:35)
in View (at createAnimatedComponent.js:151)
in AnimatedComponent (at react-native-safe-area-view/index.js:163)
in SafeView (at withOrientation.js:54)
in withOrientation (at BottomTabBar.tsx:381)
in RCTView (at View.js:35)
in View (at createAnimatedComponent.js:151)
in AnimatedComponent (at BottomTabBar.tsx:355)
in TabBarBottom (at withDimensions.tsx:46)
in withDimensions(undefined) (at DynamicTabNavigator.js:121)
in TabBarComponent (at DynamicTabNavigator.js:93)
in tabBarComponent (at createBottomTabNavigator.tsx:110)
in RCTView (at View.js:35)
in View (at createBottomTabNavigator.tsx:142)
in TabNavigationView (at createTabNavigator.tsx:241)
in NavigationView (at createNavigator.js:80)
in Navigator (at createAppContainer.js:430)
in NavigationContainer (at DynamicTabNavigator.js:107)
in DynamicTabNavigator (at HomePage.js:42)
in HomePage (at renderApplication.js:40)
in RCTView (at View.js:35)
in View (at AppContainer.js:98)
in RCTView (at View.js:35)
in View (at AppContainer.js:115)
in AppContainer (at renderApplication.js:39)
reactConsoleErrorHandler @ ExceptionsManager.js:94

How to fix it?

Reproduce the warning with react-native-swiper 1.6.0-nightly.5 and React Native 0.60.5, then start at DynamicTabNavigator.js:25 from the reported stack trace. Trace the style passed to Image and confirm completion when the warning no longer appears without introducing other rendering issues.