Get CSS property values from a component's “style” prop

Question

I\'m writing a React Native component for a library and I want users to be able to style it using the style property, just like React.View and other bu

Answer 1

Please have a look on https://github.com/vitalets/react-native-extended-stylesheet#underscored-styles

Style created via extended stylesheet contains original values in underscored prop:

const styles = EStyleSheet.create({
  text: {
    fontSize: '1rem',
    color: 'gray'
  }
});

In runtime:

styles = {
  text: 0,
  _text: {
    fontSize: 16,
    color: 'gray'
  }
}

Answer 2

You need to import StylesheetRegistry:

StyleSheetRegistry = require("../../node_modules/react-native/Libraries/StyleSheet/StyleSheetRegistry"),

Then pass in the style ID:

var style = StyleSheetRegistry.getStyleByID(this.props.style)

Answer 3

The built-in StyleSheet.flatten function (or the identical flattenStyle function) can turn anything that can legitimately be passed to the style prop into an object mapping CSS property names to values. It works on plain objects, IDs returned by StyleSheet.create(), and arrays.

Example usage to check the width specified in the style prop from within a Component definition:

import { StyleSheet } from 'react-native'

// ... then, later, e.g. in a component's .render() method:

let width = StyleSheet.flatten(this.props.style).width;