Optimizing Image Loading Performance

Improve your app’s perceived performance by providing placeholder images while the main image loads

🔹 How It Works:

<Image

source={{ uri: 'https://example.com/large-image.jpg' }}

defaultSource={require('./placeholder.png')}

style={{ width: 300, height: 200 }}

/>

This technique ensures users always see something while waiting for the actual image to load, creating a smoother experience ✨

React Native Hub

Unlock the Power of Nullable Types in React Native

Mishandling null and undefined in TypeScript can lead to unexpected bugs and low-quality code. Understanding their differences and using them properly can make your React Native apps more robust and maintainable.

📌 In this article, you’ll learn:

✅ The key differences between null and undefined
✅ How to enable strictNullChecks for better type safety
✅ Best practices for using nullable types in interfaces
✅ How to gracefully handle missing values in your app

React Native Hub

Boost Your List Performance in React Native! ⚡

Problem: Low scroll performance and frame drops in lists with large data sets (1000+ items)

✅ Solution:

- FlashList implementation instead of FlatList
- getItemLayout implementation
- ViewabilityConfig optimization
- Item render caching

🔥 Gains:

- Scroll FPS: Increased from 30fps to 58fps
- Initial render time reduced by 40%
- Memory usage decreased by 25%

import { FlashList } from "@shopify/flash-list";

const optimizedList = () => {
  const getItemLayout = (data, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  });

  return (
    <FlashList
      data={items}
      renderItem={renderItem}
      estimatedItemSize={100}
      getItemLayout={getItemLayout}
      viewabilityConfig={{
        waitForInteraction: true,
        viewAreaCoveragePercentThreshold: 50
      }}
      windowSize={5}
    />
  );
};

React Native Hub

Implementing Dark Mode Support 🌙

Dark mode is no longer just a trend—it’s an essential feature for accessibility and user comfort. Modern apps are expected to adapt to system preferences seamlessly.

🛠 Easy Implementation with React Native

Thanks to React Native’s useColorScheme(), your app can automatically switch themes:

import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
import { useColorScheme } from 'react-native';

function App() {
  const scheme = useColorScheme();

  return (
    <NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
      {/* Your app content */}
    </NavigationContainer>
  );
}

For manual theme toggling, use the Appearance API:

import { Appearance } from 'react-native';

// Toggle theme manually
Appearance.setColorScheme('dark');

React Native Hub

⚡ Optimize Performance with `useCallback`

Using hooks incorrectly can lead to performance issues and memory leaks. One common mistake is redefining functions inside components, which causes unnecessary re-renders.

❌ Incorrect Usage

🔴 Functin recreated on every render, causing performance issues:

const renderItem = ({ item }) => (
  <ItemComponent data={item} onPress={() => handlePress(item.id)} />
);

✅ Optimized Usage with `useCallback`

✅ Memoizes function references to prevent unnecessary re-renders:

const renderItem = useCallback(({ item }) => (
  <ItemComponent data={item} onPress={handlePress} />
), [handlePress]);

const handlePress = useCallback((id) => {
  // operations
}, []);

Using useCallback ensures that renderItem remains the same across renders, significantly improving list performance in React Native apps. 🚀

React Native Hub

🎨 Explore the Latest in Mobile UI Design! 📱

Looking for fresh inspiration to elevate your app's user interface? Check out the latest compilation of flat and professional mobile app designs that emphasize clarity and functionality. These sleek designs showcase how minimalism and vibrant colors can create dynamic and user-friendly interfaces.

Highlights:

Minimalist Aesthetics: Clean lines and simple shapes that prioritize content.

Vibrant Color Palettes: Use of bold colors to enhance visual appeal without overwhelming the user.

User-Centric Layouts: Designs that focus on intuitive navigation and accessibility.

Staying updated with current design trends is crucial for creating engaging and effective user experiences. These examples provide valuable insights into how to implement flat design principles effectively in your projects.

Dive into the full collection here: Mobile UI Design Examples: Flat & Professional — vol. 219

Elevate your app's design by embracing these modern UI trends! 🚀

React Native Hub

Handle Asynchronous Code

🔴 The Problem:

Many developers neglect proper error handling in asynchronous operations like API calls. This can lead to unhandled promise rejections, app freezes, and unpredictable behavior.

🔹 Best Practice: Always use try/catch blocks to gracefully handle errors in async functions.

✅ Correct Approach:

const fetchData = async (): Promise<void> => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Failed to fetch data:', error);
    // Show an error message to the user
  }
};

❌ Don’t Forget:

Ignoring errors can cause crashes in production.

Always log and handle errors gracefully to improve user experience.

💡 Want to learn more about best practices in React Native? Follow the channel for expert tips! 🚀

React Native Hub

Avoid Overusing Inline Styles in React Native

Using inline styles might seem convenient, but overusing them can hurt performance in large applications.

⚠️ The Problem:

❌ Inline styles are re-evaluated on every render, leading to:

- Unnecessary recalculations
- Slower rendering
- Poor performance in large lists & complex components

✅ The Solution: Use `StyleSheet.create()`

Defining styles separately improves efficiency:

import { StyleSheet, Text, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
  },
  text: {
    fontSize: 18,
    color: '#333',
  },
});

const MyComponent = () => (
  <View style={styles.container}>
    <Text style={styles.text}>Optimized Styling</Text>
  </View>
);

📌 Key Takeaways:

✅ Avoid inline styles in every component

✅ Use `StyleSheet.create()` for better performance

✅ Keep styles reusable & maintainable

⚡ Write cleaner, faster, and more efficient React Native code! 🚀

React Native Hub

Why you should use React Native in 2025

React Native continues to dominate cross-platform mobile development, offering speed, efficiency, and cost savings. Here’s why it remains a top choice:

✅ Faster Development & Cost Efficiency
Code once, run on both iOS & Android—saving time and budget. Hot Reloading boosts productivity.

⚡ Better Performance
With Fabric & TurboModules, apps are now 5x faster, rivaling native experiences.

🌎 Huge Ecosystem & Community Support
React Native thrives with active contributions & robust libraries for every need.

💡 Used by Tech Giants
Meta, Airbnb, Shopify, Tesla—trusted by the best for scalable apps.

🎯 Future-Proof Technology
Built on JavaScript & TypeScript, ensuring long-term support and easy integration.

📖 Read more: Why React Native in 2025

React Native Hub

🔁 Building Reusable Components: Best Practices

Creating reusable components is key to building scalable React Native apps. A well-structured component library ensures consistency and efficiency. Here’s how to do it right:

✅ Props-Driven Design: Pass styles, text, and actions via props instead of hardcoding.

✅ Use TypeScript: Define prop types for better maintainability and fewer runtime errors.

✅ Optimize Performance: Use React.memo to prevent unnecessary re-renders.

✅ Write Tests: Validate components using Jest & React Native Testing Library.

✅ Document Components: Tools like Storybook help visualize and test UI elements.

Building reusable components saves time and keeps your app organized. What best practices do you use? Leave them below! ⬇️ 🚀

React Native Hub

🚀 Optimize Functional Components with React.memo

Unnecessary re-renders can slow down your React Native app. React.memo helps optimize performance by memoizing functional components and reusing the last rendered output if props haven't changed.

🔹 How It Works:

- Skips re-renders when props remain the same.
- Reduces performance overhead in frequently rendered components.

🔹 Example Usage:

import React, { memo } from 'react';

const Element = ({ value, setValue }) => {
  return (
    <TouchableOpacity onPress={() => setValue(value * 2)}>
      <Text>{value}</Text>
    </TouchableOpacity>
  );
};

export default memo(Element);

✅ Use React.memo when:

- Components are rendered frequently.
- Props remain unchanged across renders.

⚠️ Avoid Overuse: Memoization adds overhead if applied unnecessarily. Use it wisely! 🚀


React Native Hub

Minimize the Use of Inline Functions

Defining functions inside JSX might seem convenient, but it can hurt performance by creating new function instances on every render.

❌ Bad Practice:

Each re-render creates a new function, causing unnecessary child component updates.

<Button onPress={() => handlePress(item.id)} />

✅ Better Approach:

Use useCallback to memoize functions and prevent unnecessary re-creation.

const handlePress = useCallback((id) => {
  // handle press logic
}, []);

<Button onPress={handlePress} />

🔥 Why It Matters?

✔️ Reduces re-renders ✅
✔️ Improves performance 🚀
✔️ Keeps code clean & maintainable 💡

React Native Hub

The useEffect clean-up callback executes on every render

Most people think it executes only when the component unmounts, but that’s not true.

On every render, the clean-up callback from the previous render executes just before the next effect execution.

Let’s see an example:

function SomeComponent() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log('The current count is ', count)
    return () => {
      console.log('The previous count is ', count)
    }
  })

  return <button onClick={() => setCount(count + 1)}>Click me</button>
}

This logs the following:

// Component mounts
The current count is 0

// Click
The previous count is 0
The current count is 1

// Click
The previous count is 1
The current count is 2

// Component unmounts
The previous count is 2

🚀 Why This Matters?

This behavior is essential for managing subscriptions, event listeners, and cleanup logic effectively.

Adding a dependency array ensures the effect runs only when needed.

React Native Hub

useEffect is a low-level utility that should be used only in library-like code

It’s common for junior React developers to use useEffect when they don’t need to. This can make code more complex, create flickers, or subtle bugs.

The most common case is to synchronize different useStates, where you actually need one single useState:

functionMyComponent() {
const [text, setText] =useState("Lorem ipsum dolor sit amet")

// You don't need to do this !!!
const [trimmedText, setTrimmedText] =useState("Lorem ip...")

useEffect(() => {
  setTrimmedText(text.slice(0,8) +'...')
  }, [text])
}

functionMyBetterComponent() {
const [text, setText] =useState("Lorem ipsum dolor sit amet")

// Do this instead:
// (each time text changes, the component will re-render so trimmedText
//  will be up-to-date)
const trimmedText = text.slice(0,8) +'...'
}

React Native Hub

Use the key prop to reset internal state

When the key prop changes on an element, the render of this element is not interpreted as an update, but as an unmount plus a mount of a brand new component instance with a fresh state.

function Layout({ currentItem }) {
  /* When currentItem changes, we want any useState inside <EditForm/>
     to be reset to a new initial value corresponding to the new item */
  return (
    <EditForm
      item={currentItem}
      key={currentItem.id}
    />
  )
}

React Native Hub

🔒 Implementing Expo Biometric Authentication

Biometric authentication (Face ID, Touch ID, fingerprint) enhances security and improves the user experience in mobile apps. With Expo’s LocalAuthentication API, integrating it into your React Native app is seamless. Here’s how you can do it! 🚀

1️⃣ Install the LocalAuthentication API

First, install the required package:

npx expo install expo-local-authentication

2️⃣ Check for Biometric Support

Before prompting authentication, check if the device supports biometrics:

import * as LocalAuthentication from 'expo-local-authentication';

const checkBiometricSupport = async () => {
  const isHardwareAvailable = await LocalAuthentication.hasHardwareAsync();
  const supportedTypes = await LocalAuthentication.supportedAuthenticationTypesAsync();

  console.log('Biometric Supported:', isHardwareAvailable);
  console.log('Supported Types:', supportedTypes);
};

3️⃣ Prompt for Authentication

Trigger authentication when the user tries to access a protected section:

const authenticateUser = async () => {
  const result = await LocalAuthentication.authenticateAsync({
    promptMessage: 'Authenticate to continue',
    fallbackLabel: 'Enter passcode',
  });

  if (result.success) {
    console.log('Authentication Successful!');
  } else {
    console.log('Authentication Failed:', result.error);
  }
};

4️⃣ Implement in a Component

Here’s how you can put it all together in a button:

import React from 'react';
import { View, Button, Alert } from 'react-native';
import * as LocalAuthentication from 'expo-local-authentication';

const BiometricAuth = () => {
  const handleAuth = async () => {
    const result = await LocalAuthentication.authenticateAsync({
      promptMessage: 'Authenticate with Biometrics',
    });

    Alert.alert(result.success ? 'Authenticated' : 'Failed', result.success ? 'Access Granted' : 'Access Denied');
  };

  return (
    <View>
      <Button title="Login with Biometrics" onPress={handleAuth} />
    </View>
  );
};

export default BiometricAuth;

React Native Hub

🎨 Best Practices for Styling Mobile Apps

Styling plays a crucial role in building beautiful and maintainable React Native apps. Following best practices ensures consistency, better performance, and easier scalability. Here are some key takeaways:

✅ Use StyleSheet.create() – This optimizes performance by preventing unnecessary re-renders.

✅ Leverage Global Styles – Define common styles in a separate file to maintain consistency across the app.

✅ Use Theme-Based Styling – Implement dark mode and dynamic themes using context or state management.

✅ Avoid Inline Styles – Overusing inline styles leads to performance issues and redundant recalculations.

✅ Use Flexbox for Layouts – Flexbox provides a responsive and adaptive layout system.

✅ Styled Components – Reusable components for common UI elements.

By following these best practices, you can create visually appealing, efficient, and scalable React Native applications.

📖 Read more: Full Article Here

React Native Hub