View: ce este, proprietățile containerului și React Native

Ce este View în React Native

View este componenta fundamentală React Native care servește ca container pentru alte componente. Suportă stilizarea prin StyleSheet, layout-ul prin Flexbox, gestionarea atingerilor, animațiile și transformările. View este o abstractizare peste elementele native de container: UIView pe iOS și android.view.View pe Android.

În React Native nu se pot folosi elemente HTML — în schimb toate layout-urile sunt construite din View. Chiar și Text și Image sunt de obicei împachetate în View pentru poziționare. Componenta poate fi goală (doar container) sau poate conține orice număr de elemente copil la orice adâncime.

View suportă redarea pe ambele platforme din același cod JavaScript. Proprietățile Flexbox, marginile, fundalul, umbrele și bordurile funcționează la fel pe iOS și Android. Diferențele de platformă sunt minime — de exemplu, umbrele pe iOS folosesc shadowColor/shadowOffset, iar pe Android — elevation.

Conform React Native Layout Docs, 2024, View este optimizat pentru dispozitive mobile: nu creează reprezentări native inutile la optimizarea flatten și procesează corect actualizarea în cascadă la modificarea stilurilor părintelui.

Proprietățile și API-ul componentei View

Componenta View are un set bogat de props pentru gestionarea aspectului, amplasării și interactivității. Toate props-urile se împart în mai multe categorii: stilizare, evenimente tactile, accesibilitate și caracteristici specifice platformei. Să analizăm grupurile cheie.

Props-uri de stilizare View

View suportă toate proprietățile CSS standard pentru platforme mobile. Principalele: flexDirection, justifyContent, alignItems pentru poziționare; margin, padding pentru margini; backgroundColor, borderRadius pentru aspect; width, height, maxHeight pentru dimensiuni.

Evenimente tactile și gesturi

View poate procesa evenimente tactile prin props-urile onStartShouldSetResponder, onMoveShouldSetResponder și onResponderGrant. Aceste evenimente permit implementarea gesturilor personalizate fără biblioteci. Pentru clicuri standard se folosesc onTouchStart, onTouchEnd și onPress (prin Pressable sau TouchableOpacity).

Props-uri specifice platformei

Pe iOS sunt disponibile shadowColor, shadowOffset, shadowOpacity, shadowRadius pentru umbre. Pe Android aceste proprietăți sunt ignorate — în locul lor se folosește elevation. Callback-urile onLayout sunt apelate la modificarea dimensiunilor View, ceea ce este util pentru layout-uri adaptive.

Layout cu View și Flexbox

Flexbox este singurul mecanism de layout în React Native (spre deosebire de Web unde sunt disponibile Grid și Float). Toată poziționarea elementelor se face prin proprietățile Flexbox ale componentei View. În mod implicit, la View flexDirection este setat pe column, nu pe row ca în Web, ceea ce corespunde orientării verticale a ecranelor mobile.

Proprietățile principale Flexbox în View

flexDirection determină direcția axei principale: column (implicit) sau row. justifyContent gestionează distribuția de-a lungul axei principale (flex-start, center, space-between). alignItems — de-a lungul axei transversale (stretch — valoarea implicită). flex stabilește cota de spațiu disponibil pentru elementul copil.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const CardLayout = () => (
    <View style={styles.card}>
        <View style={styles.row}>
            <View style={styles.avatar} />
            <View style={styles.content}>
                <Text style={styles.name}>John Doe</Text>
                <Text style={styles.role}>Developer</Text>
            </View>
        </View>
    </View>
);

Exemplul arată o structură tipică: View exterior — card, row interior — rând cu avatar și bloc text, content — coloană cu nume și rol. Această structură înnestită de View este standardul pentru orice ecran React Native.

Diferențele dintre View și div HTML

Deși View este conceptual similar cu div HTML, există diferențe cheie între ele care sunt importante de înțeles la transferul codului de pe Web pe React Native. Aceste diferențe privesc redarea, stilurile și comportamentul implicit.

Cea mai importantă diferență — implicit flexDirection: column. Aceasta înseamnă că fără setare explicită, elementele copil sunt aranjate vertical, nu orizontal. A doua diferență: width și height ale View se întind implicit pe tot spațiul disponibil al părintelui (analog cu width: 100% în CSS).

Exemple practice cu View

Să analizăm două exemple reale de utilizare a View în aplicații React Native: centrarea conținutului pe tot ecranul și crearea unei grile adaptive de carduri. Ambele modele se întâlnesc în fiecare proiect.

Exemplul 1: ecran de substituire cu centrare

Pentru crearea stării goale (empty state) se folosește View cu flex: 1 și centrare pe ambele axe. Acesta este modelul standard pentru ecranele de încărcare, erori și liste goale.

const EmptyState = ({ message }) => (
    <View style={styles.container}>
        <Text style={styles.icon}>{icon}</Text>
        <Text style={styles.message}>{message}</Text>
    </View>
);

const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
    icon: { fontSize: 48 },
    message: { fontSize: 16, color: '#666', marginTop: 16 },
});

Combinația justifyContent: center și alignItems: center în View cu flex: 1 centrează conținutul pe ambele axe pe tot ecranul. Acesta este cel mai răspândit model de utilizare a View în React Native.

Exemplul 2: grilă de carduri cu Flexbox

Pentru afișarea două coloane de produse sau articole se folosește View cu flexDirection: row, flexWrap: wrap și View-uri copil cu lățime fixă. Acest model înlocuiește CSS Grid în React Native.

const ProductGrid = ({ products }) => (
    <View style={styles.grid}>
        {products.map((product) => (
            <View key={product.id} style={styles.card}>
                <Image source={{ uri: product.image }} />
                <Text>{product.name}</Text>
            </View>
        ))}
    </View>
);

const styles = StyleSheet.create({
    grid: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
    },
    card: { width: '48%', marginBottom: 16 },
});

În acest exemplu, View exterior cu flexWrap: wrap funcționează ca echivalentul CSS Grid. Fiecare card ocupă 48% din lățime, lăsând spații între coloane. Acesta este modelul tipic pentru cataloage și fluxuri de conținut.