react-native-overall-style

React Native için basit boyut yardımcıları:

• wp(%): genişlik yüzdesi
• hp(%): yükseklik yüzdesi
• responsiveFontSize(size): size * (screenWidth / 375)
• isTablet(): ekran boyutuna göre tablet kontrolü

Kurulum

npm i react-native-overall-style
# veya
yarn add react-native-overall-style

Kullanım

import { wp, hp, responsiveFontSize, fontSize, fontType, fontSizes, setFontConfig, isTablet } from 'react-native-overall-style';

const styles = {
  container: {
    paddingHorizontal: wp(4), // ekran genişliğinin %4'ü
    paddingVertical: hp(2),   // ekran yüksekliğinin %2'si
  },
  title: {
    fontSize: fontSize(18), // responsiveFontSize alias
    ...fontType('semiBold'),
  },
};

if (isTablet()) {
  // tablet için alternatif stil/yerleşim uygulanabilir
}
// Özel font aileleri tanımlama (opsiyonel)
setFontConfig({
  regular: 'Inter-Regular',
  medium: 'Inter-Medium',
  semiBold: 'Inter-SemiBold',
  bold: 'Inter-Bold',
});

// Hazır ölçekler
const caption = fontSizes.xs;
const body = fontSizes.md;
const heading = fontSizes.xl;

API

• wp(percentage: number): number
• hp(percentage: number): number
• responsiveFontSize(size: number): number
• fontSize(size: number): number (alias)
• isTablet(): boolean
• setFontConfig(config: Partial<Record<FontTypeName, string>>): void
• fontType(type: FontTypeName): { fontFamily?, fontWeight?, fontStyle? }
• fontSizes: { xs, sm, md, lg, xl, xxl }

TypeScript

Paket, index.d.ts ile tip deklarasyonları içerir. Ek konfigürasyon gerektirmez.

Gereksinimler

• react-native >= 0.71
• react >= 18