fontVariant doesn't work

[Valentin Briand]

Description

Hello,
The fontVariant style doesn't work in unistyles as it appears to always be undefined.

Steps to reproduce

1. Create a style with fontVariant: ['tabular-nums'] for instance and use it on a Text component. The example is on iOS as the numbers in the default Android font already have the same size but the issue is the same with other fonts.

import { type FC } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStyleSheet, useStyles } from 'react-native-unistyles';

export const MenuView: FC = () => {
  const { styles } = useStyles(stylesheet);

  return (
    <View style={styles.screen}>
      <View style={styles.container}>
        <View>
          <Text>Stylesheet</Text>
          <Text style={rnStylesheet.text}>000000</Text>
          <Text style={rnStylesheet.text}>111111</Text>
          <Text style={rnStylesheet.text}>222222</Text>
        </View>
        <View>
          <Text>Unistyles</Text>
          <Text style={styles.text}>000000</Text>
          <Text style={styles.text}>111111</Text>
          <Text style={styles.text}>222222</Text>
        </View>
      </View>
    </View>
  );
};

const rnStylesheet = StyleSheet.create({
  text: {
    fontVariant: ['tabular-nums'],
  },
});

const stylesheet = createStyleSheet({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: 200,
  },
  screen: {
    alignItems: 'center',
    backgroundColor: 'white',
    flex: 1,
  },
  text: {
    fontVariant: ['tabular-nums'],
  },
});

3. The font is still the default one
   

4. When inspecting the text styled with unistyles, fontVariant is undefined.
   

Snack or a link to a repository (optional)

No response

Unistyles version

2.5.0 (happened in 2.4.0 also)

React Native version

0.73.4 (Expo 50.0.6)

Platforms

Android, iOS

Engine

Hermes

Architecture

Paper (old)

[Jacek Pudysz]

Yeah for sure it won't work as I didn't know about this prop. I have to list all props that accept arrays in the Unistyles core.

Can you try with strings: https://reactnative.dev/docs/text-style-props#fontvariant ?

[Valentin Briand]

It does indeed work with strings but strangely I am getting a TypeScript error in this case, even with StyleSheet.

[Jacek Pudysz]

Ok thanks for the tests. I will create a patch release later this week ☺️

[Eike Foken]

FYI @vbriand, the fontVariant TypeScript type is not correct in react-native package 😉 Support for strings was added in RN 0.71, but TypeScript has not yet been updated.

[Jacek Pudysz]

@efoken is right, React Native types support only array of strings:

When RN updates the type, it should automatically work in Unistyles.

I've added missing support for an array of fontVariants.

I will release version 2.5.1 shortly.