hectahertz / react-native-typography

Pixel–perfect, native–looking typographic styles for React Native ✒️

Hi there! 🤓

react-native-typography's Issues

Material styles doesn't match with the guidelines

I noticed that the styles used for material typography doesn't match with the guidelines and there is no option of "overline" typography.

What's the case? Are you guys fixing this or do I have to use something alternate??

Typescript Support

Hey @hectahertz,

Love the project, Currently the repo has no typed file for typescript imports. There is currently two ways this can be done, it included in your repo, or it to be added to the @types repo.

Is this something you would be interested adding or would you like help?

Thanks

Line height issue (Android vs iOS)

Hi, I have the following style:

class SettingsHomeScreen extends DrawerScreen {
  _onPress = () => {
    // pass
  };
  render() {
    return (
      <View style={styles.container}>
        <ScrollView>
          <View style={styles.card}>
            <View style={styles.card_container}>
              <Touchable onPress={this._onPress}>
                <View style={styles.group}>
                  <Text style={[ material.body2 ]}>Desconectarse</Text>
                </View>
              </Touchable>
            </View>
          </View>
        </ScrollView>
      </View>
    );
  }

I'm using Expo v23, I see the elements are being rendered different in iOS than Android, especially the vertical alignment of the texts. Are the line heights right? looks like the problem is related to them.

Please look these screenshots:

iOS (great):

Android (line height too high):

Include material typography adjustments for tall and dense scripts

Material Design has considerations for tall and dense scripts (perhaps Apple does too)

https://material.io/guidelines/style/typography.html

Twitter Lite has a typography component that adapts its style to the language of the text being rendered within the component. If this module were to include the material adjustments for tall and dense scripts, people could create their AppText/Typography component to automatically select the preferred text weight/size/line-height for a given language.

Does it support other fonts?

Is it me who might misundertsand the meaning of this, but what if I want to use other fonts, such as https://fonts.adobe.com/fonts/proxima-nova. Is that trouble some here or what is the approach to do this?

Republish example with update to Expo

Sorry if this is trivial but I thought you should know. The online example on Expo refuses to render since the project was published using an older version of Expo CLI which is no longer supported. (All Expo users have probably run into this at some point).

The message is:

This project needs an update
This project uses Expo SDK v31.0.0. If you want to open this project, the author will need to update the project's SDK version.

Add it to native.directory

This will be useful to help people discover the library!

Instructions: https://github.com/react-community/native-directory#how-to-add-a-library

Workaround for new material guidelines?

I need help. Since this library doesn't use latest material guidelines, what are you guys using to follow new guidelines. Is there a workaround?

Add support for web

I think this could be really useful for people building web apps with React Native (e.g., using react-native-web). Web apps built with RNW will default the OS system font, but may want to switch between human/material depending on the platform the browser runs on. Do you any questions or thoughts about how to support web?

styled-components expect lineHeight to contain units

I'm trying to use the library with styled-components as mentioned in this example.

The problem is that styled expect the lineHeight to contain units, but there is none. As we can see, for example, human.title1Object:

Object {
  "backgroundColor": "transparent",
  "color": "#000000",
  "fontFamily": "System",
  "fontSize": 28,
  "fontWeight": "400",
  "letterSpacing": 0.355469,
  "lineHeight": 34,
}

If I use the object like this:

export const Title1 = styled(props => <Text {...props} />)`
  ${human.title1Object};
`;

I get this:

Should I hack the library and add a unit to the object by myself or I'm missing something?

Thanks 👋

[README] The logo does not appear properly in the dark mode of Github.

Blank screen on Android app caused by Invalid prop 'letterSpacing' of type 'boolean'

The false in letterSpacing causes a style error to occur on Android and therefore the entire app fails to load. I think it is coming from here: https://github.com/hectahertz/react-native-typography/blob/master/src/collections/human.js#L20

Consider including Platform styles on same Text component

Have you considered being able to have one Text component with arbitrary iOS and Android styles?

Something like:

<Text style={[human.largeTitle, material.display2]}>Hello Typography!</Text>

Then pick the style based on Platform.

Styled Components

How would I use this in styled-components.

Material typography V2

Material design has updated its typography definitions.

any plans to mirror that in this library?

systemWeight black

I was wondering why the systemWeight black is not exported here ?

Is it because it's not available in android ? how about a fallout to bold in case of android ?

Scaling font sizes for bigger screens

Hi there,

First thanks for this awesome lib! It has helped me a lot. One question, though:

Shouldn't it be responsible for scaling for smaller/bigger screen sizes? This is almost required when dealing with Android and even more when dealing with tablets.

Thanks!

iOSUIKit will cut the bottom of Text if contains Chinese characters

The bottom of texts seem to be cut out on Android using iOSUIKit if the texts contain Chinese characters. You may refer to the part A of the screenshot.

I have also tested out with different line heights to get workaround. You may refer to part B for the result.

Environment

• One plus 6T / Android 9
• react-native: 0.59.5
• react-native-typography: 1.4.0

Here is my code for the screenshot.

          <View style={{ marginBottom: 20 }}>
            {/* Part A */}
            <Text style={{ color: '#000' }}>{'Android使用\nnone style (Mg排版)'}</Text>
            <Text style={[material.title]}>{'Android使用\nmaterial.title (Mg排版)'}</Text>
            <Text style={[iOSUIKit.title3, {  }]}>{'Android使用\niOSUIKit.title3 (Mg排版)'}</Text>
            <Text style={[iOSUIKit.body, {  }]}>{'Android使用\niOSUIKit.body (Mg排版)'}</Text>
            <Text style={[iOSUIKit.callout, {  }]}>{'Android使用\niOSUIKit.callout (Mg排版)'}</Text>
            <Text style={[iOSUIKit.subhead, {  }]}>{'Android使用\niOSUIKit.subhead (Mg排版)'}</Text>
            <Text style={[iOSUIKit.footnote, {  }]}>{'Android使用\niOSUIKit.footnote (Mg排版)'}</Text>
            <Text style={[iOSUIKit.caption2, {  }]}>{'Android使用\niOSUIKit.caption2 (Mg排版)'}</Text>
          </View>
          <View>
            {/* Part B */}
            <Text style={{ color: '#000' }}>{'Android使用\nnone style (Mg排版)'}</Text>
            <Text style={[material.title]}>{'Android使用\nmaterial.title (Mg排版)'}</Text>
            <Text style={[iOSUIKit.title3, { lineHeight: iOSUIKit.title3.lineHeight + 2 }]}>{'Android使用\niOSUIKit.title3 (Mg排版)'}</Text>
            <Text style={[iOSUIKit.body, { lineHeight: iOSUIKit.body.lineHeight + 1 }]}>{'Android使用\niOSUIKit.body (Mg排版)'}</Text>
            <Text style={[iOSUIKit.callout, { lineHeight: iOSUIKit.callout.lineHeight + 1 }]}>{'Android使用\niOSUIKit.callout (Mg排版)'}</Text>
            <Text style={[iOSUIKit.subhead, { lineHeight: iOSUIKit.subhead.lineHeight + 1 }]}>{'Android使用\niOSUIKit.subhead (Mg排版)'}</Text>
            <Text style={[iOSUIKit.footnote, { lineHeight: iOSUIKit.footnote.lineHeight + 1 }]}>{'Android使用\niOSUIKit.footnote (Mg排版)'}</Text>
            <Text style={[iOSUIKit.caption2, { lineHeight: iOSUIKit.caption2.lineHeight + 2 }]}>{'Android使用\niOSUIKit.caption2 (Mg排版)'}</Text>
          </View>

Add windows support

I am trying to get this library working for react-native-windows and ran into a similar problem as the react-native-web issure where systemWeights was undefined. I got the library working by making a systemDenseWeights.windows.js, systemTallWeights.windows.js, and systemWeights.windows.js files. Is this the best ways to do this or is there another way the can be done to default the imports when Platform.OS is unknown?

Dark Mode support

Hi,

I never used your lib yet, but very interested to (as I was starting to do a similar thing).
One thing I noticed is that I don't see dark colors (eg: iOS Colors have light & dark values, which are different, same for grey, see https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/)

Is there any plan to handle that? Might be a bit breaking change for color as the api should change (or we could add new api & keep legacy one for backward compat).

Ability to support San Fransisco Compact natively

would be awesome to have San Francisco Compact bundled with this if its something that could be possible.

Missing types for dense and tall

Types of collections mentioned here are missing. For instance,

export var systemDenseWeights: {
  thin: TextStyle;
  light: TextStyle;
  regular: TextStyle;
  semibold: TextStyle;
  bold: TextStyle;
};

Ship babelified code to NPM for the web platform

Should we follow the approach of React Navigation and ship both ES6 and babelified code on npm?

We could use the latter on the web platform and the consumers would not need to worry about Babel.

Add react-native-web to the example app

The example folder of this repo contains an Expo app with examples for both iOS and Android, but there's nothing for web yet.

For now I'm just using this fork of a boilerplate for quick manual testing, but it's not a great long term solution.

An option would be to fully transform the example app into something similar to the boilerplate but we lose the possibility of deploying it to expo which I find very useful.

Another option would be to just share the components and screens and have two separate apps, this would probably fit this use case better.

Split out react-native to support other css-in-js frameworks

I really like this project and would like to use it for web-projects as well (without react-native-web). Would you consider a PR splitting up the file in a way we can import the styling parts without importing react-native?