@nayan-ui/react-native/dist/module/components/NThemeToggle.js

React Native Component Library for smooth and faster mobile application development.

"use strict";

import React, { useCallback, useMemo } from 'react';
import { Pressable } from 'react-native';
import { useNTheme } from "../hooks/useNTheme.js";
import { setAndroidNavigationBar } from "../lib/android-navigation-bar.js";
import { MoonStar } from "../lib/icons/MoonStar.js";
import { Sun } from "../lib/icons/Sun.js";
import { THEMES, cn } from "../lib/utils.js";
import { jsx as _jsx } from "react-native-css-interop/jsx-runtime";
export const NThemeToggle = /*#__PURE__*/React.memo(({
  size = 30,
  strokeWidth = 1.25,
  className = '',
  onThemeChange,
  ...props
}) => {
  const {
    isDarkMode,
    setTheme,
    themeColors
  } = useNTheme();
  const currentIcon = useMemo(() => {
    const IconComponent = isDarkMode ? MoonStar : Sun;
    return _jsx(IconComponent, {
      size: size,
      strokeWidth: strokeWidth
    });
  }, [isDarkMode, size, strokeWidth]);
  const toggleTheme = useCallback(() => {
    const newTheme = isDarkMode ? THEMES.light : THEMES.dark;
    setTheme(newTheme);
    setAndroidNavigationBar(newTheme);
    onThemeChange && onThemeChange(newTheme);
  }, [isDarkMode, setTheme, themeColors, onThemeChange]);
  return _jsx(Pressable, {
    onPress: toggleTheme,
    ...props,
    children: /*#__PURE__*/React.cloneElement(currentIcon, {
      className: cn('text-text', className)
    })
  });
});
NThemeToggle.displayName = 'NThemeToggle';
//# sourceMappingURL=NThemeToggle.js.map