Vedic Astrology API for React Native — iOS & Android Integration Guide

If you already know React, you can build a Vedic astrology app for both iOS and Android with React Native. The VedIntel™ AstroAPI is a standard REST API — fetch() works exactly as in web React.

fetch() in React Native — Identical to Web

React Native's fetch() is spec-compatible with browser fetch. No changes needed from your web React code:

// React Native — fetch works exactly as in web React
const API_BASE = 'https://vedintelastroapi.com/api/v1';

async function getPlanetDetails(dob, tob, lat, lon, tz) {
  const params = new URLSearchParams({ api_key: 'YOUR_KEY', dob, tob, lat, lon, tz });
  const res = await fetch(`${API_BASE}/horoscope/planet-details?${params}`);
  const data = await res.json();
  if (data.status !== 200) throw new Error(data.error || 'API error');
  return data.response;
}
// Identical to browser fetch — React Native's fetch is web-compatible

Expo Setup and Secure API Key Storage

Never ship your API key inside the app bundle — it will be extracted from the APK. Use Expo SecureStore or proxy through your own backend:

// Install for Expo projects
npx expo install expo-secure-store
npm install @react-native-community/datetimepicker

// Required permissions in app.json
{
  "expo": {
    "plugins": [
      ["expo-secure-store"],
      ["@react-native-community/datetimepicker", { "androidVariant": "iosClone" }]
    ]
  }
}

// Secure API key storage with Expo SecureStore
import * as SecureStore from 'expo-secure-store';

// Store the key once (e.g. after user logs in to your backend)
await SecureStore.setItemAsync('astro_api_key', 'YOUR_KEY');

// Read it back before any API call
const apiKey = await SecureStore.getItemAsync('astro_api_key');

// Better: proxy through your own backend — never ship API keys in the app bundle
// Your backend: POST /api/chart → validates user → calls VedIntel → returns result

Complete Kundali Screen Component

A production-ready React Native screen that fetches and displays all 9 planetary positions with a dark Vedic theme:

// screens/KundaliScreen.tsx
import React, { useState } from 'react';
import { View, Text, ScrollView, TouchableOpacity, ActivityIndicator, StyleSheet } from 'react-native';

interface Planet { name: string; sign: string; house: number; nakshatra: string; is_retro?: boolean; }

export default function KundaliScreen({ route }: any) {
  const { dob, tob, lat, lon, tz } = route.params;
  const [planets, setPlanets]   = useState<Planet[] | null>(null);
  const [loading, setLoading]   = useState(false);
  const [error, setError]       = useState<string | null>(null);

  async function fetchChart() {
    setLoading(true); setError(null);
    try {
      const params = new URLSearchParams({
        api_key: 'YOUR_KEY', dob, tob,
        lat: lat.toString(), lon: lon.toString(), tz: tz.toString(),
      });
      const res  = await fetch(`https://vedintelastroapi.com/api/v1/horoscope/planet-details?${params}`);
      const data = await res.json();
      setPlanets(data.response.planets);
    } catch (e: any) {
      setError(e.message);
    } finally { setLoading(false); }
  }

  React.useEffect(() => { fetchChart(); }, []);

  if (loading) return <ActivityIndicator style={{ flex: 1 }} color="#4f46e5" size="large" />;
  if (error)   return <Text style={styles.error}>{error}</Text>;
  if (!planets) return null;

  return (
    <ScrollView style={styles.container}>
      <Text style={styles.heading}>Your Vedic Chart</Text>
      {planets.map(p => (
        <View key={p.name} style={styles.card}>
          <View style={styles.avatar}>
            <Text style={styles.avatarText}>{p.name[0]}</Text>
          </View>
          <View style={{ flex: 1 }}>
            <Text style={styles.planetName}>{p.name}{p.is_retro ? ' ℞' : ''}</Text>
            <Text style={styles.planetDetail}>{p.sign} · House {p.house} · {p.nakshatra}</Text>
          </View>
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container:    { flex: 1, backgroundColor: '#0a0f1e', padding: 16 },
  heading:      { color: 'white', fontSize: 22, fontWeight: '800', marginBottom: 20, textAlign: 'center' },
  card:         { flexDirection: 'row', alignItems: 'center', backgroundColor: '#1a1f35', borderRadius: 12, padding: 14, marginBottom: 10, gap: 14 },
  avatar:       { width: 40, height: 40, borderRadius: 20, backgroundColor: '#4f46e5', alignItems: 'center', justifyContent: 'center' },
  avatarText:   { color: 'white', fontWeight: '700', fontSize: 16 },
  planetName:   { color: 'white', fontWeight: '700', fontSize: 15 },
  planetDetail: { color: '#8b92b8', fontSize: 13, marginTop: 2 },
  error:        { flex: 1, color: 'red', textAlign: 'center', marginTop: 40 },
});

Date & Time Picker Integration

The API expects DD/MM/YYYY. Convert from the React Native DateTimePicker's Date object:

// Date and time formatting for React Native
import DateTimePicker from '@react-native-community/datetimepicker';
import { useState } from 'react';

// Convert JS Date to API format
function toAPIDate(date: Date): string {
  const d = String(date.getDate()).padStart(2, '0');
  const m = String(date.getMonth() + 1).padStart(2, '0');
  return `${d}/${m}/${date.getFullYear()}`; // '01/10/1977'
}

function toAPITime(date: Date): string {
  return `${String(date.getHours()).padStart(2,'0')}:${String(date.getMinutes()).padStart(2,'0')}`;
}

// Usage in a birth data form
const [birthDate, setBirthDate] = useState(new Date(1977, 9, 1));

<DateTimePicker
  value={birthDate}
  mode="date"
  display="default"
  onChange={(event, date) => date && setBirthDate(date)}
/>
// Then pass: dob={toAPIDate(birthDate)}, tob={toAPITime(birthDate)}

What to Build Next in Your React Native Astrology App