Forem: Amina Tariq

Context vs Redux for Theme Management in React Native: Which One Should You Choose?

Amina Tariq — Tue, 07 Oct 2025 05:21:06 +0000

Dark mode is no longer a “nice to have” it’s a user expectation. Whether you’re building a consumer app or an enterprise solution, offering both light and dark themes (with system auto-detection and manual override) significantly improves user experience.
But here comes the question: how do you manage theme state across your app?

The two most common approaches in React Native are:

React Context (with useColorScheme)
Redux (or another global state library)

Let’s break down both approaches, their pros, cons, and when to use each.

1. Theme with React Context
React Context combined with useColorScheme is the lightweight and native-friendly solution.

How It Works

theme.ts

export const lightTheme = {
  background: "#FFFFFF",
  text: "#000000",
};

export const darkTheme = {
  background: "#000000",
  text: "#FFFFFF",
};

ThemeProvider.tsx

import React, { createContext, useContext } from "react";
import { useColorScheme } from "react-native";
import { lightTheme, darkTheme } from "./theme";

const ThemeContext = createContext(lightTheme);

export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
  const scheme = useColorScheme();
  const theme = scheme === "dark" ? darkTheme : lightTheme;

  return (
    <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);

Usage in a screen

import React from "react";
import { View, Text } from "react-native";
import { useTheme } from "../ThemeProvider";

export default function HomeScreen() {
  const theme = useTheme();

  return (
    <View style={{ flex: 1, backgroundColor: theme.background }}>
      <Text style={{ color: theme.text }}>Hello, Context Theme!</Text>
    </View>
  );
}

Advantages

Lightweight: No external library required.
Simple: Perfect for small-to-medium apps.
Auto-detect: Easily integrates with system settings using useColorScheme.

Drawbacks

Limited scaling: Managing overrides (for example, theme plus language plus settings) can get messy.
Persistence required: If you want user-selected theme (not just system), you’ll need AsyncStorage or a similar solution.
Re-renders: Context can trigger unnecessary re-renders if overused. __________________________________________________________________________

2. Theme with Redux
Redux takes a state-first approach, making it a better fit for larger apps where preferences are part of global state.

How It Works

themeSlice.ts

import { createSlice, PayloadAction } from "@reduxjs/toolkit";

type ThemeState = {
  mode: "light" | "dark" | "system";
};

const initialState: ThemeState = {
  mode: "system",
};

const themeSlice = createSlice({
  name: "theme",
  initialState,
  reducers: {
    setTheme: (state, action: PayloadAction<"light" | "dark" | "system">) => {
      state.mode = action.payload;
    },
  },
});

export const { setTheme } = themeSlice.actions;
export default themeSlice.reducer;

useAppTheme.ts

import { useColorScheme } from "react-native";
import { useSelector } from "react-redux";
import { RootState } from "./store";
import { lightTheme, darkTheme } from "./theme";

export const useAppTheme = () => {
  const systemScheme = useColorScheme(); // 'light' or 'dark'
  const mode = useSelector((state: RootState) => state.theme.mode);

  const scheme = mode === "system" ? systemScheme : mode;

  return scheme === "dark" ? darkTheme : lightTheme;
};

Usage in a screen

import React from "react";
import { View, Text, Button } from "react-native";
import { useAppTheme } from "../useAppTheme";
import { useDispatch } from "react-redux";
import { setTheme } from "../themeSlice";

export default function SettingsScreen() {
  const theme = useAppTheme();
  const dispatch = useDispatch();

  return (
    <View style={{ flex: 1, backgroundColor: theme.background }}>
      <Text style={{ color: theme.text }}>Theme Settings</Text>
    </View>
  );
}

Advantages

Centralized control: Everything runs through Redux, making it easy to debug.
Persistence: Combine with redux-persist for long-term storage.
Scales better: Useful if you’re already using Redux for authentication, settings, or language preferences.

Drawbacks

Overhead: If you don’t already use Redux, it’s overkill just for theme.
Boilerplate: Slices, actions, and selectors add more code.
Extra dependency: Adds Redux to your bundle if it’s not already there.

Recommendation
Start simple: If your app doesn’t already use Redux, stick with Context. It’s lean, straightforward, and integrates smoothly with system theme detection.

Go Redux: If your app already uses Redux (or will grow to include global state like user preferences, localization, or complex settings), it makes sense to manage theme inside Redux for consistency.

Think of it like this:
Context is a screwdriver — small, handy, lightweight.
Redux is a toolbox — heavier, but gives you everything you need for a big project.

Conclusion
Theme management in React Native doesn’t have to be complicated. Use Context when you want speed and simplicity. Use Redux when you need scalability, persistence, and centralized control.

Both are valid approaches; the real decision comes down to the size of your app and the complexity of your state.

Making Android Bottom Sheets Look and Behave More Like iOS in .NET MAUI

Amina Tariq — Thu, 26 Jun 2025 19:07:46 +0000

Bottom sheets are a popular UI pattern for displaying contextual content without navigating away from the current screen. However, the default implementations on Android and iOS can look and feel quite different, leading to inconsistent user experiences across platforms. In this post, we'll explore how to create a custom bottom sheet implementation that makes Android bottom sheets behave more like their iOS counterparts.

The Problem: Platform Inconsistencies

By default, Android and iOS handle bottom sheets differently:

Android Bottom Sheets:

Often appear without affecting the background content
May not have consistent backdrop behavior
Can have different animation styles
Touch handling varies between implementations

iOS Bottom Sheets:

Consistently dim the background content
Have smooth, predictable animations
Provide clear visual separation between the sheet and background
Offer intuitive gesture-based interactions
Can be dismissed by tapping outside the sheet area

The Solution: Custom Bottom Sheet Implementation

Let's walk through creating a custom bottom sheet that brings iOS-like behavior to Android while maintaining native performance. This implementation is available as a complete project on GitHub: CustomBottomSheet.

The solution provides:

Dimmed background for better focus
Proper cleanup of active bottom sheets
Cancelable by tapping outside
Only one bottom sheet active at a time
Consistent API for use in views and view models

Step 1: Setting Up the Base Class

We'll extend the existing BottomSheet from The49.Maui.BottomSheet package to add our custom behavior:

using The49.Maui.BottomSheet;
using System;
using Microsoft.Maui.Controls;

namespace CustomBottomSheet.Custom;

public class CustomBottomsheet : BottomSheet
{
    public static CustomBottomsheet CurrentBottomSheet { get; private set; }
    private bool isInitialized = false;
    private bool isDisposed = false;

    public CustomBottomsheet()
    {
        InitializeBottomSheet();
    }
}

Step 2: Managing Bottom Sheet Lifecycle

The key to iOS-like behavior is proper lifecycle management. We need to ensure only one bottom sheet is active at a time and handle the background dimming correctly:

private void InitializeBottomSheet()
{
    if (isInitialized || isDisposed) return;

    this.Showing += OnBottomSheetShowing;
    this.Shown += OnBottomSheetShown;
    this.Dismissed += OnBottomSheetDismissed;

    isInitialized = true;
}

private void OnBottomSheetShowing(object sender, EventArgs e)
{
    if (isDisposed) return;

    // Ensure only one bottom sheet is active
    if (CurrentBottomSheet != null && CurrentBottomSheet != this)
    {
        CurrentBottomSheet.CleanupBottomSheet();
    }

    CurrentBottomSheet = this;

    // Apply iOS-like behavior on Android
    if (DeviceInfo.Platform == DevicePlatform.Android)
    {
        this.IsCancelable = true;  // Enable tap-outside-to-dismiss
        this.HasBackdrop = true;   // Show backdrop for tap detection
        HandleAndroidOpacityForBottomSheet(0.8);
    }
}

Step 3: Enabling iOS-Like Tap-Outside-to-Dismiss

One of the most important iOS behaviors is the ability to dismiss bottom sheets by tapping outside the content area. This provides intuitive interaction that users expect:

private void OnBottomSheetShowing(object sender, EventArgs e)
{
    if (isDisposed) return;

    // Ensure only one bottom sheet is active
    if (CurrentBottomSheet != null && CurrentBottomSheet != this)
    {
        CurrentBottomSheet.CleanupBottomSheet();
    }

    CurrentBottomSheet = this;

    // Apply iOS-like behavior on Android
    if (DeviceInfo.Platform == DevicePlatform.Android)
    {
        this.IsCancelable = true;  // Enable tap-outside-to-dismiss
        this.HasBackdrop = true;   // Show backdrop for tap detection
        HandleAndroidOpacityForBottomSheet(0.8);
    }
}

Key Properties for iOS-Like Behavior:

IsCancelable = true: Allows the bottom sheet to be dismissed by tapping outside
HasBackdrop = true: Creates a backdrop area that can detect tap gestures
Background dimming: Visual feedback that the sheet is modal and can be dismissed

Step 4: The Magic - Background Dimming

The most noticeable difference between platforms is how the background is handled. iOS consistently dims the background content, creating a clear focus on the bottom sheet. Here's how we achieve this on Android:

public static void HandleAndroidOpacityForBottomSheet(double opacity)
{
#if ANDROID
    var currentPageView = Shell.Current?.CurrentPage;
    if (currentPageView != null)
    {
        currentPageView.Opacity = opacity;
    }
    else
    {
        // Fallback for non-Shell applications
        var currentPageOutsideShell = Application.Current.MainPage?.Navigation?.NavigationStack.LastOrDefault();
        if (currentPageOutsideShell != null)
        {
            currentPageOutsideShell.Opacity = opacity;
        }
    }
#endif
}

This method:

Dims the background by reducing the current page's opacity to 0.8 (you can adjust this value)
Works with Shell and non-Shell applications by checking both navigation patterns
Only affects Android using conditional compilation
Creates visual hierarchy similar to iOS modal presentations

Step 5: Proper Cleanup and State Management

To prevent memory leaks and ensure smooth transitions, we need comprehensive cleanup:

private void OnBottomSheetDismissed(object sender, DismissOrigin dismissOrigin)
{
    CleanupBottomSheet();
}

private void CleanupBottomSheet()
{
    if (isDisposed) return;

    // Restore background opacity
    if (DeviceInfo.Platform == DevicePlatform.Android)
    {
        HandleAndroidOpacityForBottomSheet(1.0);
    }

    // Clear current reference
    if (CurrentBottomSheet == this)
    {
        CurrentBottomSheet = null;
    }

    ResetBottomSheetState();
}

private void ResetBottomSheetState()
{
    if (!isDisposed && DeviceInfo.Platform == DevicePlatform.Android)
    {
        this.IsCancelable = true;   // Maintain tap-outside-to-dismiss
        this.HasBackdrop = true;    // Keep backdrop for consistent behavior
    }
}

Step 6: Memory Management

Implement proper disposal to prevent memory leaks:

public void ManualCleanup()
{
    if (isDisposed) return;
    CleanupBottomSheet();
    DisposeBottomSheet();
}

private void DisposeBottomSheet()
{
    if (isDisposed) return;

    if (isInitialized)
    {
        this.Showing -= OnBottomSheetShowing;
        this.Shown -= OnBottomSheetShown;
        this.Dismissed -= OnBottomSheetDismissed;
    }

    CleanupBottomSheet();
    isDisposed = true;
    isInitialized = false;
}

~CustomBottomsheet()
{
    DisposeBottomSheet();
}

Getting Started

You can find the complete implementation in the CustomBottomSheet GitHub repository. The repository includes:

Complete source code with detailed comments
Example usage scenarios
Setup instructions for .NET MAUI projects
Integration with The49.Maui.BottomSheet package

Prerequisites

Before implementing this solution, ensure you have:

The49.Maui.BottomSheet NuGet package installed
.NET MAUI project setup
Understanding of MAUI lifecycle management

Key Benefits

This implementation provides several advantages:

Consistent Visual Experience: Android bottom sheets now dim the background like iOS
Intuitive Interaction: Tap outside to dismiss, just like iOS
Proper State Management: Only one bottom sheet active at a time
Memory Efficiency: Proper cleanup prevents memory leaks
Cross-Platform Compatibility: Works with both Shell and traditional navigation
Smooth Animations: Background opacity changes create smooth transitions

Best Practices

When implementing this solution:

Test on both platforms to ensure the behavior feels natural
Adjust opacity values based on your app's design requirements
Consider accessibility when dimming background content
Handle edge cases like rapid successive bottom sheet presentations
Monitor memory usage in long-running applications

Conclusion

By implementing this custom bottom sheet solution, you can achieve iOS-like consistency across both platforms while maintaining the native performance and feel that users expect. The background dimming effect, combined with proper lifecycle management and tap-outside-to-dismiss functionality, creates a polished user experience that feels cohesive regardless of the platform.

The key insight is that small visual details like background dimming and intuitive interactions can significantly impact the perceived quality and consistency of your cross-platform application. With this implementation, your Android users will enjoy the same polished bottom sheet experience as your iOS users.

Source Code

The complete implementation is available on GitHub: amina-taariq/CustomBottomSheet

This repository provides a reusable solution that you can easily integrate into your .NET MAUI projects to achieve consistent cross-platform bottom sheet behavior.

Want to learn more about cross-platform UI consistency in .NET MAUI? Follow along for more tips and techniques for creating seamless user experiences across Android and iOS.

How to Make CarouselView Work with Pinch-to-Zoom in .NET MAUI

Amina Tariq — Sun, 15 Jun 2025 09:47:37 +0000

The CarouselView in .NET MAUI is a powerful control for building swipeable collections, perfect for galleries, tutorials, or sliders. But what if you want zoomable content—like images—inside each Carousel item?

This post walks you through combining CarouselView with a custom PinchToZoomContainer, enabling pinch-to-zoom and pan interactions inside carousel slides without breaking swipe navigation.

The Challenge
When you place a zoomable view inside a CarouselView, gesture conflicts arise:

Swiping to the next item vs. panning the zoomed content
Double-tap or pinch interfering with CarouselView's native swipe

If not handled carefully, users will either fail to zoom, or accidentally change slides while zooming. Our goal: smooth gestures without compromise.

The Building Block: PinchToZoomContainer

We use a custom ContentView (PinchToZoomContainer) that:

Handles pinch-to-zoom and double-tap
Allows panning only when zoomed in
Resets to original scale when zoomed out

Here's a quick recap of its structure:

public class PinchToZoomContainer : ContentView
{
    // Handles pinch, pan, and double-tap gestures
}

It wraps your content (e.g., an image) and manages gestures smartly.
Integrating with CarouselView
Now, embed the PinchToZoomContainer in each carousel item:

<CarouselView ItemsSource="{Binding Images}">
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <controls:PinchToZoomContainer>
                <Image Source="{Binding}" Aspect="AspectFit" />
            </controls:PinchToZoomContainer>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

🔥 Key Idea: The zoom container manages gestures at the item level, allowing CarouselView to handle swipes only when the content is not zoomed in.

Gesture Conflict Handling
The magic happens in your zoom container’s pan gesture logic:

if (Content.Scale <= 1)
{
    return; // Let CarouselView handle the swipe
}

This line ensures that:

Zoomed out: CarouselView handles swipe
Zoomed in: Only the content pans, swipe is blocked

Also, we dynamically add or remove pan gestures based on zoom state:

if (_currentScale > 1 && !GestureRecognizers.Contains(_panGesture))
{
    GestureRecognizers.Add(_panGesture);
}

This keeps interactions natural and intuitive.

Full Example

Here’s a complete snippet

<CarouselView ItemsSource="{Binding ImageSources}">
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <controls:PinchToZoomContainer>
                <Image Source="{Binding}" Aspect="AspectFit" />
            </controls:PinchToZoomContainer>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

In the ViewModel:

public ObservableCollection<string> ImageSources { get; } = new()
{
    "image1.jpg",
    "image2.jpg",
    "image3.jpg"
};

What Works Well

✅ Pinch-to-zoom works seamlessly inside each slide
✅ Swipe between slides only when not zoomed in
✅ Double-tap toggles zoom
✅ Panning stays within bounds

Wrap Up
You don’t have to choose between pinch-to-zoom and carousel swiping—you can have both! By isolating gestures within a PinchToZoomContainer and being smart about when panning is allowed, your users can enjoy a smooth, professional zoom gallery experience in .NET MAUI.

Check out the GitHub repo: PinchToZoomCarouselApp

Enhance MAUI Entry: Auto-Format Credit Card Numbers!

Amina Tariq — Tue, 18 Mar 2025 07:03:09 +0000

🚀 Seamless UX with Auto-Formatting 🚀

Have you ever struggled with users entering messy credit card numbers? Say no more! Implement a custom MAUI Behavior that formats credit card numbers dynamically as users type. 🏦💳

How It Works

✅ Automatically insert spaces every 4 digits (e.g., 1234 5678 9012 3456).
✅ Maintains correct cursor position while typing or deleting.
✅ Removes non-numeric characters automatically.
✅ Enhances user experience with clean and readable input.

Code Implementation

`public class CardNumberFormatterBehavior : Behavior
{
private bool _isUpdating = false;

protected override void OnAttachedTo(Entry entry)
{
    entry.TextChanged += OnEntryTextChanged;
    base.OnAttachedTo(entry);
}

protected override void OnDetachingFrom(Entry entry)
{
    entry.TextChanged -= OnEntryTextChanged;
    base.OnDetachingFrom(entry);
}

private void OnEntryTextChanged(object sender, TextChangedEventArgs args)
{
    if (_isUpdating || !(sender is Entry entry))
        return;

    _isUpdating = true;

    try
    {
        int cursorPosition = entry.CursorPosition;

        if (string.IsNullOrEmpty(args.NewTextValue))
        {
            entry.Text = string.Empty;
            entry.CursorPosition = 0;
            return;
        }

        int oldSpacesBeforeCursor = 0;
        if (!string.IsNullOrEmpty(args.OldTextValue) && cursorPosition <= args.OldTextValue.Length)
        {
            oldSpacesBeforeCursor = args.OldTextValue.Substring(0, cursorPosition).Count(c => c == ' ');
        }

        int oldDigitsBeforeCursor = cursorPosition - oldSpacesBeforeCursor;

        string cleanText = new string(args.NewTextValue.Where(char.IsDigit).ToArray());

        string formattedText = FormatCardNumber(cleanText);

        entry.Text = formattedText;

        int newCursorPosition;

        if (args.NewTextValue.Length > args.OldTextValue?.Length)
        {
            int spacesInFormattedTextUpToDigits = 0;
            int digitCount = 0;

            for (int i = 0; i < formattedText.Length && digitCount < oldDigitsBeforeCursor + 1; i++)
            {
                if (formattedText[i] == ' ')
                {
                    spacesInFormattedTextUpToDigits++;
                }
                else
                {
                    digitCount++;
                }
            }

            newCursorPosition = oldDigitsBeforeCursor + spacesInFormattedTextUpToDigits + 1;
        }
        else
        {
            int spacesInFormattedTextUpToDigits = 0;
            int digitCount = 0;

            for (int i = 0; i < formattedText.Length && digitCount < oldDigitsBeforeCursor; i++)
            {
                if (formattedText[i] == ' ')
                {
                    spacesInFormattedTextUpToDigits++;
                }
                else
                {
                    digitCount++;
                }
            }

            newCursorPosition = oldDigitsBeforeCursor + spacesInFormattedTextUpToDigits;
        }

        newCursorPosition = Math.Max(0, Math.Min(formattedText.Length, newCursorPosition));
        entry.CursorPosition = newCursorPosition;
    }
    finally
    {
        _isUpdating = false;
    }
}

private string FormatCardNumber(string cardNumber)
{
    if (string.IsNullOrEmpty(cardNumber))
        return string.Empty;

    StringBuilder result = new StringBuilder();

    for (int i = 0; i < cardNumber.Length; i++)
    {
        if (i > 0 && i % 4 == 0)
            result.Append(" ");

        result.Append(cardNumber[i]);
    }

    return result.ToString();
}

How to Use It in Your MAUI App

Simply attach the behavior to an Entry in XAML:
<Entry Placeholder="Enter card number"> <Entry.Behaviors> <local:CardNumberFormatterBehavior /> </Entry.Behaviors> </Entry>

Why Use This?

🚀 Improves data consistency.
🎯 Reduces user input errors.
🔧 Works seamlessly in .NET MAUI apps.

Would you add any improvements to this behavior? Drop your thoughts below! ⬇️💬