CODEWITHSUNDEEP
javascriptreactjsreact-nativenative-base
Amar Ratna Shakya
Amar Ratna Shakya

Reputation: 588

React-Native: Native-base: failed prop type: Invalid props.style key "NativeBase" supplied to "View"

Version:

react: 16.3.1

react-native: ~0.55.2

native-base: ^2.8.0

Issue:Warning: Failed prop type: Invalid props.style key 'NativeBase' supplied to 'View'

Platform: iOS & Android

i get this warning in react-native project whenever i integrate the native-base to the project.

Here is the code for this.

import {
  View,
  TouchableHighlight,
  StyleSheet,
  Image,
  Dimensions,
  ScrollView,
  SafeAreaView
} from "react-native";
import { Button, Text } from "native-base";

<ScrollView>
            {props.detail.site_url !== '#' ? (
              <View style={styles.visitButton}>
                <TouchableHighlight>
                  <Button
                    success
                    onPress={() => props.visitSite(props.detail.site_url)}
                  >
                    <Text>{props.detail.name}</Text>
                  </Button>
                </TouchableHighlight>
              </View>
            ) : (
                <View></View>
              )}
          </ScrollView>

const styles = Stylesheet.create({
visitButton: {
    flex: 1,
    marginVertical: 20,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  }
})

enter image description here

Upvotes: 1

Views: 1586

Answers (1)

R.Duteil
R.Duteil

Reputation: 1227

It seems there is an issue in a file from the library you are using.

They have nested a style inside another, thus leading to this warning. You can see this on the screenshot you provided :

{
    "borderRadius": 5,
    "NativeBase": {
        // NativeBase block
    },
},
"Icon": {
    // Icon block
},

The "NativeBase" block should not be nested into another block, it should be on the same level as "Icon", as in the following :

{
    "borderRadius": 5,
},
"NativeBase": {
    // NativeBase block
},
"Icon": {
    // Icon block
},

To fix it, you can manually change the file in your libraries or wait for a fix from the autor and update native-base at this moment.

Upvotes: 1

Related Questions