Ars Dev

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!

📄 Native vs React Native - Research Paper 👉 Read the article here 👩‍💻 React Native Hub

📄 Native vs React Native - Research Paper 👉 Read the article here 👩‍💻 React Native Hub

React vs Angular vs Vue An eternal debate. I decided to ask Ai. According to o3-pro, here are the key takeaways: TL;DR — The 2025 Landscape – React is confidently #1 in both installations and job openings, – Angular is experiencing a corporate revival after the v17–v18 releases, – Vue steadily holds its “pleasant and fast” niche with high community loyalty. Forecast for 2025–2027 👩‍💻 React will remain the de facto standard. The release of React 19 with optimized server streaming will reinforce its leadership. 👩‍💻 Angular will grow in the B2B niche thanks to Signals, but its strict TypeScript-first architecture means a high entry barrier. 👩‍💻 Vue will continue to be a community favorite, especially in Asia. It’ll retain around 15–17% market share, but is unlikely to surpass Angular in job demand without a strong enterprise push.

On a global scale, React is objectively “better” by the numbers, but “better for your project” → depends on your team’s needs, deadlines, regulations, and technical debt.

👩‍💻 React Native Hub

🚀 Full-Screen Image Viewer in Expo Made Easy Andrew Chester shows how to implement a sleek, full-screen image viewer with zoom using Expo and the @likashefqet/react-native-image-zoom library. Key Highlights: - Install @likashefqet/react-native-image-zoom + react-native-reanimated + gesture-handler - Wrap your image in <Zoomable> to enable pinch & double-tap zoom - Build a reusable overlay using ImageProvider + ImageView + useImperativeHandle for a smooth full-screen experience Perfect for apps where users need to inspect image details—just like Instagram or Facebook. https://medium.com/@andrew.chester/react-native-expo-full-screen-image-viewer-with-zoom-made-simple-d374081acc6d React Native Hub

🚀 Full-Screen Image Viewer in Expo Made Easy Andrew Chester shows how to implement a sleek, full-screen image viewer with zoom using Expo and the @likashefqet/react-native-image-zoom library. Key Highlights: - Install @likashefqet/react-native-image-zoom + react-native-reanimated + gesture-handler - Wrap your image in <Zoomable> to enable pinch & double-tap zoom - Build a reusable overlay using ImageProvider + ImageView + useImperativeHandle for a smooth full-screen experience Perfect for apps where users need to inspect image details—just like Instagram or Facebook. https://medium.com/@andrew.chester/react-native-expo-full-screen-image-viewer-with-zoom-made-simple-d374081acc6d

🚀 React Native 0.80 is out! Key updates you should know: - Upgrades to React 19.1.0 for improved stability and bug fixes - Introduces a new Strict TypeScript API (opt-in) with enhanced typings and reduced breaking changes - Freezes the Legacy Architecture, paving the way for better future performance—watch for compatibility warnings - iOS builds faster (up to ~12% improvement) with experimental prebuilt dependencies - Android APK size drops (~1 MB) thanks to Interprocedural Optimization (IPO) - The New App screen is now modular and visually refreshed - Last RN version with bundled JavaScriptCore (JSC) — future releases will require community JSC Read the full article here React Native Hub

useDebounce — Stop Unnecessary API Calls ⏳ When handling search inputs or live updates, debouncing prevents excessive API requests by delaying execution until the user stops typing. Implementation:

import { useState, useEffect } from "react";

function useDebounce(value, delay = 500) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(handler);
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;

Usage Example:

const [searchTerm, setSearchTerm] = useState("");
const debouncedSearch = useDebounce(searchTerm, 300);

useEffect(() => {
  if (debouncedSearch) {
    fetch(`https://api.example.com/search?q=${debouncedSearch}`)
      .then((res) => res.json())
      .then((data) => console.log(data));
  }
}, [debouncedSearch]);

<TextInput
  placeholder="Search..."
  onChangeText={(text) => setSearchTerm(text)}
/>;

✅ Why Use It? - Reduces unnecessary API calls - Improves performance in search fields - Ensures a smooth user experience React Native Hub | #customhooks

😎

Back for day two of App.js Conf. 👨‍💻✨ Here’s what’s on the agenda today: → Large-Scale React Native Development in the Age of AI by Rafael Mendiola → Brownfield React Native at Scale: Ship Dozens of Micro-Apps Daily by Sojin Park → Embracing Native Code and Capabilities in Your Expo App by Keith Kurak → Towards a Stable JavaScript API by Alex Hunt → Le Chat and a Brief History of Streaming by Delphine Bugner → Everybody Can Cook with React Native by Enzo Manuel Mangano → TanStack Query in Expo Apps: Improving DX and UX Like No Other by Devlin Duldulao → Let's Go Live: React Native Live Streaming With Zero WebRTC Knowledge by Miłosz Filimowski → Building Secure React Native Apps by Jacob Arvidsson → The Future of Authentication in React Native by Laura Beatris → Software Composing: Expo Development for Your PM by Tomasz Sułkowski → Keyboard Management Evolution in React Native by Kiryl Ziusko → Unlocking Revenue: Monetizing Your React Native App with In-App Purchases by Perttu Lähteenlahti Link to the stream: https://www.youtube.com/live/UTaJlqhTk2g?si=HZF4wIO4DmglErd9 React Native Hub

App.js Conf 2025 has officially started! 😎🎉 Here’s today’s lineup: → Intro by Marcin Skotniczny → Keynote by Charlie Cheever and Jon Samp → Deploy Everywhere with Expo Router by Evan Bacon → Expo on Orbit by Aaron Grider → Life After Legacy: The New Architecture Future by Nico Corti and Riccardo Cipolleschi → Legend List: Optimizing for Peak List Performance by Jay Meistrich → Mozart Never Had React Native: You Do by Kim Chouard → Radon IDE – Code with Glee by Krzysztof Magiera → WebGPU – High performant 3D animations in React Native by Krzysztof Piaskowy → Scaling Enterprise CI/CD: A Migration Success Story by Michael Blanchard → Taking the Party Outside the App with App Clip and Live Activity by Alex Chou → The Bigger Picture by Anisha Malde and Łukasz Chludziński → Running Small Language Models on Your Phone: Bringing AI to Mobile with React Native and ExecuTorch by Mateusz Kopciński → Building React Native Apps with Premium Feel and Quality UX by Saúl Sharma Link to the stream: https://www.youtube.com/live/K2JTTKpptGs?si=A4_g8DHiouDmrWk6 React Native Hub

useLocalStorage — Persist Data Like a Pro in React Native Ever needed to store user preferences or tokens in your React Native app?Instead of manually interacting with AsyncStorage, use this custom hook to simplify the process and write cleaner code. ✅ Implementation using @react-native-async-storage/async-storage:

import { useState, useEffect } from "react";
import AsyncStorage from "@react-native-async-storage/async-storage";

function useAsyncStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(initialValue);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const loadValue = async () => {
      try {
        const item = await AsyncStorage.getItem(key);
        setStoredValue(item != null ? JSON.parse(item) : initialValue);
      } catch (error) {
        console.error("Error loading from AsyncStorage", error);
      } finally {
        setIsLoading(false);
      }
    };
    loadValue();
  }, [key]);

  const setValue = async (value) => {
    try {
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      await AsyncStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error("Error setting AsyncStorage", error);
    }
  };

  return [storedValue, setValue, isLoading];
}

export default useAsyncStorage;

🧪 Usage Example: Theme Toggle

import React, { useEffect } from "react";
import { View, Text, Button, StyleSheet } from "react-native";
import useAsyncStorage from "./useAsyncStorage";

const ThemeSwitcher = () => {
  const [theme, setTheme] = useAsyncStorage("theme", "light");

  const toggleTheme = () => {
    setTheme((prev) => (prev === "light" ? "dark" : "light"));
  };

  return (
    <View style={[
        styles.container,
        theme === "dark" ? styles.dark : styles.light,
      ]}
    >
      <Text style={styles.text}>Current Theme: {theme}</Text>
      <Button title="Toggle Theme" onPress={toggleTheme} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  dark: {
    backgroundColor: "#222",
  },
  light: {
    backgroundColor: "#fff",
  },
  text: {
    fontSize: 20,
    marginBottom: 16,
  },
});

export default ThemeSwitcher;

React Native Hub | #customhooks

Building a scalable React Native app requires a well-structured codebase, modular design, and best practices. This example show how to set up folder structure for Expo Router-based project with Zustand for state management, Axios for API handling, and Maestro for E2E testing. This structure ensures maintainability, scalability, and better developer experience. Project Structure 📂 Here’s a well-organized structure for your Expo React Native project:

AwesomeProject/
├── app/ # Expo Router Pages (Screens Only)
│ ├── index.tsx # Home screen (“/”)
│ ├── _layout.tsx # Global layout
│ ├── auth/
│ │ ├── index.tsx # “/auth” (Auth entry point)
│ │ ├── login.tsx # “/auth/login”
│ │ ├── signup.tsx # “/auth/signup”
│ ├── chat/
│ │ ├── index.tsx # “/chat” (Chat List)
│ │ ├── conversation.tsx # “/chat/conversation”
│ ├── settings/
│ │ ├── index.tsx # “/settings”
│ │ ├── notifications.tsx # “/settings/notifications”
│ │ ├── security.tsx # “/settings/security”
│ ├── profile/
│ │ ├── index.tsx # “/profile”
│ │ ├── edit.tsx # “/profile/edit”
│ │ ├── preferences.tsx # “/profile/preferences”
│
├── modules/ # Feature Modules
│ ├── auth/
│ │ ├── components/
│ │ │ ├── LoginForm.tsx
│ │ │ ├── SignupForm.tsx
│ │ ├── hooks/
│ │ │ ├── useAuth.ts
│ │ ├── services/
│ │ │ ├── authService.ts
│ │ ├── store/
│ │ │ ├── useAuthStore.ts
│ │ ├── validation/
│ │ │ ├── authSchema.ts
│
│ ├── chat/
│ │ ├── components/
│ │ │ ├── MessageBubble.tsx
│ │ │ ├── ChatInput.tsx
│ │ ├── hooks/
│ │ │ ├── useChat.ts
│ │ ├── services/
│ │ │ ├── chatService.ts
│ │ ├── store/
│ │ │ ├── useChatStore.ts
│ │ ├── utils/
│ │ │ ├── chatHelpers.ts # Helper functions for chat
│
│ ├── settings/
│ │ ├── components/
│ │ │ ├── NotificationToggle.tsx
│ │ │ ├── SecuritySettings.tsx
│ │ ├── store/
│ │ │ ├── useSettingsStore.ts
│
│ ├── profile/
│ │ ├── components/
│ │ │ ├── AvatarUpload.tsx
│ │ │ ├── ProfileForm.tsx
│ │ ├── hooks/
│ │ │ ├── useProfile.ts
│ │ ├── services/
│ │ │ ├── profileService.ts
│ │ ├── store/
│ │ │ ├── useProfileStore.ts
│
├── components/ # Global Reusable Components
│ ├── Button.tsx
│ ├── Input.tsx
│ ├── Avatar.tsx
│ ├── Modal.tsx # Custom modal component
│ ├── Loader.tsx # Loader animation
│
├── hooks/ # Global Hooks
│ ├── useTheme.ts
│ ├── useNetwork.ts
│ ├── useNotifications.ts # Handle push notifications
│
├── store/ # Global Zustand Stores
│ ├── useThemeStore.ts
│ ├── useUserStore.ts
│
├── services/ # Global API Services
│ ├── apiClient.ts # Axios Setup
│ ├── notificationService.ts
│ ├── uploadService.ts # File/Image Upload Service
│
├── utils/ # Utility Functions
│ ├── formatDate.ts
│ ├── validateEmail.ts
│ ├── navigation.ts
│ ├── fileHelpers.ts # Helper functions for file handling
│
├── localization/ # Multi-Language Support
│ ├── en.json
│ ├── es.json
│ ├── index.ts
│
├── env/ # Environment-Based Configurations
│ ├── .env.development
│ ├── .env.production
│ ├── .env.staging
│
├── __tests__/ # Tests
│ ├── e2e/
│ ├── unit/
│ ├── jest.setup.ts
│
├── .husky/ # Git Hooks
├── tailwind.config.js # Tailwind Configuration
├── app.config.ts # Expo Configuration
├── tsconfig.json # TypeScript Configuration
├── package.json # Dependencies
├── README.md # Documentation

React Native Hub