Nativebase: Components breaks when using custom styles created by StyleSheet.create

[erickzanardo]

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!

[sankhadeeproy007]

Yes, that is something we too came across while testing. As of now NativeBase only supports inline styles and not style objects. We'll fix this with our next release.

[erickzanardo]

@sankhadeeproy007 Awesome, thanks for the response, I will wait for the next release.

[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>

[sankhadeeproy007]

Hey @hoducha, thanks for helping out. @erickzanardo We got a bit busy with other stuff, expect an update early next week.

[erickzanardo]

@hoducha thanks for the help

@sankhadeeproy007 no problem, take your time :D

Thanks all

[sankhadeeproy007]

It has been fixed and is available in development branch. Not publishing now as we're planning on adding a few more features for the next release. Pull from the development branch if you need it urgently.

[hoducha]

Great. Thanks all.

[dvluong]

Issue still exists in version 2.0.5. Only works if you use version 0.5.11 of nativebase.

[shivrajkumar]

@dvluong version 2.0.5 doesn't support Stylesheet.create yet
http://nativebase.io/docs/v2.0.0/migration

[dvluong]

@shivrajkumar Ahh ok, did not realize it was still in the works, thanks!

[sanketsahu]

@dvluong Actually, it doesn't look like we will ever support Stylesheet.create() because internally it is called by NativeBase engine. You can just pass the CSS object in style props instead.

[jeroenpeeters]

@sanketsahusoft, why can't you support it? Wouldn't it be as simple as checking the type of the style argument? when it's an object let NativeBase call Stylesheet.create(). When it's an number, don't do anything.

[sanketsahu]

@jeroenpeeters

It's not that straightforward because

• If the style attribute gets a number we need to fetch the reverse mapped JS object to get the styles and merge it to the style present in the context because NativeBase has contextual styling which is affected by some base style of the component and the context where the component is being used.
• Also, React Native doesn't provide a way to translate the number of Stylesheet with the corresponding JS object. We manually required some files of React Native with 0.x and we didn't want to add that hack again

[designorant]

Just pointing #510, #525, #527 here for more context on the issue and to point everyone to @hoducha's workaround above in case they prefer to keep all stylesheets in one place.

[jamesjessian]

I've just switched from storing my styles as flat objects to objects generated from StyleSheet.create and got this problem. I can't find any clear reason why anyone should use StyleSheet.create rather than flat objects anyway. Does anyone know? I don't quite understand the performance reasons in the React Native docs:

Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time.

My style objects aren't created in the render method, if that's what this is referring to; I import them so I think they're only created once.

It also allows to send the style only once through the bridge. All subsequent uses are going to refer an id (not implemented yet).

The latter I can understand, but it's apparently not implemented anyway.

But on this note, @sanketsahusoft :

React Native doesn't provide a way to translate the number of Stylesheet with the corresponding JS object.

...isn't that what StyleSheet.flatten does?

[sanketsahu]

@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.

[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.

[manujvashist]

@hoducha this is not working for

[fab1an]

This apparently breaks usage of my styling-library.

[HelloEdit]

This is not working in the latest verison

[jaimevelasquez]

base in your code, I think you miss this code to add
import { StyleSheet } from 'react-native';