React Native — bu Meta tomonidan yaratilgan framework bo‘lib, JavaScript va TypeScript yordamida native mobil ilovalar yaratish imkonini beradi.

Expo esa React Native ustiga qurilgan ecosystem bo‘lib, development jarayonini tezlashtiradi.

ChatGPT Image Jun 26, 2026, 10_49_12 PM

Agar siz yangi boshlayotgan bo‘lsangiz yoki professional darajaga chiqmoqchi bo‘lsangiz, quyidagi stack juda muhim:

⚡ React Native ⚡ Expo ⚡ TypeScript ⚡ Expo Router ⚡ React Navigation ⚡ Zustand ⚡ TanStack Query ⚡ NativeWind ⚡ Reanimated ⚡ Firebase ⚡ Node.js backend

━━━━━━━━━━━━━━━━━━

📱 Expo Go nima?

Expo Go — bu telefoningizda React Native loyihangizni tez test qilish uchun ishlatiladigan ilova.

Siz:

  1. Kompyuterda loyiha ochasiz
  2. Expo server ishga tushadi
  3. QR code chiqadi
  4. Telefon orqali scan qilasiz
  5. Ilova ochiladi

Boshlash:

bash
npx create-expo-app my-project

Papka ichiga kirish:

bash
cd my-project

Ishga tushirish:

bash
npx expo start

Keyin telefon:

Expo Go → Scan QR → App ishlaydi

━━━━━━━━━━━━━━━━━━

📦 Expo loyihasining asosiy strukturasi:

my-project app/ ├── index.tsx ├── profile.tsx └── settings.tsx components/ ├── Button.tsx └── Card.tsx hooks/ lib/ assets/ package.json

Zamonaviy Expo loyihalarda Expo Router ishlatiladi.

Misol:

app/index.tsx

bu:

/

route bo‘ladi.

app/profile.tsx

bu:

/profile

bo‘ladi.

━━━━━━━━━━━━━━━━━━

🎨 UI yaratish

React Native HTML emas.

Web:

html
<div>
<h1>Hello</h1>
</div>

React Native:

tsx
<View>

<Text>
Hello
</Text>

</View>

Asosiy komponentlar:

View

Container uchun:

tsx
<View>

</View>

Text

Matn:

tsx
<Text>
UlugDev
</Text>

Image:

tsx
<Image
 source={{
 uri:"https://image.com/photo.png"
 }}
/>

Button:

tsx
<Button
 title="Click"
/>

━━━━━━━━━━━━━━━━━━

🎨 Styling

React Native CSS emas.

Misol:

tsx
<View
style={{
 backgroundColor:"#000",
 padding:20,
 borderRadius:20
}}
>

<Text
style={{
 color:"#fff",
 fontSize:24
}}
>
Hello
</Text>

</View>

Ammo professional loyihalarda:

NativeWind ishlatiladi.

O‘rnatish:

bash
npm install nativewind

Ishlatish:

tsx
<View className="flex-1 bg-black">

<Text className="text-white text-xl">

UlugDev

</Text>

</View>

━━━━━━━━━━━━━━━━━━

🧭 Navigation

Mobil ilovalarda eng muhim qism.

Masalan:

Home

↓

Profile

↓

Settings

React Navigation:

bash
npm install
@react-navigation/native

Stack:

tsx
<Stack.Navigator>

<Stack.Screen
name="Home"
component={Home}
/>


<Stack.Screen
name="Profile"
component={Profile}
/>


</Stack.Navigator>

O‘tish:

tsx
navigation.navigate(
"Profile"
)

━━━━━━━━━━━━━━━━━━

📂 Expo Router

Yangi standart:

bash
npx expo install expo-router

Misol:

app (index).tsx profile.tsx settings.tsx

Link:

tsx
<Link href="/profile">

Profile

</Link>

Bu Next.js App Router ga o‘xshaydi.

━━━━━━━━━━━━━━━━━━

💾 Local Storage

User ma'lumotlarini saqlash:

bash
npx expo install
@react-native-async-storage/async-storage

Saqlash:

tsx
await AsyncStorage.setItem(
"user",
JSON.stringify(user)
)

Olish:

tsx
const data =
await AsyncStorage.getItem(
"user"
)

Masalan:

Login qilgan user:

{ id:1, name:"Ulugbek" }

telefon xotirasida saqlanadi.

━━━━━━━━━━━━━━━━━━

🔐 Secure Storage

Token uchun oddiy storage ishlatmang.

Expo SecureStore:

bash
npx expo install
expo-secure-store

Token:

tsx
await SecureStore.setItemAsync(
"token",
jwt
)

Keyin:

tsx
const token =
await SecureStore.getItemAsync(
"token"
)

━━━━━━━━━━━━━━━━━━

📡 API bilan ishlash

Professional app backend bilan ishlaydi.

Axios:

bash
npm install axios

API:

tsx
const response =
await axios.get(
"https://api.com/users"
)

POST:

tsx
axios.post(
"/login",
{
email,
password
}
)

━━━━━━━━━━━━━━━━━━

⚡ TanStack Query

Server state uchun.

bash
npm install
@tanstack/react-query

Misol:

tsx
useQuery({

queryKey:["users"],

queryFn:getUsers

})

Afzalligi:

✅ cache

✅ loading

✅ error

✅ refetch

━━━━━━━━━━━━━━━━━━

Davomi tez kunda :

🔥 React Native architecture 🔥 Zustand state management 🔥 Authentication 🔥 Firebase realtime chat 🔥 Image upload 🔥 Push notification 🔥 App Store / Play Store release 🔥 Production project structure

#ReactNative #Expo #MobileDevelopment #TypeScript #Frontend #Developer