Feature request: React Native style multiple props

[pettomartino]

What will it allow you to do that you can't do today?

Add styles to multiple props or target a different prop (other than style)

Currently in react-native there is no way to target children element, so the standard approach is to create multiple props say you have a input field

<MyFancyInputField containerStyle={} labelStyle={} style={} />

or <ScrollView contentContainerStyle={} />

Option 1

const MyScrollView = styles.ScrollView.withConfig({target: 'contentContainerStyle'})`
  background-color: red;
`

Option 2 (allows multiple props)

const MyFancyInputField = style(InputField)({
  containerStyle: {
    backgroundColor: 'red'
  },
  labelStyle: {
    color: 'blue'
  }
})

Option 3 - Ideal in my option

const contentContainerStyle = css`
  background-color: red;
`
const MyFancyInputField = styles.ScrollView.attrs(() => ({
  contentContainerStyle: toStyleSheet(contentContainerStyle)
}))``

[devalnor]

+1

[krudos]

i will create a PR for this

import {StyleSheet} from 'react-native';

import transform from 'css-to-react-native';
import {RuleSet} from 'styled-components';

const toStyleSheet = (style: RuleSet<object>) => {
   const rules = style
       .toString()
       .replace(/,/g, '')
       .split(';')
       .reduce((acc, curr) => {
           const [key, value] = curr.split(':');
           if (key && value) {
               const temp = [key.trim(), value.trim()];
               acc.push(temp);
           }
           return acc;
       }, []);

   const transformed = transform(rules);

   return StyleSheet.create({style: transformed}).style;
};

this will make this work

const contentContainerStyle = css`
  background-color: red;
`
const MyFancyInputField = styles.ScrollView.attrs(() => ({
  contentContainerStyle: toStyleSheet(contentContainerStyle)
}))``