rn-responsive-typography

🎨 A lightweight React Native utility library that standardizes font sizes and line heights across your app for consistent typography.

Easily define and reuse scalable text styles to maintain visual harmony and improve readability on all screen sizes.

✨ Features

• 📱 Responsive font sizes - Automatically scale across different screen sizes
• 📏 Paired line heights - Pre-calculated line heights for perfect typography
• 🎯 Ready-to-use values - fontSize10, fontSize12, fontSize14... up to fontSize84
• 🎨 Consistent design - Maintain visual harmony across your entire app
• ⚡ Zero configuration - Works out of the box
• 📦 Lightweight - Minimal bundle size impact
• 🔧 TypeScript support - Full type definitions included

🚀 Installation

npm install rn-responsive-typography

or

yarn add rn-responsive-typography

📖 Usage

Basic Usage

import React from 'react';
import { Text, View } from 'react-native';
import { fontSize16, fontSize24, lignHeight20, lignHeight28 } from 'rn-responsive-typography';

const MyComponent = () => {
  return (
    <View>
      <Text style={{ fontSize: fontSize24, lineHeight: lignHeight28 }}>
        Large Title
      </Text>
      <Text style={{ fontSize: fontSize16, lineHeight: lignHeight20 }}>
        Body text that looks great on all screen sizes
      </Text>
    </View>
  );
};

Available Font Sizes

// Font sizes (responsive values)
fontSize10, fontSize12, fontSize14, fontSize16, fontSize18, fontSize20,
fontSize22, fontSize24, fontSize26, fontSize28, fontSize30, fontSize32,
fontSize34, fontSize36, fontSize38, fontSize40, fontSize42, fontSize44,
fontSize46, fontSize48, fontSize50, fontSize52, fontSize54, fontSize56,
fontSize58, fontSize60, fontSize62, fontSize64, fontSize66, fontSize68,
fontSize70, fontSize72, fontSize74, fontSize76, fontSize78, fontSize80,
fontSize82, fontSize84

// Line heights (optimized for readability)
lignHeight20, lignHeight21, lignHeight22, lignHeight23, lignHeight24,
lignHeight26, lignHeight27, lignHeight28, lignHeight29, lignHeight30,
lignHeight32, lignHeight34, lignHeight38, lignHeight43, lignHeight47,
lignHeight51, lignHeight53, lignHeight56, lignHeight57, lignHeight60,
lignHeight72

Helper Functions

import { resFontSize, screenHeight, screenWidth } from 'rn-responsive-typography';

// Custom responsive font size
const customFontSize = resFontSize(2.5); // 2.5% of screen height

// Screen dimensions as percentage
const headerHeight = screenHeight("10%"); // 10% of screen height
const buttonWidth = screenWidth("80%");   // 80% of screen width

📏 How It Works

The library uses responsive calculations based on:

• Screen dimensions - Adapts to different device sizes
• Optimized ratios - Pre-calculated font-to-line-height ratios
• Accessibility standards - Follows platform typography guidelines

💡 Why rn-responsive-typography?

Before

// Hard to maintain, inconsistent across devices
<Text style={{ fontSize: 16, lineHeight: 20 }}>Title</Text>
<Text style={{ fontSize: 14, lineHeight: 18 }}>Subtitle</Text>

After

// Consistent, responsive, maintainable
<Text style={{ fontSize: fontSize16, lineHeight: lignHeight20 }}>Title</Text>
<Text style={{ fontSize: fontSize14, lineHeight: lignHeight22 }}>Subtitle</Text>

🎨 Best Practices

1. Consistent Pairing: Always pair font sizes with appropriate line heights
2. Semantic Usage: Use larger sizes for headings, smaller for body text
3. Accessibility: The pre-defined ratios ensure good readability
4. Performance: Import only what you need

🔧 API Reference

Font Sizes

All font sizes are calculated as percentages of screen height for optimal responsiveness.

Line Heights

Line heights are calculated as percentages of screen width to maintain proper text flow.

Helper Functions

• resFontSize(percentage) - Custom responsive font size
• screenHeight(percentage) - Get percentage of screen height
• screenWidth(percentage) - Get percentage of screen width

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT License - see the LICENSE file for details.

🙏 Credits

Built with ❤️ using create-react-native-library

Made with ❤️ for the React Native community