React Native — Comprehensive Notes

1. Introduction

React Native is a cross-platform mobile development framework built by Facebook. It allows

Unlike hybrid frameworks (Cordova, Ionic), React Native renders real native UI components — not
WebViews — which gives performance close to native apps.

2. Core Architecture

React Native architecture consists of three main layers:

1. JavaScript Thread (JS Layer)

o Runs JavaScript code (business logic, React components).

o Handles UI state, API calls, navigation, etc.

2. Bridge

o A communication channel between JS and Native threads.

o Translates JS calls (e.g., “show alert”) into native calls (Objective-C/Java).

3. Native Thread (Platform Layer)

o Executes native code (UI rendering, camera, sensors, etc.).

o Uses platform-specific components for UI (e.g., UIView in iOS, View in Android).

3. Environment Setup

• Install [Link] and npm.

• Install Expo CLI or React Native CLI.

• Install Android Studio and/or Xcode.

• Common setup:

• npx create-expo-app MyApp

• cd MyApp

• npm start

Expo simplifies development by handling native dependencies internally.

4. React Native vs React

Platform Web iOS, Android

DOM HTML DOM Native UI components

Styling CSS [Link]() (similar to CSS)

Rendering Browser Mobile UI

Navigation React Router React Navigation

Animation CSS/Framer Motion Animated API, Reanimated

5. Core Components

React Native provides core UI components equivalent to HTML tags but rendered natively.

React Native Web Equivalent Description

<View> <div> Container for layout and structure

<Text> <p> / <span> Displays text

<Image> <img> Renders images

<ScrollView> <div> (scrollable) Enables scrolling content

<TextInput> <input> Input field

<Button> <button> Clickable button

<TouchableOpacity> — Wrapper for pressable elements with opacity feedback

<FlatList> — Optimized list rendering

<SectionList> — List with grouped sections

6. Styling

React Native uses JavaScript objects instead of CSS.

const styles = [Link]({

container: {

flex: 1,

backgroundColor: '#fff',

justifyContent: 'center',

alignItems: 'center',
 },

text: {

fontSize: 20,

color: 'black',

},

});

Flexbox is the default layout system.

7. Navigation

React Native uses React Navigation for routing and navigation.

npm install @react-navigation/native

npm install @react-navigation/stack

Basic Example:

import { NavigationContainer } from '@react-navigation/native';

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {

return (

<NavigationContainer>

<[Link]>

<[Link] name="Home" component={HomeScreen} />

<[Link] name="Details" component={DetailsScreen} />

</[Link]>

</NavigationContainer>

);

Types of navigation:

• Stack Navigation — standard screen transitions.

• Drawer Navigation — side menu navigation.

8. State Management

Same as React:

• useState, useEffect, useContext for local/global state.

• Redux or Zustand for advanced state management.

const [count, setCount] = useState(0);

9. Networking

Uses the same APIs as the web:

• fetch() or Axios for HTTP requests.

useEffect(() => {

fetch('[Link]

.then(res => [Link]())

.then(data => setPosts(data));

}, []);

10. Local Storage

Options for persistent data:

• AsyncStorage (simple key-value)

• SQLite (structured data)

• Realm / WatermelonDB (complex data sync)

Example using AsyncStorage:

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

await [Link]('token', 'abc123');

11. Permissions and Native APIs

Access device features through:

• Camera (expo-camera or react-native-camera)

• Location (expo-location)
 • Vibration (Vibration API)

• Push Notifications (expo-notifications)

Permissions are handled via:

import * as Permissions from 'expo-permissions';

const { status } = await [Link]([Link]);

12. Animations

• Animated API (built-in)

• Reanimated 2 (performance-optimized)

• Lottie (vector animations)

Example:

const fadeAnim = useRef(new [Link](0)).current;

useEffect(() => {

[Link](fadeAnim, { toValue: 1, duration: 2000, useNativeDriver: true }).start();

}, []);

13. Handling Platform Differences

Use Platform module for conditional rendering.

import { Platform } from 'react-native';

const font = [Link] === 'ios' ? 'Avenir' : 'Roboto';

Use .[Link] or .[Link] file extensions for platform-specific code.

14. Debugging

• Use React Native Debugger or Flipper.

• Enable remote debugging via Metro bundler (Ctrl + M or Cmd + M).

• Inspect elements with React DevTools.

15. Performance Optimization

• Avoid unnecessary re-renders (use [Link]).

• Use FlatList instead of mapping arrays directly.

• Use useCallback and useMemo hooks.

• Minimize bridge communication by batching JS-native calls.

16. Testing

• Jest for unit testing.

• React Native Testing Library for UI testing.

• Detox for end-to-end testing.

Example test:

import { render } from '@testing-library/react-native';

test('renders welcome text', () => {

const { getByText } = render(<App />);

expect(getByText('Welcome')).toBeTruthy();

});

17. Deployment

Android

npx react-native run-android

iOS

npx react-native run-ios

Expo Publish

npx expo publish

18. File Structure Example

MyApp/

├── [Link]

├── [Link]

├── src/

│ ├── components/

│ ├── screens/

│ ├── navigation/
│ ├── context/

│ ├── assets/

│ └── utils/

├── android/

├── ios/

└── [Link]

19. Modern Enhancements

• Expo SDK for quick prototyping and over-the-air updates.

• TypeScript integration for type safety.

• React Native Reanimated and Gesture Handler for smooth UI.

• React Native Paper / NativeBase / UI Kitten for ready-made UI kits.

20. Advantages

• True native performance.

• Code reusability across platforms.

• Fast refresh (live reloading).

• Large community and ecosystem.

• Integration with native modules.

21. Limitations

• Slower startup than pure native.

• Requires bridging for complex native modules.

• Some platform-specific behavior.

• Larger app size.