react-native-live-tracker

Cross-platform EMF (magnetometer) tracker and progress tracker for React Native

Installation

npm install react-native-live-tracker

Usage

EMF Tracker

import React from 'react';
import { View, Text, Button } from 'react-native';
import { isAvailable, startUpdates, stopUpdates, getCurrentField } from 'react-native-live-tracker';

export default function Example() {
  const [supported, setSupported] = React.useState<boolean | null>(null);
  const [running, setRunning] = React.useState(false);
  const [magnitude, setMagnitude] = React.useState<number | null>(null);

  React.useEffect(() => {
    isAvailable().then(setSupported).catch(() => setSupported(false));
  }, []);

  React.useEffect(() => {
    if (!running) return;
    const id = setInterval(async () => {
      const field = await getCurrentField();
      setMagnitude(field?.magnitude ?? null);
    }, 250);
    return () => clearInterval(id);
  }, [running]);

  return (
    <View>
      <Text>Supported: {supported ? 'Yes' : 'No'}</Text>
      <Button
        title={running ? 'Stop' : 'Start'}
        onPress={() => {
          if (running) {
            stopUpdates();
            setRunning(false);
          } else {
            startUpdates({ intervalHz: 15 });
            setRunning(true);
          }
        }}
        disabled={supported === false}
      />
      <Text>Magnitude: {magnitude ?? '-'} uT</Text>
    </View>
  );
}

Progress Tracker

import ProgressTracker from 'react-native-live-tracker/ProgressTracker';

const steps = [
  { id: 'ordered', label: 'ORDERED' },
  { id: 'prep', label: 'PREP' },
  { id: 'bake', label: 'BAKE' },
  { id: 'ready', label: 'READY' },
];

<ProgressTracker 
  steps={steps} 
  activeStepId="ordered"
  isLive={true}  // Enable live tracking
/>

API

EMF Tracker

• isAvailable(): Promise<boolean>
• startUpdates(options?: { intervalHz?: number }): void
• stopUpdates(): void
• getCurrentField(): Promise<{ x: number; y: number; z: number; magnitude: number } | null>

Progress Tracker

• ProgressTracker - Beautiful progress tracker with connected segments
• isLive prop - Enable live auto-advance mode
• Multiple tracker examples: orders, installations, customer pipeline

Features

• EMF Tracking: Cross-platform magnetometer access
• Progress Tracker: Beautiful connected segment design
• Live Mode: Auto-advancing progress with animations
• Multiple Use Cases: Orders, installations, customer tracking
• TypeScript Support: Full type definitions included

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT

Made with create-react-native-library