React Native Notes
Uploaded by
hithisisaryan123React Native Notes
Uploaded by
hithisisaryan123Page 1 — React Native Fundamentals
What is React Native?
● Framework for building mobile apps (iOS + Android) using JavaScript/TypeScript
and React.
● Uses native UI components, not WebView.
● Write once, deploy to both platforms.
Core Concepts
Components
Everything is a component.
function App() {
return <Text>Hello World</Text>;
}
JSX
JavaScript + HTML-like syntax.
<Text>Hello</Text>
Props
Pass data from parent → child.
function User({ name }) {
return <Text>{name}</Text>;
}
State
Data that changes over time.
const [count, setCount] = useState(0);
Re-render
Whenever state changes, component re-renders.
setCount(count + 1);
Common Components
View
Equivalent of a div.
<View>
<Text>Hello</Text>
</View>
Text
<Text>Welcome</Text>
Image
<Image source={{ uri: imageUrl }} />
TextInput
<TextInput
value={name}
onChangeText={setName}
/>
Button
<Button
title="Submit"
onPress={handleSubmit}
/>
ScrollView
<ScrollView>
{/* Content */}
</ScrollView>
FlatList
Efficient rendering of lists.
<FlatList
data={users}
renderItem={({ item }) => (
<Text>{[Link]}</Text>
)}
/>
Page 2 — Hooks, Styling & Navigation
useState
const [name, setName] = useState("");
Used for:
● Inputs
● Toggles
● Counters
● UI state
useEffect
Runs side effects.
useEffect(() => {
fetchUsers();
}, []);
Common uses:
● API calls
● Timers
● Event listeners
Styling
const styles = [Link]({
container: {
flex: 1,
padding: 20
}
});
Usage:
<View style={[Link]} />
Flexbox
Column (default)
{
flexDirection: "column"
}
Row
{
flexDirection: "row"
}
Center
{
justifyContent: "center",
alignItems: "center"
}
Important Style Properties
padding
margin
borderRadius
width
height
backgroundColor
fontSize
fontWeight
Navigation
Install
npm install @react-navigation/native
Stack Navigation
[Link]("Profile");
Go Back
[Link]();
Navigation Types:
1. Stack
2. Tabs
3. Drawer
Page 3 — APIs, State Management & App
Architecture
Fetch API
const getUsers = async () => {
const res = await fetch(url);
const data = await [Link]();
};
AsyncStorage
Store data locally.
await [Link](
"token",
token
);
Read:
const token =
await [Link]("token");
Common App Flow
Login
↓
Get JWT Token
↓
Save Token
↓
Protected Screens
↓
Logout
↓
Remove Token
Global State
Context API
Good for:
● Theme
● User info
● Auth
Zustand
const useStore = create((set) => ({
count: 0,
increment: () =>
set((state) => ({
count: [Link] + 1
}))
}));
Good for:
● Medium to large apps
● Simpler than Redux
Folder Structure
src/
│
├── screens/
├── components/
├── navigation/
├── services/
├── store/
├── hooks/
├── utils/
├── assets/
└── [Link]
React Native Interview Essentials
Know:
● Components
● Props vs State
● useState
● useEffect
● FlatList
● Flexbox
● Navigation
● API Calls
● AsyncStorage
● Context API
● Zustand
● Expo basics
Recommended Learning Order
1. JavaScript ES6
2. React Basics
3. Components
4. Props
5. State
6. Hooks
7. Styling
8. Flexbox
9. Lists
10. Forms
11. Navigation
12. APIs
13. AsyncStorage
14. Authentication
15. Zustand
16. Expo
17. App Deployment
React Native Mastery Checklist
✅ Components
✅ JSX
✅ Props
✅ State
✅ useEffect
✅ Styling
✅ Flexbox
✅ FlatList
✅ Navigation
✅ APIs
✅ AsyncStorage
✅ Authentication
✅ Zustand
✅ Expo
✅ Deployment
Once these are comfortable, you're ready to build production apps such as social apps,
SaaS apps, marketplaces, games, and subscription-based products.