Components breaks when using custom styles created by StyleSheet.create

NativeBase components, like Footer and Content breaks when you use the style prop passing an object created by ReactNative StyleSheet.create class.

I’m using the following code to reproduce the problem:

import React, { Component } from "react";
import {Container, Header, Content, Footer, Title, Button} from "native-base";

import { get as getDimension } from "Dimensions";

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ScrollView,
} from "react-native";

class AwesomeNativeBase extends Component {

  render() {
    return(
        <Container>
          <Content>
            <Text> Hello nativebase </Text>
          </Content>
          <Footer style={styles.footer}>
            <Text> This is an awesome footer </Text>
          </Footer>
        </Container>
    );
  }
}

const styles = StyleSheet.create({
  footer: {
    backgroundColor: "transparent"
  }
});

AppRegistry.registerComponent("AwesomeNativeBase", () => AwesomeNativeBase);

The error that I get is the following:

If I change the the Footer as show below the component works fine.

          <Footer style={{ backgroundColor: "transparent" }}>
            <Text> This is an awesome footer </Text>
          </Footer>

I tried to look into nativebase base but I couldn’t find exactly why this hapen but I guess this is related to this nativebase file and this React Native breaking change: StyleSheetRegistry has been renamed to ReactNativePropRegistry. This module is private so it shouldn't affect everyone using React Native's public API, though: 433fb33, this breaking change can be found on this React Native release note.

Thanks!

[hoducha]

+1 for this. You can solve this issue by flatten the style object like this:

<Footer style={StyleSheet.flatten(styles.footer)}>
    <Text> This is an awesome footer </Text>
</Footer>

[jjant]

@sanketsahusoft Please do so, it’s very annoying to have to see which library we’re importing components from to decide how we’re going to create style objects.