API Reference

Retrieves the device's current GPS coordinates with accuracy information.

{
  lat: number,      // Latitude
  lng: number,      // Longitude
  accuracy: number  // Accuracy in meters
}

const location = await bridge.getLocation();
console.log(`Lat: ${location.lat}, Lng: ${location.lng}`);

// In Vue component
export default {
  data() {
    return { location: null }
  },
  async mounted() {
    this.location = await bridge.getLocation();
    console.log(`Lat: ${this.location.lat}`);
  }
}

// In React component
import { useState, useEffect } from 'react';

function LocationComponent() {
  const [location, setLocation] = useState(null);
  
  useEffect(() => {
    bridge.getLocation().then(loc => {
      setLocation(loc);
      console.log(`Lat: ${loc.lat}`);
    });
  }, []);
  
  return 
Location loaded
;
}

Opens the device camera to capture a photo.

const photo = await bridge.takePhoto();
document.getElementById('img').src = `data:image/jpeg;base64,${photo}`;

// In Vue component

import { useState } from 'react';

function PhotoComponent() {
  const [photoSrc, setPhotoSrc] = useState('');
  
  const takePhoto = async () => {
    const photo = await bridge.takePhoto();
    setPhotoSrc(`data:image/jpeg;base64,${photo}`);
  };
  
  return (
    

      Take Photo
      
    
  );
}

Opens the gallery to select an existing image.

const image = await bridge.pickImage();
document.getElementById('preview').src = `data:image/jpeg;base64,${image}`;

methods: {
  async selectImage() {
    const image = await bridge.pickImage();
    this.imageSrc = `data:image/jpeg;base64,${image}`;
  }
}

const selectImage = async () => {
  const image = await bridge.pickImage();
  setImageSrc(`data:image/jpeg;base64,${image}`);
};

Displays a local push notification with custom title and message.

• title string
  Notification title
• body string
  Notification message body

await bridge.showNotification('New Message', 'Hello from Nativify!');

// In Vue component
methods: {
  async notifyUser() {
    await bridge.showNotification('New Message', 'Hello!');
  }
}

const notifyUser = async () => {
  await bridge.showNotification('New Message', 'Hello!');
};

Send Notification

Shows a brief toast message at the bottom of the screen.

• message string
  Message to display

await bridge.showToast('Action completed successfully!');

methods: {
  async saveAndNotify() {
    await this.saveData();
    await bridge.showToast('Saved!');
  }
}

const handleSave = async () => {
  await saveData();
  await bridge.showToast('Saved!');
};

Persists data to local storage. Values are automatically serialized to JSON.

• key string
  Storage key
• value any
  Value to store (auto-serialized)

await bridge.saveData('user', { id: 123, name: 'John' });

// In Vue component
await bridge.saveData('user', this.userInfo);

// Load data
this.userInfo = await bridge.loadData('user');

// Save user data
await bridge.saveData('user', userInfo);

// Load user data
const userInfo = await bridge.loadData('user');
setUserInfo(userInfo);

Retrieves data from local storage and automatically deserializes JSON.

const userData = await bridge.loadData('user');
if (userData) {
  console.log('User:', userData.name);
}

async mounted() {
  this.userData = await bridge.loadData('user');
}

useEffect(() => {
  bridge.loadData('user').then(data => {
    setUserData(data);
  });
}, []);

Returns comprehensive device and app information.

{
  platform: string,    // 'android' | 'ios'
  model: string,       // Device model
  version: string,     // OS version
  appVersion: string   // App version
}

const info = await bridge.getDeviceInfo();
console.log(`Running on ${info.platform} ${info.version}`);

async mounted() {
  this.deviceInfo = await bridge.getDeviceInfo();
  console.log('Device:', this.deviceInfo.model);
}

const [deviceInfo, setDeviceInfo] = useState(null);

useEffect(() => {
  bridge.getDeviceInfo().then(setDeviceInfo);
}, []);

Returns detailed app build and environment version info.

{
  runtime: string,    // Native runtime version
  kotlin: string,     // Kotlin version
  agp: string,        // Android Gradle Plugin version
  androidSdk: string, // Target Android SDK
  minSdkVersion: string
}

const versions = await bridge.getVersionInfo();
console.log(`Runtime: ${versions.runtime}, Android SDK: ${versions.androidSdk}`);

async mounted() {
  this.versions = await bridge.getVersionInfo();
}

useEffect(() => {
  bridge.getVersionInfo().then(setVersions);
}, []);

Updates background service notification title and text in real-time.

• title string
  Notification Title
• text string
  Notification Text

await bridge.updateTrackingNotification('Tracking Active', 'Currently at Gangnam Station');

Check if the app is ignored from battery optimizations.

Request user to ignore battery optimizations for the app.

Request activity recognition permission and handle step count data.

// Request permission and start tracking
await bridge.getSteps();

// Listen for step updates
window.onNativeData = (data) => {
  if (data.type === 'BACKGROUND_DATA' && data.payload.steps) {
    console.log(`Current steps: ${data.payload.steps}`);
  }
};

// In Vue component
async mounted() {
  await bridge.getSteps();
  
  window.onNativeData = (data) => {
    if (data.type === 'BACKGROUND_DATA') {
      this.steps = data.payload.steps;
    }
  };
}

Copies text to the system clipboard.

• text string
  Text to copy

await bridge.copyToClipboard('Hello World');
console.log('Copied to clipboard!');

methods: {
  async copyText(text) {
    await bridge.copyToClipboard(text);
    this.showMessage('Copied!');
  }
}

const handleCopy = async (text) => {
  await bridge.copyToClipboard(text);
  setMessage('Copied!');
};

Reads text from the system clipboard.

const text = await bridge.getClipboard();
console.log('Clipboard:', text);

async mounted() {
  this.clipboardText = await bridge.getClipboard();
}

const pasteText = async () => {
  const text = await bridge.getClipboard();
  setText(text);
};

Customizes the status bar appearance including color and icon brightness.

• options.color string
  Hex color, 'transparent', or 'default'
• options.brightness string
  'light' or 'dark'

await bridge.setStatusBar({ color: '#667eea', brightness: 'light' });

async mounted() {
  await bridge.setStatusBar({ color: '#667eea', brightness: 'light' });
}

useEffect(() => {
  bridge.setStatusBar({ color: '#667eea', brightness: 'light' });
}, []);

Controls screen orientation lock.

• orientation string
  'portrait', 'landscape', or 'any'

await bridge.setOrientation('landscape');

methods: {
  async lockLandscape() {
    await bridge.setOrientation('landscape');
  }
}

const setLandscape = async () => {
  await bridge.setOrientation('landscape');
};

Returns safe area insets for devices with notches or rounded corners.

{
  top: number,    // Top inset (px)
  bottom: number, // Bottom inset (px)
  left: number,   // Left inset (px)
  right: number   // Right inset (px)
}

const safeArea = await bridge.getSafeArea();
console.log('Top inset:', safeArea.top);

async mounted() {
  this.safeArea = await bridge.getSafeArea();
  this.applyPadding();
}

const [safeArea, setSafeArea] = useState(null);

useEffect(() => {
  bridge.getSafeArea().then(setSafeArea);
}, []);

Downloads a file with save/share/open handling. Relative legacy routes such as /common/file/fileDown resolve against the current web origin.

• url string
  Download URL
• filename string
  Optional file name. Falls back to the URL path or download.
• mode "save" | "share" | "open"
  open may degrade to share if the platform cannot open the file directly.

{
  path: string,
  filename: string,
  modeRequested: string,
  modeResolved: string
}

const result = await Nativify.downloadFile({
  url: '/common/file/fileDown?atchFileId=123',
  filename: 'document.pdf',
  mode: 'share'
});
console.log('Saved to:', result.path);

data() {
  return { downloadProgress: 0 }
},
methods: {
  async download() {
    const result = await Nativify.downloadFile({
      url: 'https://example.com/file.pdf',
      filename: 'doc.pdf',
      mode: 'open'
    });
  }
}

const [progress, setProgress] = useState(0);

const download = async () => {
  const result = await Nativify.downloadFile({
    url: 'https://example.com/file.pdf',
    filename: 'doc.pdf',
    mode: 'save'
  });
};

Opens the phone dialer with the specified number.

• phoneNumber string
  Phone number to call

await bridge.makePhoneCall('010-1234-5678');

methods: {
  async callSupport() {
    await bridge.makePhoneCall(this.supportNumber);
  }
}

const callPhone = async (number) => {
  await bridge.makePhoneCall(number);
};

Opens the SMS app with pre-filled recipient and message.

• phoneNumber string | null
  Recipient number (optional)
• message string
  SMS message content

await bridge.sendSMS('010-1234-5678', 'Hello!');

methods: {
  async sendMessage() {
    await bridge.sendSMS(this.phoneNumber, this.message);
  }
}

const sendMessage = async () => {
  await bridge.sendSMS(phone, messageText);
};

Closes the app. Only supported on Android.

const userConfirmedExit = true; // Connect to your custom modal/dialog state

if (userConfirmedExit) {
  await bridge.exitApp();
}

methods: {
  async confirmExit() {
    const userConfirmedExit = this.showExitDialog
      ? await this.showExitDialog()
      : true;
    if (userConfirmedExit) {
      await bridge.exitApp();
    }
  }
}

const handleExit = async () => {
  const shouldExit = await openExitModal();
  if (shouldExit) {
    await bridge.exitApp();
  }
};

Triggers haptic feedback. Unsupported or invalid types degrade to vibration automatically.

• type string
  light, medium, heavy, selection, success, warning, error

await Nativify.haptic('success');

methods: {
  async notifyVibrate() {
    await Nativify.haptic('warning');
  }
}

const handleClick = async () => {
  await Nativify.haptic('selection');
};

Opens URL in external browser.

• url string
  URL to open

await Nativify.openOutLink('https://google.com');

methods: {
  async openExternal(url) {
    await Nativify.openOutLink(url);
  }
}

const openLink = async (url) => {
  await Nativify.openOutLink(url);
};

Navigate back in webview history.

await bridge.goBack();

methods: {
  async navigateBack() {
    await bridge.goBack();
  }
}

const goBackPage = async () => {
  await bridge.goBack();
};

Updates home screen widget content.

• data object
  Widget display data

await bridge.updateWidget({ count: 42, status: 'active' });

methods: {
  async refreshWidget() {
    await bridge.updateWidget(this.widgetData);
  }
}

const updateHomeWidget = async (data) => {
  await bridge.updateWidget(data);
};

Checks if the native bridge is available (running in the native app container).

if (bridge.isAvailable()) {
  console.log('Running in native app');
} else {
  console.log('Running in browser');
}

mounted() {
  this.isNative = bridge.isAvailable();
  if (this.isNative) {
    console.log('Native features available');
  }
}

useEffect(() => {
  const isNative = bridge.isAvailable();
  setIsNative(isNative);
}, []);

Handle Android back button press in your web app. Return true to indicate the event was handled, or false to let the app perform default action (go back or exit).

• true
  Web app handled the back button event
• false or undefined
  App performs default action (go back or exit)

If web app doesn't handle the event (300ms timeout):

• 1. If WebView has history → Navigate back
• 2. If no history → Exit app

const router = {
  history: ['home'],
  
  back() {
    if (this.history.length > 1) {
      this.history.pop();
      const previousPage = this.history[this.history.length - 1];
      this.render(previousPage);
      return true;  // Handled
    }
    return false;  // Not handled, exit app
  }
};

window.onBackButton = () => router.back();

// In Vue Router
export default {
  mounted() {
    window.onBackButton = () => {
      if (this.$router.history.length > 1) {
        this.$router.back();
        return true;
      }
      return false;
    };
  }
}

// In React Router
import { useNavigate } from 'react-router-dom';

function App() {
  const navigate = useNavigate();
  
  useEffect(() => {
    window.onBackButton = () => {
      if (window.history.length > 1) {
        navigate(-1);
        return true;
      }
      return false;
    };
  }, [navigate]);
}

window.onBackButton = function() {
  const modal = document.querySelector('.modal.active');
  
  if (modal) {
    closeModal(modal);
    return true;  // Modal closed, event handled
  }
  
  return false;  // No modal open, perform default action
};