@samirkoirala/bs-calendar-react/EXAMPLE_APP.md

A comprehensive React and React Native library for Bikram Sambat (Nepali) calendar with holidays support. Cross-platform compatible.

# React Native Example Setup

This guide helps you quickly set up a React Native app to test the `bs-calendar-react` package.

## Quick Start

### 1. Create a new React Native project

```bash
npx react-native@latest init BSCalendarExample
cd BSCalendarExample
```

### 2. Install the package

```bash
npm install bs-calendar-react
# or
yarn add bs-calendar-react
```

### 3. Replace App.tsx content

```typescript
import React, { useState } from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  useColorScheme,
} from 'react-native';

import { useCalendar, getCurrentDate } from 'bs-calendar-react';

const App = (): React.JSX.Element => {
  const isDarkMode = useColorScheme() === 'dark';
  const [selectedYear, setSelectedYear] = useState(2081);
  const [selectedMonth, setSelectedMonth] = useState(3);

  const { 
    today, 
    monthsWithHolidays, 
    currentBikYear, 
    currentBikMonth 
  } = useCalendar({
    year: selectedYear,
    month: selectedMonth
  });

  const currentDate = getCurrentDate();

  const backgroundStyle = {
    backgroundColor: isDarkMode ? '#1a1a1a' : '#ffffff',
  };

  const textStyle = {
    color: isDarkMode ? '#ffffff' : '#000000',
  };

  const goToPreviousMonth = () => {
    if (selectedMonth > 1) {
      setSelectedMonth(selectedMonth - 1);
    } else {
      setSelectedYear(selectedYear - 1);
      setSelectedMonth(12);
    }
  };

  const goToNextMonth = () => {
    if (selectedMonth < 12) {
      setSelectedMonth(selectedMonth + 1);
    } else {
      setSelectedYear(selectedYear + 1);
      setSelectedMonth(1);
    }
  };

  return (
    <SafeAreaView style={[styles.container, backgroundStyle]}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      
      <View style={styles.header}>
        <Text style={[styles.title, textStyle]}>
          Nepali Calendar
        </Text>
        <Text style={[styles.subtitle, textStyle]}>
          BS Calendar React Native Demo
        </Text>
      </View>

      <View style={styles.currentInfo}>
        <Text style={[styles.currentDate, textStyle]}>
          Today: {today.date}
        </Text>
        <Text style={[styles.currentBS, textStyle]}>
          Current BS: {currentDate.year}-{currentDate.month}-{currentDate.day}
        </Text>
      </View>

      <View style={styles.navigation}>
        <TouchableOpacity 
          onPress={goToPreviousMonth}
          style={[styles.navButton, { backgroundColor: isDarkMode ? '#333' : '#e3f2fd' }]}
        >
          <Text style={[styles.navButtonText, textStyle]}>← Previous</Text>
        </TouchableOpacity>
        
        <Text style={[styles.monthYear, textStyle]}>
          {selectedYear} - Month {selectedMonth}
        </Text>
        
        <TouchableOpacity 
          onPress={goToNextMonth}
          style={[styles.navButton, { backgroundColor: isDarkMode ? '#333' : '#e3f2fd' }]}
        >
          <Text style={[styles.navButtonText, textStyle]}>Next →</Text>
        </TouchableOpacity>
      </View>

      <ScrollView style={styles.scrollView}>
        <View style={styles.calendarGrid}>
          {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (
            <View key={day} style={styles.dayHeader}>
              <Text style={[styles.dayHeaderText, textStyle]}>{day}</Text>
            </View>
          ))}
        </View>

        {Array.from({ length: Math.ceil(monthsWithHolidays.length / 7) }, (_, weekIndex) => (
          <View key={weekIndex} style={styles.calendarGrid}>
            {monthsWithHolidays.slice(weekIndex * 7, weekIndex * 7 + 7).map((day, dayIndex) => (
              <View
                key={dayIndex}
                style={[
                  styles.dayCell,
                  {
                    backgroundColor: day.holiday?.length > 0 
                      ? (isDarkMode ? '#4a1a1a' : '#ffebee')
                      : 'transparent'
                  }
                ]}
              >
                <Text style={[
                  styles.dayNumber, 
                  textStyle,
                  { color: day.holiday?.length > 0 ? '#d32f2f' : textStyle.color }
                ]}>
                  {day.day}
                </Text>
                {day.holiday && day.holiday.length > 0 && (
                  <Text style={styles.holidayIndicator}>•</Text>
                )}
              </View>
            ))}
          </View>
        ))}

        <View style={styles.holidaysList}>
          <Text style={[styles.holidaysTitle, textStyle]}>
            Holidays this month:
          </Text>
          {monthsWithHolidays
            .filter(day => day.holiday && day.holiday.length > 0)
            .map((day, index) => (
              <View key={index} style={styles.holidayItem}>
                <Text style={[styles.holidayDate, textStyle]}>
                  Day {day.day}:
                </Text>
                <Text style={[styles.holidayName, textStyle]}>
                  {day.holiday?.join(', ')}
                </Text>
              </View>
            ))}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    padding: 20,
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  subtitle: {
    fontSize: 14,
    opacity: 0.7,
    marginTop: 4,
  },
  currentInfo: {
    padding: 16,
    alignItems: 'center',
  },
  currentDate: {
    fontSize: 16,
    fontWeight: '600',
  },
  currentBS: {
    fontSize: 14,
    marginTop: 4,
    opacity: 0.8,
  },
  navigation: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 10,
  },
  navButton: {
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 8,
  },
  navButtonText: {
    fontSize: 14,
    fontWeight: '500',
  },
  monthYear: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  scrollView: {
    flex: 1,
    paddingHorizontal: 16,
  },
  calendarGrid: {
    flexDirection: 'row',
    marginBottom: 4,
  },
  dayHeader: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 8,
  },
  dayHeaderText: {
    fontSize: 12,
    fontWeight: 'bold',
    opacity: 0.7,
  },
  dayCell: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 12,
    borderRadius: 4,
    margin: 1,
    minHeight: 48,
    justifyContent: 'center',
  },
  dayNumber: {
    fontSize: 14,
    fontWeight: '500',
  },
  holidayIndicator: {
    color: '#d32f2f',
    fontSize: 8,
    marginTop: 2,
  },
  holidaysList: {
    marginTop: 20,
    paddingBottom: 20,
  },
  holidaysTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  holidayItem: {
    paddingVertical: 8,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  holidayDate: {
    fontSize: 14,
    fontWeight: '600',
  },
  holidayName: {
    fontSize: 12,
    opacity: 0.8,
    marginTop: 2,
  },
});

export default App;
```

### 4. Run the app

```bash
# For iOS
npx react-native run-ios

# For Android  
npx react-native run-android
```

## Features Demonstrated

- ✅ Current date display in both Gregorian and Bikram Sambat
- ✅ Month navigation (previous/next)
- ✅ Calendar grid view with holiday indicators
- ✅ Holiday list display
- ✅ Dark mode support
- ✅ Cross-platform compatibility

## Testing on Different Platforms

### iOS Simulator
```bash
npx react-native run-ios --simulator="iPhone 15"
```

### Android Emulator
```bash
npx react-native run-android
```

### React Native Web
```bash
npm install react-native-web
npx expo start --web
```

## Common Issues

1. **Metro bundler issues**: Clear cache with `npx react-native start --reset-cache`
2. **iOS build issues**: Run `cd ios && pod install` 
3. **Android build issues**: Clean with `cd android && ./gradlew clean`

## Performance Tips

- The calendar renders efficiently even with large date ranges
- Holiday data is loaded lazily 
- Dark mode switches are handled automatically
- State updates are optimized for smooth navigation