React Native in mobile development: what it is, key concepts and how it works

Basics (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — syntactic extension of JavaScript for describing UI. Looks like HTML but works through React.createElement(). JSX expressions: {variable}, {condition && <View />}, {array.map()}. Functional Component — a function that returns JSX. Accepts props as an argument. Modern React standard (Class Components were used before React 16.8). Hooks — functions for accessing state and lifecycle from Functional Component. Hooks rules: only at the top level, only in Functional Components.

Hooks Reference

useState — local state. useEffect — side effects. useContext — access to Context. useRef — mutable ref. useCallback — function memoization. useMemo — value memoization. Custom Hooks — reusable logic: function useDebounce(value, delay).

// Functional Component with hooks in 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 — returns [value, setValue]. setValue — replaces (not merges like setState in Class). For objects: setUser(prev => ({ ...prev, name: 'New' })). useEffect — runs after render. Dependency array: [] — once (mount), [dep] — when dep changes, undefined — every render. Cleanup function — return () => {}. useContext — const value = useContext(MyContext). Requires Context.Provider higher in the tree.

useRef — mutable object that persists value across renders. .current — mutation. Used for: access to native elements (ref={inputRef}), storing previous values, timers. useCallback — returns a memoized function. const handlePress = useCallback(() => {}, [dep]). useMemo — returns a memoized value. const sorted = useMemo(() => data.sort(), [data]). Use useMemo for expensive computations.

useState — for simple state. useEffect — for API calls and subscriptions. useCallback/useMemo — for optimization. IT Sectr recommends not memoizing everything — only when real performance issues occur.

Custom Hooks

Custom Hook — a function that uses built-in hooks. Name starts with use*. Examples: useDebounce, useNetworkStatus, useAppState, useKeyboard. Custom Hooks are the primary way to reuse logic in React Native. IT Sectr recommends extracting business logic into Custom Hooks and keeping components clean (only JSX + styles).

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

View — basic container (analogous to div). Text — text (only component for text). TextInput — text input. ScrollView — scrollable container. FlatList — virtualized list for large data. SectionList — FlatList with sections. SafeAreaView — automatic padding from Safe Area (notch, status bar). Pressable — modern replacement for TouchableOpacity. useColorScheme — dark/light theme detection.

FlatList Optimization

FlatList — virtualization: only visible items + windowSize are rendered. Optimization: 1) keyExtractor — unique key, 2) getItemLayout — fixed height (skips onLayout measurement), 3) React.memo for renderItem, 4) maxToRenderPerBatch (default 10), 5) windowSize (default 21), 6) removeClippedSubviews, 7) initialNumToRender.

Navigation in React Native

React Navigation — standard navigation stack. NativeStackNavigator — native animation (push/pop). TabNavigator — bottom tabs. DrawerNavigator — side menu. NavigationContainer — root navigation component. Deep linking — linking config for external links. Authentication flow — conditional navigation: isAuth ? AppStack : AuthStack. IT Sectr recommends NativeStackNavigator for main screens and TabNavigator for first-level navigation.

Styles (StyleSheet)

StyleSheet.create() — creating styles. All properties in camelCase: backgroundColor, fontSize, marginTop. Flexbox — default layout model (flexDirection: 'column'). No CSS cascade, no inheritance, no selectors. Inline styles — work but not recommended. StyleSheet.compose() — combining styles. Platform.select — platform-specific styles: Platform.OS === 'ios' ? styles.ios : styles.android. SafeAreaView — managing safe area insets.

Styled Components and CSS-in-JS

Styled Components — library for CSS-in-JS in React Native. Restyle — theming + responsive styles. NativeWind — Tailwind CSS for React Native. Unistyles — fast styles with atomic CSS. Dark mode — useColorScheme + dynamic styles. IT Sectr recommends StyleSheet.create for simplicity and NativeWind for projects with a design system.

Animation (Animated API)

Animated API — declarative animation. Animated.Value — animation value. Animated.timing — simple animation. Animated.spring — spring animation. Animated.View — animatable View. useNativeDriver — animation on the native thread (transform, opacity — supported). Animated.loop — looped animation. LayoutAnimation — automatic animation on layout change. reanimated 2/3 (library) — more performant alternative. Metro Bundler — JavaScript bundler. Bundles JS + assets into a bundle. Supports Fast Refresh (Hot Reload). Hermes — JS engine optimized for mobile: fast startup, less memory. Default since RN 0.70+.

Gesture Handler and Animations

React Native Gesture Handler — native gesture processing. PanGestureHandler, PinchGestureHandler, TapGestureHandler. Gesture (RNGH 2.x) — declarative gesture API. Reanimated + Gesture Handler — combination for 60fps animations with gestures. react-native-skia — GPU rendering for complex 2D graphics. IT Sectr recommends Reanimated 3 for all animations more performant than Animated API.

Networking (fetch, AsyncStorage, API)

fetch — built-in HTTP client. Supports GET, POST, headers, body. Axios — popular library with interceptors. AsyncStorage — key-value storage (similar to UserDefaults). MMKV — fast alternative to AsyncStorage from WeChat. react-native-keychain — secure token storage. React Query (TanStack Query) — server state management: caching, revalidation, pagination. IT Sectr recommends React Query for API requests and MMKV for local storage.

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 and Turbo Modules

Native Module — bridge between JS and native code (Java/Kotlin for Android, ObjC/Swift for iOS). Allows calling native APIs from JS. Turbo Modules (New Architecture) — replacement for old Native Modules. Synchronous call, typing via Codegen, less overhead. Fabric Renderer — new renderer with synchronous layout. JSI (JavaScript Interface) — direct JS access to native objects without a bridge. IT Sectr recommends Turbo Modules for new projects and Native Modules for existing ones.

// Android Native Module (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)
    }
}

Testing (Jest, React Native Testing Library)

Jest — standard test runner. describe/it/expect. React Native Testing Library — component testing. render, fireEvent, waitFor. screen.getByText, getByTestId — search. userEvent — action simulation. Snapshot tests — toMatchSnapshot(). MSW (Mock Service Worker) — API mocking. Detox — E2E tests for RN (grey-box, native). IT Sectr recommends React Native Testing Library for components and Detox for end-to-end scenarios.

CodePush (App Center) — OTA updates of JS bundle without publishing to App Store/Google Play. Used for: hot fixes, A/B tests, content changes. Limitations: cannot change native code. Alternatives: EAS Update (Expo), react-native-update. IT Sectr recommends CodePush for urgent fixes and EAS Update for Expo projects.

Expo — framework for React Native. Managed workflow — all configs through app.json. Development builds — custom native modules without eject. Expo SDK — built-in modules: camera, biometrics, notifications. EAS Build — cloud builds. Expo Router — file-based routing (similar to Next.js). IT Sectr recommends Expo for new projects and bare RN for projects with deep native customization.