jpudysz / react-native-unistyles

Level up your React Native StyleSheet

Home Page:https://unistyl.es

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

fontVariant doesn't work

vbriand opened this issue · comments

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'],
  },
});
  1. The font is still the default one
    image

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

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)

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 ?

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

image

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

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.

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

fontVariant

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.