@sirius-aitech/react-native-main-styles

React Native projeleri için basit ve pratik boyut/typografi yardımcıları:

• wp(%): Ekran genişliğinin yüzdesi
• hp(%): Ekran yüksekliğinin yüzdesi
• responsiveFontSize(size): Genişliğe göre orantılı font (375 tabanlı)
• fontSize(size): responsiveFontSize alias'ı
• fontType(name): Tipografik ağırlık/aile yardımcıları (regular, semiBold vb.)
• fontSizes: Hazır ölçek değerleri (xs–xxl)
• isTablet(): Basit tablet tespiti (genişlik/ yükseklik ≥ 768)

Bu paket, özellikle tablet ve büyük ekranlarda stil değerlerinin mantıklı ölçeklenmesine odaklanır; öğrenmesi kolay, ek bağımlılık gerektirmez.

Kurulum

npm i @sirius-aitech/react-native-main-styles
# veya
yarn add @sirius-aitech/react-native-main-styles
# veya
pnpm add @sirius-aitech/react-native-main-styles

• Ek kurulum veya native linking gerektirmez.
• Gereksinimler: react-native >= 0.71, react >= 18

Hızlı Başlangıç

import { StyleSheet, Text, View } from 'react-native';
// Seçenek A: Default import ile tek isimden kullanım
import RNStyle from '@sirius-aitech/react-native-main-styles';
// veya Seçenek B: İhtiyaç duyduklarınızı isimli olarak alın
// import { wp, hp, fontSize, fontType, fontSizes, setFontConfig, isTablet } from '@sirius-aitech/react-native-main-styles';

// (Opsiyonel) Proje genelinde kullanacağınız font ailelerini tanımlayın
RNStyle.setFontConfig({
  regular: 'Inter-Regular',
  medium: 'Inter-Medium',
  semiBold: 'Inter-SemiBold',
  bold: 'Inter-Bold',
});

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: RNStyle.wp(4), // ekran genişliğinin %4'ü
    paddingVertical: RNStyle.hp(2),   // ekran yüksekliğinin %2'si
  },
  title: {
    fontSize: RNStyle.fontSize(18),   // responsiveFontSize alias
    ...RNStyle.fontType('semiBold'),  // fontFamily veya fontWeight döner
  },
  caption: {
    fontSize: RNStyle.fontSizes.xs,   // hazır ölçek
  },
});

export default function Screen() {
  const tablet = RNStyle.isTablet();

  return (
    <View style={[styles.container, tablet && { paddingHorizontal: RNStyle.wp(6) }]}>
      <Text style={styles.title}>Merhaba</Text>
      <Text style={styles.caption}>Bu metin ekran genişliğine göre ölçeklenir.</Text>
    </View>
  );
}

Tek Seferlik Global Kurulum (Opsiyonel)

Sürekli import etmek istemiyorsanız global yardımcıları bir kez kurabilirsiniz:

// App.tsx veya giriş dosyanız
import { installGlobals } from '@sirius-aitech/react-native-main-styles';
installGlobals('s'); // global 's' isminde yardımcılar

Artık herhangi bir dosyada import ETMEDEN kullanabilirsiniz:

const gap = s.wp(2);
const isPad = s.isTablet();
const title = { fontSize: s.fontSizes.xl, ...s.fontType('bold') };

Notlar:

• Global kullanım, isim çakışmalarına yol açmaması için açık bir adla ('s') kurulmuştur.
• Lint kurallarınız no-undef vb. uyarılar verirse, proje ayarlarınıza globals: { s: 'readonly' } ekleyin.

Global Stil ve Değişken Paketi (Uygulama Geneli)

Örnekteki gibi (pageBottom, InputHeight, flexContainer vs.) tek yerden erişilebilen global stiller/vars değerleri istiyorsanız:

// App.tsx
import { installGlobals } from '@sirius-aitech/react-native-main-styles';
installGlobals('s', {
  withStyles: true,               // global stiller + değişkenler eklensin
  // aşağıdakiler opsiyonel override'lar
  bottomMenuPercent: { ios: 0.1, android: 0.12 }, // varsayılanlar
  inputHeight: { ios: 50, android: 45 },          // varsayılanlar
});

Artık import etmeden şu şekilde kullanabilirsiniz:

// her yerde
const paddingBottom = s.vars.bottomMenuHeight;
const inputStyle = s.styles.InputHeight;      // { height: ... }
const pageBottom = s.styles.pageBottom;       // { paddingBottom: ... }
const center = s.styles.flexAndCenterContainer;

// yardımcılar da aynı nesnede:
const isPad = s.isTablet();
const gap = s.wp(2);

Oluşturulan stiller ve değişkenler:

• s.vars: bottomMenuSize, bottomMenuHeight, inputHeight, screenWidth, screenHeight
• s.styles: pageBottom, InputHeight, flexContainer, flexAndCenterContainer

Not: bottomMenuHeight hesaplaması için Dimensions.get('screen') kullanılır; diğer yüzde yardımcıları Dimensions.get('window') tabanlıdır.

API Referansı

• wp(percentage: number): number

  • Açıklama: Ekran genişliğinin verilen yüzdesini px olarak döner.
  • Örnek: wp(4) // genişliğin %4'ü

• hp(percentage: number): number

  • Açıklama: Ekran yüksekliğinin verilen yüzdesini px olarak döner.
  • Örnek: hp(2) // yüksekliğin %2'si

• responsiveFontSize(size: number): number

  • Açıklama: size * (screenWidth / 375) formülüyle fontu genişliğe göre ölçekler ve en yakın piksele yuvarlar.
  • Örnek: responsiveFontSize(16)

• fontSize(size: number): number

  • Açıklama: responsiveFontSize için kısa ad.
  • Örnek: fontSize(18)

• isTablet(): boolean

  • Açıklama: Dimensions.get('window') değerlerine göre basit tablet kontrolü (genişlik veya yükseklik ≥ 768).

• setFontConfig(config: Partial<Record<FontTypeName, string>>): void

  • Açıklama: Tip adlarını (regular, medium, semiBold, bold, light, extraBold, italic) gerçek fontFamily isimlerinize eşlemenizi sağlar.
  • Not: Bir tip aileye eşlenmemişse, mantıklı bir fontWeight fallback’i kullanılır; italic için fontStyle: 'italic' döner.

• fontType(type: FontTypeName): { fontFamily?, fontWeight?, fontStyle? }

  • Açıklama: Verilen tipe göre stil parçası döndürür; doğrudan stil nesnenize ...fontType('semiBold') şeklinde yayabilirsiniz.

• fontSizes: { xs, sm, md, lg, xl, xxl }

  • Açıklama: responsiveFontSize içinden hesaplanmış hazır sayısal değerler.
  • Not: Bu değerler modül yüklendiğinde hesaplanır.

TypeScript

Paket, tip deklarasyonları ile birlikte gelir; ek konfigürasyon gerektirmez.

import {
  wp, hp, fontSize, fontType, fontSizes, setFontConfig, isTablet,
  type FontTypeName,
} from '@sirius-aitech/react-native-main-styles';

const weight: FontTypeName = 'semiBold';

FontTypeName olası değerleri:

• 'regular' | 'medium' | 'bold' | 'light' | 'semiBold' | 'extraBold' | 'italic'

Kullanım Örnekleri

• Grid/Responsive Layout

const ITEM_GAP = wp(2);
const COLS = isTablet() ? 4 : 2;
const ITEM_WIDTH = (wp(100) - ITEM_GAP * (COLS + 1)) / COLS;

const styles = StyleSheet.create({
  item: {
    width: ITEM_WIDTH,
    marginLeft: ITEM_GAP,
    marginBottom: ITEM_GAP,
  },
});

• Tipografi Sistemi

const H1 = {
  fontSize: fontSizes.xl,
  ...fontType('bold'),
};

const Body = {
  fontSize: fontSizes.md,
  ...fontType('regular'),
};

• Safe Area / Spacing

const screen = {
  paddingHorizontal: wp(5),
  paddingTop: hp(2),
  paddingBottom: hp(3),
};

En İyi Uygulamalar ve Notlar

• Ölçek Tabanı: Font ölçeklemesi, iPhone 11 benzeri 375 px genişlik referans alınarak yapılır. Daha geniş ekranlarda font büyür, daha dar ekranlarda küçülür.
• Yuvarlama: Font değerleri PixelRatio.roundToNearestPixel ile yuvarlanır; keskinlik sorunlarını azaltır.
• Erişilebilirlik: Paket, sistemin erişilebilirlik font ölçek tercihini doğrudan değiştirmez; kendi ölçek formülünü uygular.
• Yön/Orientation Değişimi: width ve height değerleri modül yüklenirken okunur. Ekran yönü değişiminde bu değerler otomatik güncellenmez. Yön değişimini önemseyen ekranlarda:
  • ilgili bileşeni yeniden bağlamak (remount) veya
  • Dimensions.addEventListener('change', ...) ile kendi yeniden hesaplama mantığınızı tetiklemek iyi bir pratiktir.
• Tablet Uyarlamaları: isTablet() hızlı bir kontrol sağlar; grid kolon sayısı, padding, font büyüklüğü gibi alanlarda koşullu değerler kullanın.

SSS

• “fontType('semiBold') neden sadece fontWeight döndürdü?”

  • setFontConfig ile semiBold için bir fontFamily belirtmediyseniz, paket otomatik olarak mantıklı bir fontWeight fallback’i verir.

• “fontSizes değerlerim yön değişince güncellenmiyor.”

  • fontSizes modül yüklenirken hesaplanır. Yön değişimi senaryosunda dinamik hesaplama için fontSize(…) çağrılarını tercih edin veya bileşeni yeniden bağlayın.

Katkıda Bulunma

Sorun/öneri için GitHub üzerinden iletişime geçebilirsiniz:

• Issues: GitHub Issues
• Repo: GitHub Repository

PR’ler memnuniyetle karşılanır.

Lisans

MIT © suelifaydin