🚀 Welcome to React Native Hub!

Hello, React Native developer! 👋

We’re thrilled to have you join React Native Hub, a space created to empower developers like you to build better apps, stay updated, and connect with the community. Here, you'll find everything you need to level up your React Native skills.

🗓️ Here’s our content plan to keep you informed, inspired, and engaged every week:

- News / Updates

- Tutorials / Guides / Tools

- Showcase & Inspiration


At React Native Hub, it’s all about learning, growing, and sharing knowledge as a community. Don’t hesitate to share your thoughts, ask questions, or suggest topics you’d like us to cover!

Let’s build amazing apps together. 💻🔥

React Native 0.77 has been released, bringing significant improvements across styling, platform support, and project templates.

Key Highlights:

- New CSS Features: Added support for display: contents, boxSizing, mixBlendMode, and outline properties.

- Android 15 & 16KB Page Support: Improved memory handling and edge-to-edge UI compatibility.

- Community CLI & Template Updates: Deprecation of react-native init`in favor of `npx create-expo-app.

- Swift as Default for iOS: New iOS projects now use Swift instead of Objective-C.

- Breaking Changes: Removal of console log streaming in Metro, updates to native animations, and more.

React Native Hub

Enhance your app’s user experience with better keyboard interactions! Users often struggle to dismiss the keyboard in lists, especially in forms or chat apps. Here's how to fix it:

1️⃣ Use `keyboardDismissMode`

Enable natural keyboard dismissal by adding a single prop:

<FlatList
    keyboardDismissMode="on-drag"
    // ... other props
/>

2️⃣ Add Smooth Animations

Combine it with React Native Reanimated for a polished look:

import Animated from 'react-native-reanimated';

<Animated.FlatList
    keyboardDismissMode="on-drag"
    itemLayoutAnimation={LinearTransition}
    // ... other props
/>

These small changes make a big difference! Try it out and level up your app’s UX. 💻🔥

React Native Hub

Google Fonts Integration with Expo

Want to elevate your app’s typography? With the Expo Google Fonts package, adding custom fonts is quick and effortless!

How to Use Google Fonts in Expo

1️⃣ Install the package:

npm install @expo-google-fonts/frank-ruhl-libre expo-font 

2️⃣ Load and apply the font:

import { useFonts } from 'expo-font';
import { FrankRuhlLibre_700Bold } from '@expo-google-fonts/frank-ruhl-libre';

export default function App() {
const [fontsLoaded] = useFonts({
'FrankRuhlLibre-Bold': FrankRuhlLibre_700Bold,
});

if (!fontsLoaded) return <LoadingScreen />;

return (
<Text style={{ fontFamily: 'FrankRuhlLibre-Bold' }}>
Custom Font Text
</Text>
);
} 

Try it out and share your favorite Google Font in the comments! 👇

React Native Hub

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