[v3] Multiple style arrays can no longer be passed to already styled children

[jordmccord]

Description

You can no longer pass multiple style arrays down as props e.g

// AlertText.tsx

import React, { forwardRef } from 'react';
import { Text, TextProps } from 'react-native';
import { useAlertContext } from './Alert.context';
import { StyleSheet } from 'react-native-unistyles';

const AlertText = forwardRef<Text, TextProps & { semibold?: boolean }>(
  ({ children, semibold = false, ...props }, ref) => {
    const { colorScheme } = useAlertContext();
    styles.useVariants({ colorScheme, semibold });
    return (
      <Text ref={ref} {...props} style={[styles.text, props.style]}>
        {children}
      </Text>
    );
  }
);

AlertText.displayName = 'AlertText';

const styles = StyleSheet.create(theme => ({
  text: {
    fontFamily: theme.fonts.body,
    fontWeight: theme.fontWeights.normal,
    fontSize: theme.fontSizes.md,
    lineHeight: theme.lineHeights.lg,
    flexShrink: 1,
    variants: {
      semibold: {
        true: {
          fontWeight: theme.fontWeights.semibold,
        },
      },
      colorScheme: {
        cyan: {
          color: theme.colors.cyan900,
        },
        red: {
          color: theme.colors.red900,
        },
        green: {
          color: theme.colors.green900,
        },
        gold: {
          color: theme.colors.gold900,
        },
      },
    },
  },
}));

export default AlertText;

// AlertTitle.tsx

import React, { forwardRef } from 'react';
import type { Text, TextProps } from 'react-native';
import { StyleSheet } from 'react-native-unistyles';
import AlertText from './AlertText';

const AlertTitle = forwardRef<Text, TextProps>(({ children, ...props }, ref) => {
  return (
    <AlertText ref={ref} {...props} style={[styles.text, props.style]}>
      {children}
    </AlertText>
  );
});

AlertTitle.displayName = 'AlertTitle';

const styles = StyleSheet.create(theme => ({
  text: {
    fontWeight: theme.fontWeights.semibold,
  },
}));

export default AlertTitle;

The styles from the parent title component are no longer applied.

Steps to Reproduce

1. Add create a component with an array of styles e.g [styles.component, props.style]
2. Pass second array from parent component e.g [styles.parent, props.style]
3. See parent styles are not applied

Snack or Repository Link (Optional)

No response

Unistyles Version

3.0.0-beta.4

React Native Version

0.76.3

Platforms

Android, iOS

Expo

Yes

[jpudysz]

Can you confirm that spreading styles here:

<Text ref={ref} {...props} style={[styles.text, ...props.style]}>

Will work?

It's connected to how we handle styles due to Unistyle is not bound! error that should be fixed in the next beta.5 release.

[jordmccord]

Just tried that and it still doesn't work, it also has type errors
Type 'StyleProp<TextStyle>' must have a '[Symbol.iterator]()' method that returns an iterator.

[jpudysz]

How so?

props.style 

is an array right? So you have something like this:

<Text ref={ref} {...props} style={[styles.text, [styles.text, props.style]}> // pseudo code copied from component above

[jordmccord]

I updated the AlertText to use this:

<Text ref={ref} {...props} style={[styles.text, ...props.style]}>

The AlertTitle component font weight is the weight from the AlertText still as well as giving the type error. The original code worked in v2 and works if I pass the styles like this:

...
<AlertText ref={ref} {...props} style={styles.text}>
...

But for some reason passing in style={[styles.text, props.style]} the child component ignores the styles.

For more context AlertText and AlertTitle

[jpudysz]

Thanks for the clarification. I plan to remove any style limits in the next beta release, so most likely it will be fixed anyway.

Will double check before the release

[jordmccord]

Thank you, I'll give it another go with the next release and report back 👍