React Native Tutorial

Getting Started with React Native JavaScript & JSX Essentials Core Components & Styling Props & State Hooks (useState & useEffect) Lists with FlatList Navigation (React Navigation) Networking with fetch / axios State Management (Context & Redux) Local Storage with AsyncStorage Native Modules & Permissions Building & Publishing (EAS / Stores)

Props & State

June 02, 2026 • 1 min read

Props are inputs passed to a component (read-only). State is data a component owns and can change.

Props

function Badge({ label }) {
  return <Text>{label}</Text>;
}
// usage
<Badge label="New" />

State with useState

import { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <Pressable onPress={() => setCount(count + 1)}>
      <Text>Count: {count}</Text>
    </Pressable>
  );
}
Common mistake: Never mutate state directly (e.g. count++). Always call the setter (setCount) so React re-renders.

Summary

Props flow data down (read-only); state holds changeable data and re-renders the UI via its setter.