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:
nativebaseerror

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!

4 thoughts on “Components breaks when using custom styles created by StyleSheet.create

  1. +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>
  2. @bishbashbosh123 We can add the compatibility of Stylesheet.create() but that wouldn’t add anything to the performance here because StyleSheet.create passes the object to the native layer only once and if we fetch the object in the JS layer and pass the object again to the native layer. It doesn’t make sense.

    But we are going to add the support of Stylesheet.create() in the next version.

Comments are closed.