Ars Dev

A bit of design inspiration 🔥 https://x.com/jamesm/status/1987905256143868064

A bit of design inspiration 🔥 https://x.com/jamesm/status/1987905256143868064

👋 I wanted to share a library I recently came across — 

react-native-animated-glow

It's a free, open-source package for adding animated glow effects to buttons, images, and UI elements. The cool part? There's a visual builder on their site where you can tweak animations, see results in real-time, and just copy the code. Super satisfying to play with. It could be nice for those key moments where you want users to feel something — like confirming a payment or highlighting a premium feature.

Hey everyone 👋 Yeah, I know — it's been way too quiet here🫠. Had a vacation and now I'm finally back in the routine. Posts are coming back. Regularly this time. And if you ever have topics or ideas you'd like me to cover feel free to share them anytime. Good to be back 🚀

Expo SDK 54 Released Yesterday Expo announced the release of SDK 54. Here are the highlights and what you need to know when upgrading. ☑️ Faster iOS builds — dependencies are now precompiled XCFrameworks ☑️ iOS 26 support — new Liquid Glass icons + expo-glass-effect for glass UI 🔥 ☑️ Edge-to-edge on Android enabled by default ☑️ Better updates — progress tracking, custom headers, and new reload options ☑️ New packages — expo-app-integrity, stable expo-file-system, improved expo-sqlite ☑️ Breaking change — Legacy Architecture ends with SDK 54 👉 Full changelog: expo.dev/changelog/sdk-54

🚀 Big Update! Hey everyone 👋 I’ve decided to take this channel in a new direction. From now on, React Native Hub will become my personal space — Ars Dev. Don’t worry, I’ll still be sharing content about React Native, mobile development, and everything around it. The only difference is that it will be more personal, with my own thoughts, tips, and insights as a developer. If you’ve been following me for React Native content — you’ll still get plenty of that. But you’ll also see a bit more of my journey in indie app development. If you enjoy the content here and want to support the growth of this channel, you can buy me a coffee ☕️😁 Thanks for being here 🙌

React Native Date Picker This library solves the problem of implementing Date/Time picker components in your app. · Fully native implementation for all platforms · TurboModules support · Modal and inline modes · Extensive customization options

Hey guys👋 I just dropped a new article on how to style React Native apps the right way — best practices, tips, and examples included. 👉 Check it out: The Complete React Native Styling Guide Let me know what you think!

📝 Changelog vs Release Notes 🎉 What’s the difference? How do you use them correctly? My friend recently posted an article about this — check it out 👈

🎨 Splash Screen: Kill the White Flash of Death Properly configured splash screens prevent the dreaded white flash during app startup:

// app.json
{
  "expo": {
    "plugins": [
      [
        "expo-splash-screen",
        {
          "backgroundColor": "#232323",
          "image": "./assets/images/splash-icon.png",
          "dark": {
            "image": "./assets/images/splash-icon-dark.png",
            "backgroundColor": "#000000"
          },
          "imageWidth": 200
        }
      ]
    ]
  }
}

Control splash screen programmatically:

import * as SplashScreen from 'expo-splash-screen';

// Prevent auto-hide
SplashScreen.preventAutoHideAsync();
// Set animation options
SplashScreen.setOptions({
  duration: 1000,
  fade: true,
});
// Hide when app is ready
useEffect(() => {
  async function prepare() {
    try {
      // Load fonts, make API calls, etc.
      await Font.loadAsync(MyFont);
      await loadUserData();
    } catch (e) {
      console.warn(e);
    } finally {
      setAppIsReady(true);
    }
  }
  prepare();
}, []);
const onLayoutRootView = useCallback(() => {
  if (appIsReady) {
    SplashScreen.hide();
  }
}, [appIsReady]);

Pro tips for seamless experience: - Match colors: Use the same backgroundColor as your first screen - Proper timing: Hide splash only after content is ready to render - Dark mode support: Always provide dark variant for better UX

⚡ Hermes Hermes is enabled by default in new Expo projects, but ensure it’s configured:

// app.json
{
  "expo": {
    "jsEngine": "hermes",
    "plugins": [
      ["expo-build-properties", {
        "android": { "enableHermes": true },
        "ios": { "enableHermes": true }
      }]
    ]
  }
}

Impact: 60% faster startup times and 30% memory savings Concrete gains: - 🚀 App startup: 60% faster startup times - 💾 Memory usage: 30% memory savings - 📦 Bundle size: Smaller with bytecode pre-compilation Note: New Architecture is enabled by default since Expo SDK 52 (November 2024) for new projects, and mandatory by default since SDK 53 (April 2025).

Hey guys! Just wanted to share this cool article on React Design Patterns. No matter how much experience we’ve got, it’s always a good idea to refresh the basics — helps us write cleaner code and build better apps! Check it out 👇 https://dev.to/codeparrot/react-design-patterns-best-practices-for-scalable-applications-46ja React Native Hub

Hardcoding Dimensions Instead of Using Flexbox Mistake: Using fixed dimensions for layout, making the app non-responsive. Wrong Code:

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

const Box = () => <View style={styles.box} />;

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
});

Correct Practice: Use flex for responsive layouts.

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

const Box = () => <View style={styles.box} />;

const styles = StyleSheet.create({
  box: {
    flex: 1,
    backgroundColor: 'blue',
  },
});

👩‍💻 React Native Hub

Ignoring Platform-Specific Differences Mistake: Hardcoding platform-specific logic instead of handling differences dynamically. Wrong Code:

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

const MyComponent = () => {
  return <Text style={styles.text}>Hello</Text>;
};

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
    paddingTop: 20, // Might look bad on iOS
  },
});

Correct Practice: Use Platform.select or conditional logic to handle differences.

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

const MyComponent = () => {
  return <Text style={styles.text}>Hello</Text>;
};

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
    paddingTop: Platform.select({ ios: 20, android: 10 }),
  },
});

👩‍💻 React Native Hub

Inline Functions in Props Mistake: Defining functions inline inside components, which causes unnecessary re-renders. Wrong Code:

import { Button } from 'react-native';

const MyComponent = () => {
  return (
    <Button title="Press Me" onPress={() => console.log('Button Pressed')} />
  );
};

Correct Practice: Define the function outside or use useCallback to memoize it.

import { Button } from 'react-native';
import { useCallback } from 'react';

const MyComponent = () => {
  const handlePress = useCallback(() => {
    console.log('Button Pressed');
  }, []);

  return <Button title="Press Me" onPress={handlePress} />;
};

👩‍💻 React Native Hub

🚀 Reusable Toasts in React Native with NativeBase Showing clear feedback — errors, success, info — is crucial for great UX. But repeating Toast.show() everywhere? Nope. Save time with reusable toast helpers using NativeBase. Here’s how! 🔥 💡 What We’re Building ✅ 3 handy toast functions: - errorToast("Something went wrong!") - successMessageToast("Action completed!") - infoMessageToast("Heads up!" 🧑‍💻 The Code Error Toast Helper:

import { Box, Text, Toast } from 'native-base';
import React from 'react';

export const errorToast = (message) => {
  const id = 'error-toast';
  if (Toast.isActive(id)) return;

  Toast.show({
    id,
    duration: 10000,
    render: () => (
      <Box bg="red.500" p="2" rounded="sm" mb={5}>
        <Text fontSize="md" color="white">
          {message}
        </Text>
      </Box>
    ),
  });
};

Copy the same pattern for success and info:

export const successMessageToast = (message) => {
  const id = 'success-toast';
  if (Toast.isActive(id)) return;

  Toast.show({
    id,
    duration: 5000,
    render: () => (
      <Box bg="success.500" p="2" rounded="sm" mb={5}>
        <Text fontSize="md" color="white">
          {message}
        </Text>
      </Box>
    ),
  });
};

export const infoMessageToast = (message) => {
  const id = 'info-toast';
  if (Toast.isActive(id)) return;

  Toast.show({
    id,
    duration: 5000,
    render: () => (
      <Box bg="info.500" p="2" rounded="sm" mb={5}>
        <Text fontSize="md" color="white">
          {message}
        </Text>
      </Box>
    ),
  });
};

⚙️ How to Use Anywhere in your app:

import { errorToast, successMessageToast } from './toastHelpers';

const handleSubmit = async () => {
  try {
    await api.submit();
    successMessageToast("Submitted successfully!");
  } catch (e) {
    errorToast("Something went wrong.");
  }
};

Pro Tips: - Use unique IDs for each toast type - Adjust duration for critical vs. casual messages - Wrap your text in a styled Box for consistent theming 👩‍💻 React Native Hub

💰 How to Monetize a React Native App in 2025 Building apps is great. But turning them into income? Even better. Here are the top monetization strategies for React Native devs: 📱 In-App Purchases Great for digital goods, subscriptions, or unlocking features. 📊 Ads (with control!) Use platforms like AdMob or Facebook Audience Network — just don’t ruin the UX. 🛒 Freemium Model Offer a free version, upsell the premium with real value. 🌐 Affiliate & Dropshipping Integrate products/services and earn per conversion. Especially powerful for niche audiences. 🧑‍💻 SaaS & B2B Tools Monetize with subscriptions, dashboards, or API-based solutions built on React Native 👩‍💻 React Native Hub

🚀 The Future of React Native — What to Expect in 2025 React Native is evolving fast — and 2025 is shaping up to be a game-changer. This article highlights key trends and innovations to watch: - Tighter integration with AI and edge computing - Growth of Expo and server-driven UI - Better dev tools, faster builds, and more stable releases 👉 The Future of React Native in 2025 👩‍💻 React Native Hub

Enjoy our content? Advertise on this channel and reach a highly engaged audience! 👉🏻 It's easy with Telega.io. As the leading platform for native ads and integrations on Telegram, it provides user-friendly and efficient tools for quick and automated ad launches. ⚡️ Place your ad here in three simple steps: 1 Sign up 2 Top up the balance in a convenient way 3 Create your advertising post If your ad aligns with our content, we’ll gladly publish it. Start your promotion journey now!

Enjoy our content? Advertise on this channel and reach a highly engaged audience! 👉🏻 It's easy with Telega.io. As the leading platform for native ads and integrations on Telegram, it provides user-friendly and efficient tools for quick and automated ad launches. ⚡️ Place your ad here in three simple steps: 1 Sign up 2 Top up the balance in a convenient way 3 Create your advertising post If your ad aligns with our content, we’ll gladly publish it. Start your promotion journey now!