tessl/npm-react-native-localize

A toolbox for your React Native app localization.

—

Pending

Overview

Eval results

Files

Device Preferences

Name: tessl/npm-react-native-localize
Author: tessl

System preferences for measurement units, time format, and automatic settings to help apps adapt to user preferences and regional conventions.

Capabilities

Get Temperature Unit

Gets the device's preferred temperature unit based on regional settings.

/**
 * Get device's temperature unit preference
 * @returns "celsius" for metric regions, "fahrenheit" for imperial regions
 */
function getTemperatureUnit(): TemperatureUnit;

type TemperatureUnit = "celsius" | "fahrenheit";

Usage Examples:

import { getTemperatureUnit } from "react-native-localize";

const tempUnit = getTemperatureUnit();
console.log(tempUnit); // "celsius" or "fahrenheit"

// Temperature display logic
function formatTemperature(celsius: number): string {
  const unit = getTemperatureUnit();
  
  if (unit === "fahrenheit") {
    const fahrenheit = (celsius * 9/5) + 32;
    return `${Math.round(fahrenheit)}°F`;
  } else {
    return `${Math.round(celsius)}°C`;
  }
}

console.log(formatTemperature(25)); 
// Celsius regions: "25°C"
// Fahrenheit regions: "77°F"

Weather App Integration:

import { getTemperatureUnit } from "react-native-localize";

class WeatherService {
  getTemperatureDisplay(celsiusTemp: number): { value: number; unit: string } {
    const unit = getTemperatureUnit();
    
    if (unit === "fahrenheit") {
      return {
        value: Math.round((celsiusTemp * 9/5) + 32),
        unit: "°F"
      };
    } else {
      return {
        value: Math.round(celsiusTemp),
        unit: "°C"
      };
    }
  }
}

Check 24-Hour Clock Usage

Determines if the device uses 24-hour time format.

/**
 * Check if device uses 24-hour clock format
 * @returns true if 24-hour format, false if 12-hour format (AM/PM)
 */
function uses24HourClock(): boolean;

Usage Examples:

import { uses24HourClock } from "react-native-localize";

const is24Hour = uses24HourClock();
console.log(is24Hour); // true or false

// Time formatting based on device preference
function formatTime(date: Date): string {
  const is24Hour = uses24HourClock();
  
  return date.toLocaleTimeString(undefined, {
    hour12: !is24Hour,
    hour: 'numeric',
    minute: '2-digit'
  });
}

const now = new Date();
console.log(formatTime(now));
// 24-hour regions: "14:30"
// 12-hour regions: "2:30 PM"

Clock Component Example:

import { uses24HourClock } from "react-native-localize";

function DigitalClock() {
  const [time, setTime] = useState(new Date());
  const is24Hour = uses24HourClock();
  
  useEffect(() => {
    const timer = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);
  
  const timeString = time.toLocaleTimeString(undefined, {
    hour12: !is24Hour,
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit'
  });
  
  return <Text>{timeString}</Text>;
}

Check Metric System Usage

Determines if the device uses the metric measurement system.

/**
 * Check if device uses metric system
 * @returns true for metric system, false for imperial system
 */
function usesMetricSystem(): boolean;

Usage Examples:

import { usesMetricSystem } from "react-native-localize";

const isMetric = usesMetricSystem();
console.log(isMetric); // true for most countries, false for US, Liberia, Myanmar

// Distance formatting
function formatDistance(meters: number): string {
  const isMetric = usesMetricSystem();
  
  if (isMetric) {
    if (meters < 1000) {
      return `${Math.round(meters)} m`;
    } else {
      return `${(meters / 1000).toFixed(1)} km`;
    }
  } else {
    const feet = meters * 3.28084;
    if (feet < 5280) {
      return `${Math.round(feet)} ft`;
    } else {
      const miles = feet / 5280;
      return `${miles.toFixed(1)} mi`;
    }
  }
}

console.log(formatDistance(1500));
// Metric: "1.5 km"
// Imperial: "0.9 mi"

Fitness App Integration:

import { usesMetricSystem } from "react-native-localize";

class FitnessMetrics {
  formatWeight(kg: number): { value: number; unit: string } {
    if (usesMetricSystem()) {
      return { value: Math.round(kg * 10) / 10, unit: "kg" };
    } else {
      const pounds = kg * 2.20462;
      return { value: Math.round(pounds * 10) / 10, unit: "lbs" };
    }
  }
  
  formatHeight(cm: number): { value: string; unit: string } {
    if (usesMetricSystem()) {
      return { value: cm.toString(), unit: "cm" };
    } else {
      const totalInches = cm / 2.54;
      const feet = Math.floor(totalInches / 12);
      const inches = Math.round(totalInches % 12);
      return { value: `${feet}'${inches}"`, unit: "" };
    }
  }
}

Check Auto Date and Time

Checks if the device has automatic date and time setting enabled.

/**
 * Check if device uses automatic date and time
 * @returns true if enabled, false if disabled, undefined if not available/determinable
 */
function usesAutoDateAndTime(): boolean | undefined;

Usage Examples:

import { usesAutoDateAndTime } from "react-native-localize";

const autoDateTime = usesAutoDateAndTime();

if (autoDateTime === true) {
  console.log("Device automatically syncs date/time");
} else if (autoDateTime === false) {
  console.log("Manual date/time setting");
  // Maybe show a warning about potential time sync issues
} else {
  console.log("Auto date/time status unknown");
}

Check Auto Timezone

Checks if the device has automatic timezone setting enabled.

/**
 * Check if device uses automatic timezone
 * @returns true if enabled, false if disabled, undefined if not available/determinable
 */
function usesAutoTimeZone(): boolean | undefined;

Usage Examples:

import { usesAutoTimeZone } from "react-native-localize";

const autoTimezone = usesAutoTimeZone();

function checkTimeSettings() {
  const autoTz = usesAutoTimeZone();
  
  if (autoTz === false) {
    // Warn user about potential timezone issues
    return {
      warning: "Manual timezone detected. Location-based features may be inaccurate.",
      suggestion: "Enable automatic timezone in device settings"
    };
  }
  
  return { status: "ok" };
}

Complete Device Preferences Check:

import { 
  getTemperatureUnit, 
  uses24HourClock, 
  usesMetricSystem,
  usesAutoDateAndTime,
  usesAutoTimeZone 
} from "react-native-localize";

function getDevicePreferences() {
  return {
    temperature: getTemperatureUnit(),
    timeFormat: uses24HourClock() ? "24h" : "12h",
    measurements: usesMetricSystem() ? "metric" : "imperial",
    autoDateTime: usesAutoDateAndTime(),
    autoTimezone: usesAutoTimeZone()
  };
}

const prefs = getDevicePreferences();
console.log(prefs);
// {
//   temperature: "celsius",
//   timeFormat: "24h", 
//   measurements: "metric",
//   autoDateTime: true,
//   autoTimezone: true
// }

// Use preferences to configure app defaults
function configureAppDefaults(preferences: typeof prefs) {
  // Set temperature unit for weather displays
  setTemperatureUnit(preferences.temperature);
  
  // Configure time pickers and displays
  setTimeFormat(preferences.timeFormat);
  
  // Set distance and weight units
  setMeasurementSystem(preferences.measurements);
  
  // Show warnings for manual time settings if needed
  if (preferences.autoDateTime === false || preferences.autoTimezone === false) {
    showTimeSettingsWarning();
  }
}

Install with Tessl CLI

npx tessl i tessl/npm-react-native-localize

docs

device-preferences.md

device-settings.md

index.md

language-matching.md

number-currency-formatting.md

platform-utilities.md

tile.json

tessl/npm-react-native-localize