🚀 React Native Complete Modern Guide (0.76+) — Components, Hooks, Navigation & More

Introduction

Hey there! 👋

If you’re learning React Native in 2024, it can be overwhelming with so many components, hooks, libraries, and best practices. Don’t worry—I’ve got you covered!

In this guide, we’ll cover:

• Core components like View, Text, ScrollView, and FlatList

• Elevation, shadows, and styling tips

• Forms, password generation, and validation with Formik & Yup

• Navigation libraries (Stack, Tabs, Drawer)

• State management options (Redux, Zustand, React Query)

• Developer tips and tricks to speed up your workflow

• Deprecated features and modern alternatives

Everything here is tested and works on React Native 0.76+ (November 2024).

---

1. Core Components

View

The most basic building block. Use it for containers, layout, and spacing.

<View style={{
  flex: 1, // take up all available space
  padding: 20,
  backgroundColor: '#fff'
}}>
  {/* Put your components here */}
</View>

---

Text

Always wrap text inside <Text>. Styling is important for readability.

<Text style={{
  fontSize: 16,
  color: '#333',
  fontWeight: 'bold'
}}>
  Hello World
</Text>

---

ScrollView

Use ScrollView for small scrollable content. Avoid using it for long lists.

<ScrollView
  showsVerticalScrollIndicator={false} // hide scrollbar
  contentContainerStyle={{padding: 20}}
>
  {/* Content that needs scrolling */}
</ScrollView>

💡 Tip: Only one scroll direction at a time—vertical OR horizontal. Two vertical or two horizontal ScrollViews inside each other can cause performance issues.

---

FlatList

Use FlatList for large lists. Only renders visible items → smooth performance.

<FlatList
  data={contacts}  // your data array
  keyExtractor={(item) => item.uid}
  renderItem={({item}) => <Text>{item.name}</Text>}
  onEndReached={loadMore} // pagination
  onEndReachedThreshold={0.5}
  horizontal={false} // vertical list
/>

💡 Tip: FlatList is more performant than ScrollView for big datasets.

---

SectionList

Great for grouped lists with headers.

<SectionList
  sections={[
    {title: 'A', data: ['Apple']},
    {title: 'B', data: ['Banana']}
  ]}
  keyExtractor={(item, index) => item + index}
  renderItem={({item}) => <Text>{item}</Text>}
  renderSectionHeader={({section}) => <Text style={{fontWeight:'bold'}}>{section.title}</Text>}
/>

---

TextInput

For user input fields. Bind state with useState.

const [text, setText] = useState('');

<TextInput
  value={text}
  onChangeText={setText}
  placeholder="Type something..."
  style={{borderWidth:1,padding:10,borderRadius:8}}
  autoCapitalize="none"
  keyboardType="default"
/>

---

Image

Show images locally or remotely.

// Local
<Image source={require('./assets/logo.png')} style={{width:100,height:100}} resizeMode="contain"/>

// Remote
<Image source={{uri:'https://example.com/img.jpg'}} style={{width:100,height:100}}/>

---

Buttons: TouchableOpacity & Pressable

TouchableOpacity → opacity feedback.
Pressable → modern touchable with press state control.

<TouchableOpacity onPress={() => console.log('Pressed')} activeOpacity={0.7}>
  <Text>Click Me</Text>
</TouchableOpacity>

<Pressable onPress={() => console.log('Pressed')}>
  {({pressed}) => <Text>{pressed ? 'Pressed!' : 'Press Me'}</Text>}
</Pressable>

---

Modal

Overlay dialogs for forms, alerts, etc.

const [visible, setVisible] = useState(false);

<Modal visible={visible} animationType="slide" transparent={true}>
  <View style={{flex:1,justifyContent:'center',backgroundColor:'rgba(0,0,0,0.5)'}}>
    {/* Modal content */}
  </View>
</Modal>

---

Elevation & Shadow

Make your cards pop with depth and shadows.

const styles = StyleSheet.create({
  card: {
    backgroundColor: 'white',
    padding: 15,
    borderRadius: 10,
    elevation: 5, // Android shadow
    shadowColor: '#000', // iOS shadow
    shadowOffset: {width:0,height:2},
    shadowOpacity:0.25,
    shadowRadius:3.84,
  },
});

💡 Tip: Shadows behave differently on iOS and Android. Test both platforms.

---

2. ScrollView vs FlatList

• ScrollView: Renders all items → okay for small lists.

• FlatList: Renders only visible items → best for long/dynamic lists.

---

3. Mapping Arrays in React Native

// Destructured map
contacts.map(({uid,name}) => <Text key={uid}>{name}</Text>)

// Non-destructured
contacts.map(item => <Text key={item.uid}>{item.name}</Text>)

Tip: Use parentheses () for implicit return, braces {} for explicit return.

---

4. Password Generator

const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

function generatePassword(length) {
  let pass = "";
  for (let i=0;i<length;i++){
    const idx = Math.round(Math.random()*(chars.length-1));
    pass += chars.charAt(idx);
  }
  return pass;
}

💡 Tip: Always use Math.round to get whole number index.

---

5. Formik & Yup

• Formik → manage forms

• Yup → validation schema

npm install formik yup

---

6. React Hooks

• useState → state variables

• useEffect → side effects

• useCallback → memoized functions

• useMemo → memoized values

• useRef → access components/mutable variables

---

7. Navigation

• Stack, Tabs, Drawer using React Navigation 6+

• Install:

npm install @react-navigation/native @react-navigation/native-stack
npm install @react-navigation/bottom-tabs @react-navigation/drawer

---

8. Storage & State Management

AsyncStorage

Persistent key-value storage for small data like tokens:

npm install @react-native-async-storage/async-storage

Redux Toolkit

Global state for complex apps:

npm install @reduxjs/toolkit react-redux

Zustand

Lightweight state management:

npm install zustand

React Query

Server state management, caching, and fetching:

npm install @tanstack/react-query

---

9. UI Component Libraries

NativeWind

Tailwind CSS for React Native.

React Native Paper

Material Design components.

React Native Elements

Cross-platform UI toolkit.

Vector Icons

Deprecated Warning: react-native-vector-icons can cause issues in new RN versions.
Alternative: @expo/vector-icons or react-native-heroicons.

Fast Image

High-performance image loading with caching.

---

10. Developer Tips

• Metro Dev Menu: Press d in terminal → developer menu.

• Inspect: Toggle to debug layout/styles in browser.

• Snackbars: npm install react-native-snackbar.

• Clean Gradle: cd android && .\gradlew clean.

• Scrcpy: Screen share/control Android device:

choco install scrcpy   # installs scrcpy
scrcpy                 # run it to mirror device

• CLI Setup: Modern way to start a new app:

npx @react-native-community/cli init MyApp

---

Deprecated / Changed Features to Watch

• react-native-vector-icons → prefer @expo/vector-icons.

• componentWillMount, componentWillReceiveProps → replaced by hooks (useEffect).

• Nested vertical ScrollViews → avoid; use FlatList or SectionList.

---

Conclusion

By combining modern components, hooks, state management, UI libraries, and developer tools, you can build efficient, smooth, and professional React Native apps in 2024.

• Use FlatList for large datasets

• Prefer hooks over class components

• Test shadows/elevation on both iOS and Android

• Keep forms, validation, and state clean

• Replace deprecated libraries with modern alternatives

React Native 2024 is powerful and flexible—master these tips, and you’ll be coding like a pro! 💪