react-native-cross-platform-text
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published

    react-native-cross-platform-text

    codecov

    Crossplatform Text shim, consolidating iOS and Android font weight and font family APIs.

    Installation

    yarn add react-native-crossplatform-text

    or

    npm install --save react-native-crossplatform-text

    Usage

    react-native-cross-platform-text exports wrapped React Native Text components and will transform fontWeight and fontFamily styles so they are compatible with Android's API:

    import { View, StyleSheet } from 'react-native';
    import { Text, TextInput, AnimatedText } from 'react-native-crossplatform-text';
     
    const styles = StyleSheet.create({
      text: {
        fontFamily: 'OpenSans',
        fontWeight: 'bold',
      }
      textInput: {
        fontFamily: 'TittiliumWeb',
        fontWeight: '900',
      },
      animatedText: {
        fontFamily: 'Montessart',
        fontWeight: undefined
      }
    });
     
    const example = () => (
      <View>
        <Text style={styles.text}>Crossplatform text component!</Text>
        <TextInput style={styles.textInput} />
        <AnimatedText style={styles.animatedText}>Crossplatform animated text component!</AnimatedText>
      </View>
    );

    On iOS, styles stay the same, on Android they become:

    text: {
      fontFamily: 'OpenSans-Bold',
      fontWeight: undefined,
    }
    textInput: {
      fontFamily: 'TittiliumWeb-Black',
      fontWeight: undefined,
    }
    animatedText: {
      fontFamily: 'Montessart-Regular',
      fontWeight: undefined,
    }

    To get the most out of this library, please ensure your custom font files are correctly imported and that they follow these naming conventions, i.e.:

    MyFont-Regular.ttf
    MyFont-Bold.ttf
    MyFont-Thin.ttf
    MyFont-ExtraLight.ttf
    MyFont-Medium.ttf
    MyFont-SemiBold.ttf
    MyFont-Bold.ttf
    MyFont-ExtraBold.ttf
    MyFont-Black.ttf
    

    as this is how the library will map font weights.

    Install

    npm i react-native-cross-platform-text

    DownloadsWeekly Downloads

    233

    Version

    0.2.0

    License

    Apache-2.0

    Unpacked Size

    27.7 kB

    Total Files

    21

    Last publish

    Collaborators

    • lendup-jenkins
    • stantoncbradley