@svkTheme – Kurulum ve Gerekli Paketler

Bu paket; CustomText, CustomTextInput, CustomAsyncButton, CustomModal, CustomBottomSheet, CustomKeyboardAvoidingView, CustomSelectList, CustomMultiButton, StarRating, Avatars gibi yeniden kullanılabilir React Native bileşenleri sağlar.

Gerekli NPM Paketleri

Projede aşağıdaki bağımlılıkların kurulu olması gerekir:

Temel (çoğu projede zaten vardır):

• react
• react-native
• react-native-gesture-handler
• react-native-reanimated
• react-native-safe-area-context
• react-native-screens

Bu kütüphane için ek olarak:

• @gorhom/bottom-sheet
• react-native-vector-icons
• react-hook-form
• react-native-keyboard-controller
• i18next
• react-i18next

Kurulum (npm):

npm i @gorhom/bottom-sheet react-native-vector-icons react-hook-form react-native-keyboard-controller i18next react-i18next
npm i react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-screens

Kurulum (yarn):

yarn add @gorhom/bottom-sheet react-native-vector-icons react-hook-form react-native-keyboard-controller i18next react-i18next
yarn add react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-screens

iOS için:

cd ios && pod install

Notlar:

• react-native-reanimated için Babel eklentisinin en sonda olduğundan emin olun:

  // babel.config.js
  plugins: [
    'react-native-reanimated/plugin',
    // module-resolver vs...
  ]

• react-native-vector-icons RN 0.60+ ile otomatik linklenir. iOS’ta pod install yeterlidir.

Yol (Alias) ve Metro Ayarı

Paket proje kökünde svkTheme/ klasöründe duruyorsa, RN app içinde aşağıdaki alias ve metro ayarları gerekir.

• babel.config.js:

// ListifyMobile/babel.config.js
alias: {
  '@': './src',
  '@svkTheme': '../svkTheme',
}

• tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["./*"],
      "@svkTheme/*": ["../svkTheme/*"]
    }
  }
}

• metro.config.js:

// ListifyMobile/metro.config.js
const path = require('path');
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const config = {
  watchFolders: [path.resolve(__dirname, '..', 'svkTheme')],
};
module.exports = mergeConfig(getDefaultConfig(__dirname), config);

• svkTheme/tsconfig.json (editörde tiplerin doğru çözülmesi için):

{
  "extends": "../ListifyMobile/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@svkTheme/*": ["./*"] },
    "types": ["react", "react-native"]
  },
  "include": ["**/*"]
}

Metro’yu cache temizleyerek başlatın:

npm run start -- --reset-cache

Kullanım Örneği

import React from 'react';
import { ThemeProvider, CustomText, CustomTextInput } from '@svkTheme';
import { useForm } from 'react-hook-form';

export default function Example() {
  const { control } = useForm({ defaultValues: { name: '' } });
  return (
    <ThemeProvider initialMode="light">
      <CustomText text="Hello" />
      <CustomTextInput
        title="Name"
        name="name"
        control={control}
        rules={{ required: 'Required' }}
        placeholder="Write..."
      />
    </ThemeProvider>
  );
}