Build a React Native Astrology App with Vedika API

Project Setup

This tutorial builds a React Native Expo app with three core features: birth chart generation, daily horoscope, and AI astrology chat. We will use Vedika API for all astrological calculations and the JavaScript SDK for easy integration.

npx create-expo-app AstrologyApp --template blank-typescript
cd AstrologyApp
npm install @vedika-io/sdk
npm install @react-navigation/native @react-navigation/bottom-tabs
npm install react-native-safe-area-context react-native-screens

Initialize Vedika SDK

// src/api/vedika.ts
import { VedikaClient } from '@vedika-io/sdk';

export const vedika = new VedikaClient({
  apiKey: process.env.EXPO_PUBLIC_VEDIKA_API_KEY,
  baseUrl: 'https://api.vedika.io'
});

// Birth chart
export async function getBirthChart(datetime: string, lat: number, lng: number, tz: string) {
  return vedika.astrology.birthChart({
    datetime, latitude: lat, longitude: lng, timezone: tz
  });
}

// Daily horoscope
export async function getDailyHoroscope(sign: string) {
  return vedika.western.horoscope(sign);
}

Birth Chart Screen

The birth chart screen collects user birth details (date, time, location) and displays planetary positions, house analysis, and active yogas. Use a date picker for birth date, time picker for birth time, and a location search with Google Places API for birthplace.

// src/screens/BirthChartScreen.tsx
import React, { useState } from 'react';
import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
import { getBirthChart } from '../api/vedika';

export function BirthChartScreen() {
  const [chart, setChart] = useState(null);
  const [loading, setLoading] = useState(false);

  async function generateChart() {
    setLoading(true);
    try {
      const result = await getBirthChart(
        '1990-06-15T10:30:00', 28.6139, 77.209, '+05:30'
      );
      setChart(result);
    } finally {
      setLoading(false);
    }
  }

  return (
    
      Birth Chart
      
        
          {loading ? 'Generating...' : 'Generate Chart'}
        
      
      {chart && }
    
  );
}

AI Chat Integration

The AI chat feature uses Vedika streaming endpoint for real-time responses. Users can ask questions about their birth chart in natural language and receive personalized astrological guidance.

For production apps, store the user birth details securely and include them automatically with each chat query. This eliminates the need for users to re-enter birth data for follow-up questions.