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

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;