React Native στην ανάπτυξη κινητών: τι είναι, βασικές έννοιες και πώς λειτουργεί

Βασικά (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — συντακτική επέκταση της JavaScript για την περιγραφή UI. Μοιάζει με HTML αλλά λειτουργεί μέσω του React.createElement(). Εκφράσεις JSX: {variable}, {condition && <View />}, {array.map()}. Functional Component — μια συνάρτηση που επιστρέφει JSX. Δέχεται props ως όρισμα. Σύγχρονο πρότυπο React (πριν από το React 16.8 χρησιμοποιούνταν Class Components). Hooks — συναρτήσεις για πρόσβαση στην κατάσταση και τον κύκλο ζωής από το Functional Component. Κανόνες Hooks: μόνο στο ανώτερο επίπεδο, μόνο σε Functional Components.

Αναφορά Hooks

useState — τοπική κατάσταση. useEffect — παρενέργειες. useContext — πρόσβαση στο Context. useRef — μεταβλητή αναφορά. useCallback — απομνημόνευση συνάρτησης. useMemo — απομνημόνευση τιμής. Custom Hooks — επαναχρησιμοποιήσιμη λογική: function useDebounce(value, delay).

// Functional Component με hooks στο React Native
import React, { useState, useEffect, useCallback } from 'react';
import {
  View, Text, FlatList,
  ActivityIndicator, SafeAreaView
} from 'react-native';

const DATA = Array.from({ length: 100 }, (_, i) => ({
  id: String(i),
  title: `Item ${i + 1}`,
}));

const Item = React.memo(({ title }) => (
  <View>
    <Text>{title}</Text>
  </View>
));

export default function App() {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => setRefreshing(false), 2000);
  }, []);

  return (
    <SafeAreaView>
      <FlatList
        data={DATA}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.id}
        refreshing={refreshing}
        onRefresh={onRefresh}
      />
    </SafeAreaView>
  );
}

Hooks (useState, useEffect, useRef, useCallback, useMemo)

useState — επιστρέφει [value, setValue]. setValue — αντικαθιστά (δεν συγχωνεύει όπως το setState στην Class). Για αντικείμενα: setUser(prev => ({ ...prev, name: 'New' })). useEffect — εκτελείται μετά την απόδοση. Πίνακας εξαρτήσεων: [] — μία φορά (προσάρτηση), [dep] — όταν το dep αλλάζει, undefined — κάθε απόδοση. Συνάρτηση καθαρισμού — return () => {}. useContext — const value = useContext(MyContext). Απαιτεί Context.Provider υψηλότερα στο δέντρο.

useRef — μεταβλητό αντικείμενο που διατηρεί την τιμή μεταξύ αποδόσεων. .current — μετάλλαξη. Χρησιμοποιείται για: πρόσβαση σε εγγενή στοιχεία (ref={inputRef}), αποθήκευση προηγούμενων τιμών, χρονοδιακόπτες. useCallback — επιστρέφει μια απομνημονευμένη συνάρτηση. const handlePress = useCallback(() => {}, [dep]). useMemo — επιστρέφει μια απομνημονευμένη τιμή. const sorted = useMemo(() => data.sort(), [data]). Χρησιμοποιήστε το useMemo για ακριβούς υπολογισμούς.

useState — για απλή κατάσταση. useEffect — για κλήσεις API και συνδρομές. useCallback/useMemo — για βελτιστοποίηση. Το IT Sectr συνιστά να μην απομνημονεύετε τα πάντα — μόνο όταν υπάρχουν πραγματικά προβλήματα απόδοσης.

Custom Hooks

Custom Hook — μια συνάρτηση που χρησιμοποιεί ενσωματωμένα hooks. Το όνομα ξεκινά με use*. Παραδείγματα: useDebounce, useNetworkStatus, useAppState, useKeyboard. Τα Custom Hooks είναι ο κύριος τρόπος επαναχρησιμοποίησης λογικής στο React Native. Το IT Sectr συνιστά την εξαγωγή επιχειρηματικής λογικής σε Custom Hooks και τη διατήρηση των στοιχείων καθαρών (μόνο JSX + στυλ).

Στοιχεία (View, Text, FlatList, ScrollView, SafeAreaView)

View — βασικό δοχείο (ανάλογο του div). Text — κείμενο (μοναδικό στοιχείο για κείμενο). TextInput — είσοδος κειμένου. ScrollView — δοχείο με δυνατότητα κύλισης. FlatList — εικονική λίστα για μεγάλα δεδομένα. SectionList — FlatList με ενότητες. SafeAreaView — αυτόματη συμπλήρωση από το Safe Area (εγκοπή, γραμμή κατάστασης). Pressable — σύγχρονη αντικατάσταση για TouchableOpacity. useColorScheme — ανίχνευση σκούρου/φωτεινού θέματος.

Βελτιστοποίηση FlatList

FlatList — εικονικοποίηση: μόνο ορατά στοιχεία + windowSize αποδίδονται. Βελτιστοποίηση: 1) keyExtractor — μοναδικό κλειδί, 2) getItemLayout — σταθερό ύψος (παραλείπει τη μέτρηση onLayout), 3) React.memo για renderItem, 4) maxToRenderPerBatch (προεπιλογή 10), 5) windowSize (προεπιλογή 21), 6) removeClippedSubviews, 7) initialNumToRender.

Πλοήγηση στο React Native

React Navigation — τυπική στοίβα πλοήγησης. NativeStackNavigator — εγγενές κινούμενο σχέδιο (push/pop). TabNavigator — κάτω καρτέλες. DrawerNavigator — πλευρικό μενού. NavigationContainer — ριζικό στοιχείο πλοήγησης. Deep linking — διαμόρφωση συνδέσμων για εξωτερικούς συνδέσμους. Ροή ελέγχου ταυτότητας — υπό όρους πλοήγηση: isAuth ? AppStack : AuthStack. Το IT Sectr συνιστά το NativeStackNavigator για κύριες οθόνες και το TabNavigator για πλοήγηση πρώτου επιπέδου.

Στυλ (StyleSheet)

StyleSheet.create() — δημιουργία στυλ. Όλες οι ιδιότητες σε camelCase: backgroundColor, fontSize, marginTop. Flexbox — προεπιλεγμένο μοντέλο διάταξης (flexDirection: 'column'). Χωρίς αλληλουχία CSS, χωρίς κληρονομικότητα, χωρίς επιλογείς. Inline στυλ — λειτουργούν αλλά δεν συνιστώνται. StyleSheet.compose() — συνδυασμός στυλ. Platform.select — στυλ συγκεκριμένης πλατφόρμας: Platform.OS === 'ios' ? styles.ios : styles.android. SafeAreaView — διαχείριση εσοχών ασφαλούς περιοχής.

Styled Components και CSS-in-JS

Styled Components — βιβλιοθήκη για CSS-in-JS στο React Native. Restyle — θεματοποίηση + αποκριτικά στυλ. NativeWind — Tailwind CSS για React Native. Unistyles — γρήγορα στυλ με ατομικό CSS. Σκοτεινή λειτουργία — useColorScheme + δυναμικά στυλ. Το IT Sectr συνιστά το StyleSheet.create για απλότητα και το NativeWind για έργα με σύστημα σχεδιασμού.

Κινούμενα σχέδια (Animated API)

Animated API — δηλωτικό κινούμενο σχέδιο. Animated.Value — τιμή κινούμενου σχεδίου. Animated.timing — απλό κινούμενο σχέδιο. Animated.spring — ελατηριωτό κινούμενο σχέδιο. Animated.View — View με δυνατότητα κινούμενου σχεδίου. useNativeDriver — κινούμενο σχέδιο στο εγγενές νήμα (transform, opacity — υποστηρίζονται). Animated.loop — επαναλαμβανόμενο κινούμενο σχέδιο. LayoutAnimation — αυτόματο κινούμενο σχέδιο κατά την αλλαγή διάταξης. reanimated 2/3 (βιβλιοθήκη) — εναλλακτική υψηλότερης απόδοσης. Metro Bundler — συγκεντρωτής JavaScript. Συγκεντρώνει JS + πόρους σε ένα bundle. Υποστηρίζει Fast Refresh (Hot Reload). Hermes — μηχανή JS βελτιστοποιημένη για κινητά: γρήγορη εκκίνηση, λιγότερη μνήμη. Προεπιλογή από RN 0.70+.

Gesture Handler και κινούμενα σχέδια

React Native Gesture Handler — εγγενής επεξεργασία χειρονομιών. PanGestureHandler, PinchGestureHandler, TapGestureHandler. Gesture (RNGH 2.x) — δηλωτικό API χειρονομιών. Reanimated + Gesture Handler — συνδυασμός για κινούμενα σχέδια 60fps με χειρονομίες. react-native-skia — απόδοση GPU για σύνθετα 2D γραφικά. Το IT Sectr συνιστά το Reanimated 3 για όλα τα κινούμενα σχέδια υψηλότερης απόδοσης από το Animated API.

Δίκτυο (fetch, AsyncStorage, API)

fetch — ενσωματωμένος πελάτης HTTP. Υποστηρίζει GET, POST, headers, body. Axios — δημοφιλής βιβλιοθήκη με παρεμβολείς. AsyncStorage — αποθήκευση κλειδιού-τιμής (παρόμοιο με UserDefaults). MMKV — γρήγορη εναλλακτική για AsyncStorage από WeChat. react-native-keychain — ασφαλής αποθήκευση διακριτικών. React Query (TanStack Query) — διαχείριση κατάστασης διακομιστή: προσωρινή αποθήκευση, επικύρωση, σελιδοποίηση. Το IT Sectr συνιστά το React Query για αιτήματα API και το MMKV για τοπική αποθήκευση.

import AsyncStorage from '@react-native-async-storage/async-storage';

const storeToken = async (token) => {
  try {
    await AsyncStorage.setItem('@auth_token', token);
  } catch (e) {
    console.error('Storage error:', e);
  }
};

const getToken = async () => {
  try {
    return await AsyncStorage.getItem('@auth_token');
  } catch (e) {
    return null;
  }
};

Native Modules και Turbo Modules

Native Module — γέφυρα μεταξύ JS και εγγενούς κώδικα (Java/Kotlin για Android, ObjC/Swift για iOS). Επιτρέπει την κλήση εγγενών API από JS. Turbo Modules (New Architecture) — αντικατάσταση παλαιών Native Modules. Σύγχρονη κλήση, πληκτρολόγηση μέσω Codegen, λιγότερη επιβάρυνση. Fabric Renderer — νέος αποδότης με σύγχρονη διάταξη. JSI (JavaScript Interface) — άμεση πρόσβαση JS σε εγγενή αντικείμενα χωρίς γέφυρα. Το IT Sectr συνιστά Turbo Modules για νέα έργα και Native Modules για υπάρχοντα.

// Εγγενές module Android (Kotlin)
class CalendarModule(reactContext: ReactApplicationContext) :
    ReactContextBaseJavaModule(reactContext) {

    override fun getName() = "CalendarModule"

    @ReactMethod
    fun createCalendarEvent(name: String, location: String) {
        val intent = Intent(Intent.ACTION_EDIT).apply {
            type = "vnd.android.cursor.item/event"
            putExtra(Events.TITLE, name)
            putExtra(Events.EVENT_LOCATION, location)
        }
        reactContext.startActivity(intent)
    }
}

Δοκιμές (Jest, React Native Testing Library)

Jest — τυπικός εκτελεστής δοκιμών. describe/it/expect. React Native Testing Library — δοκιμές στοιχείων. render, fireEvent, waitFor. screen.getByText, getByTestId — αναζήτηση. userEvent — προσομοίωση ενεργειών. Δοκιμές Snapshot — toMatchSnapshot(). MSW (Mock Service Worker) — προσομοίωση API. Detox — δοκιμές E2E για RN (grey-box, εγγενείς). Το IT Sectr συνιστά το React Native Testing Library για στοιχεία και το Detox για σενάρια από άκρο σε άκρο.

CodePush (App Center) — ενημερώσεις OTA του JS bundle χωρίς δημοσίευση στο App Store/Google Play. Χρησιμοποιείται για: γρήγορες επιδιορθώσεις, δοκιμές A/B, αλλαγές περιεχομένου. Περιορισμοί: δεν μπορεί να αλλάξει εγγενή κώδικα. Εναλλακτικές: EAS Update (Expo), react-native-update. Το IT Sectr συνιστά το CodePush για επείγουσες επιδιορθώσεις και το EAS Update για έργα Expo.

Expo — πλαίσιο για React Native. Διαχειριζόμενη ροή εργασίας — όλες οι διαμορφώσεις μέσω app.json. Development builds — προσαρμοσμένα εγγενή modules χωρίς eject. Expo SDK — ενσωματωμένα modules: κάμερα, βιομετρικά, ειδοποιήσεις. EAS Build — cloud build. Expo Router — δρομολόγηση βάσει αρχείων (παρόμοιο με Next.js). Το IT Sectr συνιστά το Expo για νέα έργα και το bare RN για έργα με βαθιά εγγενή προσαρμογή.