React Native în dezvoltarea mobilă: ce este, concepte cheie și cum funcționează

Baze (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — extensie sintactică JavaScript pentru descrierea UI. Arată ca HTML, dar funcționează prin React.createElement(). Expresii JSX: {variable}, {condition && <View />}, {array.map()}. Functional Component — o funcție care returnează JSX. Primește props ca argument. Standard modern React (înainte de React 16.8 se foloseau Class Components). Hooks — funcții pentru accesarea stării și ciclului de viață din Functional Component. Reguli Hooks: doar la nivelul superior, doar în Functional Components.

Referință Hooks

useState — stare locală. useEffect — efecte secundare. useContext — acces la Context. useRef — referință mutabilă. useCallback — memorizare funcție. useMemo — memorizare valoare. Custom Hooks — logică reutilizabilă: function useDebounce(value, delay).

// Functional Component cu hook-uri în 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 — returnează [value, setValue]. setValue — înlocuiește (nu îmbină ca setState în Class). Pentru obiecte: setUser(prev => ({ ...prev, name: 'New' })). useEffect — se execută după randare. Matricea de dependențe: [] — o dată (montare), [dep] — când dep se schimbă, undefined — fiecare randare. Funcție de curățare — return () => {}. useContext — const value = useContext(MyContext). Necesită Context.Provider mai sus în arbore.

useRef — obiect mutabil care păstrează valoarea între randări. .current — mutație. Folosit pentru: acces la elemente native (ref={inputRef}), stocarea valorilor anterioare, timer-e. useCallback — returnează o funcție memorizată. const handlePress = useCallback(() => {}, [dep]). useMemo — returnează o valoare memorizată. const sorted = useMemo(() => data.sort(), [data]). Folosiți useMemo pentru calcule costisitoare.

useState — pentru stare simplă. useEffect — pentru apeluri API și abonamente. useCallback/useMemo — pentru optimizare. IT Sectr recomandă să nu memorizați totul — doar când există probleme reale de performanță.

Custom Hooks

Custom Hook — o funcție care folosește hook-uri încorporate. Numele începe cu use*. Exemple: useDebounce, useNetworkStatus, useAppState, useKeyboard. Custom Hooks sunt principalul mod de reutilizare a logicii în React Native. IT Sectr recomandă extragerea logicii de afaceri în Custom Hooks și menținerea componentelor curate (doar JSX + stiluri).

Componente (View, Text, FlatList, ScrollView, SafeAreaView)

View — container de bază (analog cu div). Text — text (singurul component pentru text). TextInput — introducere text. ScrollView — container derulabil. FlatList — listă virtualizată pentru date mari. SectionList — FlatList cu secțiuni. SafeAreaView — padding automat de la Safe Area (crestătură, bara de stare). Pressable — înlocuitor modern pentru TouchableOpacity. useColorScheme — detectare temă întunecat/deschis.

Optimizare FlatList

FlatList — virtualizare: doar elementele vizibile + windowSize sunt randate. Optimizare: 1) keyExtractor — cheie unică, 2) getItemLayout — înălțime fixă (sare măsurarea onLayout), 3) React.memo pentru renderItem, 4) maxToRenderPerBatch (implicit 10), 5) windowSize (implicit 21), 6) removeClippedSubviews, 7) initialNumToRender.

Navigare în React Native

React Navigation — stivă de navigare standard. NativeStackNavigator — animație nativă (push/pop). TabNavigator — file inferioare. DrawerNavigator — meniu lateral. NavigationContainer — componentul rădăcină de navigare. Deep linking — configurare link-uri pentru link-uri externe. Flux de autentificare — navigare condițională: isAuth ? AppStack : AuthStack. IT Sectr recomandă NativeStackNavigator pentru ecranele principale și TabNavigator pentru navigarea de prim nivel.

Stiluri (StyleSheet)

StyleSheet.create() — creare stiluri. Toate proprietățile în camelCase: backgroundColor, fontSize, marginTop. Flexbox — model de layout implicit (flexDirection: 'column'). Fără cascadă CSS, fără moștenire, fără selectori. Inline styles — funcționează dar nu sunt recomandate. StyleSheet.compose() — combinare stiluri. Platform.select — stiluri specifice platformei: Platform.OS === 'ios' ? styles.ios : styles.android. SafeAreaView — gestionarea inserțiilor safe area.

Styled Components și CSS-in-JS

Styled Components — bibliotecă pentru CSS-in-JS în React Native. Restyle — theming + stiluri responsive. NativeWind — Tailwind CSS pentru React Native. Unistyles — stiluri rapide cu CSS atomic. Mod întunecat — useColorScheme + stiluri dinamice. IT Sectr recomandă StyleSheet.create pentru simplitate și NativeWind pentru proiecte cu sistem de design.

Animație (Animated API)

Animated API — animație declarativă. Animated.Value — valoare de animație. Animated.timing — animație simplă. Animated.spring — animație cu arc. Animated.View — View animabil. useNativeDriver — animație pe thread-ul nativ (transform, opacity — suportate). Animated.loop — animație în buclă. LayoutAnimation — animație automată la schimbarea layout-ului. reanimated 2/3 (bibliotecă) — alternativă mai performantă. Metro Bundler — încasulator JavaScript. Împachetează JS + active într-un bundle. Suportă Fast Refresh (Hot Reload). Hermes — motor JS optimizat pentru mobil: pornire rapidă, mai puțină memorie. Implicit din RN 0.70+.

Gesture Handler și animații

React Native Gesture Handler — procesare nativă a gesturilor. PanGestureHandler, PinchGestureHandler, TapGestureHandler. Gesture (RNGH 2.x) — API declarativ de gesturi. Reanimated + Gesture Handler — combinație pentru animații 60fps cu gesturi. react-native-skia — randare GPU pentru grafică 2D complexă. IT Sectr recomandă Reanimated 3 pentru toate animațiile mai performante decât Animated API.

Rețea (fetch, AsyncStorage, API)

fetch — client HTTP încorporat. Suportă GET, POST, headers, body. Axios — bibliotecă populară cu interceptori. AsyncStorage — stocare cheie-valoare (similar cu UserDefaults). MMKV — alternativă rapidă la AsyncStorage de la WeChat. react-native-keychain — stocare sigură a token-urilor. React Query (TanStack Query) — gestionare stare server: cache, revalidare, paginare. IT Sectr recomandă React Query pentru cererile API și MMKV pentru stocarea locală.

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 și Turbo Modules

Native Module — punte între JS și codul nativ (Java/Kotlin pentru Android, ObjC/Swift pentru iOS). Permite apelarea API-urilor native din JS. Turbo Modules (New Architecture) — înlocuitor pentru vechile Native Modules. Apel sincron, tipizare prin Codegen, mai puțin overhead. Fabric Renderer — nou renderer cu layout sincron. JSI (JavaScript Interface) — acces direct JS la obiecte native fără punte. IT Sectr recomandă Turbo Modules pentru proiecte noi și Native Modules pentru cele existente.

// Modul nativ 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)
    }
}

Testare (Jest, React Native Testing Library)

Jest — rulător de teste standard. describe/it/expect. React Native Testing Library — testare componente. render, fireEvent, waitFor. screen.getByText, getByTestId — căutare. userEvent — simulare acțiuni. Teste Snapshot — toMatchSnapshot(). MSW (Mock Service Worker) — simulare API. Detox — teste E2E pentru RN (grey-box, native). IT Sectr recomandă React Native Testing Library pentru componente și Detox pentru scenarii end-to-end.

CodePush (App Center) — actualizări OTA ale bundle-ului JS fără publicare în App Store/Google Play. Folosit pentru: remedieri rapide, teste A/B, modificări de conținut. Limitări: nu poate modifica codul nativ. Alternative: EAS Update (Expo), react-native-update. IT Sectr recomandă CodePush pentru remedieri urgente și EAS Update pentru proiecte Expo.

Expo — framework pentru React Native. Flux de lucru gestionat — toate configurațiile prin app.json. Development builds — module native personalizate fără eject. Expo SDK — module încorporate: cameră, biometrie, notificări. EAS Build — compilare în cloud. Expo Router — rutare bazată pe fișiere (similar cu Next.js). IT Sectr recomandă Expo pentru proiecte noi și bare RN pentru proiecte cu personalizare nativă profundă.