# React Native Exercises

## Exercise 1: Profile Card

**Task:** Create a `ProfileCard` component with a circular avatar placeholder (View with borderRadius), name, and a short bio. Use StyleSheet and Flexbox for layout.

**Validation:**
- [ ] Card has consistent padding and spacing
- [ ] Avatar is circular (width/height equal, borderRadius half of that)
- [ ] Layout works in portrait orientation

**Hints:**
1. `borderRadius: 50` with equal width/height makes a circle
2. Use `alignItems: 'center'` for centered content
3. `Image` with a URI or a colored View for avatar placeholder

---

## Exercise 2: Form with TextInput

**Task:** Create a simple form: name and email inputs, plus a submit button. Use controlled components (state drives input values). Log the values on submit.

**Validation:**
- [ ] Inputs are controlled (value + onChange)
- [ ] Submit logs the current values
- [ ] Keyboard doesn't obscure inputs (use KeyboardAvoidingView)

**Hints:**
1. `TextInput` uses `value` and `onChangeText`
2. `KeyboardAvoidingView` with `behavior="padding"` (iOS) or `"height"` (Android)
3. Wrap in `ScrollView` if content is tall

---

## Exercise 3: Searchable List

**Task:** Create a FlatList of 20+ items. Add a TextInput above it for search. Filter the list as the user types (case-insensitive). Use `useMemo` or a derived array for the filtered data.

**Validation:**
- [ ] Typing filters the list in real time
- [ ] FlatList only receives filtered data
- [ ] No lag when list is large

**Hints:**
1. Store search term in state, derive filtered list
2. `items.filter(i => i.name.toLowerCase().includes(search.toLowerCase()))`
3. Consider `useMemo` if filtering is expensive

---

## Exercise 4: Tab Navigator

**Task:** Add a bottom tab navigator with 3 tabs (e.g., Home, Search, Profile). Each tab shows a simple screen with different content. Use `createBottomTabNavigator`.

**Validation:**
- [ ] Tabs switch correctly
- [ ] Each tab has distinct content
- [ ] Tab bar is visible and usable

**Hints:**
1. `@react-navigation/bottom-tabs` for tab navigator
2. Nest inside your existing NavigationContainer
3. Optionally add icons with a vector icon library

---

## Exercise 5: Pull-to-Refresh

**Task:** Add pull-to-refresh to a FlatList. When pulled, show a loading indicator and "refresh" the list (e.g., shuffle or refetch simulated data). Use `refreshControl` with `RefreshControl`.

**Validation:**
- [ ] Pulling triggers refresh
- [ ] Loading state is visible during refresh
- [ ] List updates after refresh completes

**Hints:**
1. `RefreshControl` from `react-native` with `refreshing` and `onRefresh`
2. Use `useState` for `refreshing`; set true on pull, false when done
3. Simulate async with `setTimeout`