Hijri Calendar Date Picker for React Native

Introduction

React Native Hijri Date Picker – an open-source, cross-platform library that solves the lack of a simple and customizable Hijri calendar picker for mobile apps. It allows developers to select Hijri dates easily on both iOS and Android, with support for English and Arabic languages, numeric or string month representation, and flexible styling. Written in Typescript.

Features

• Supports both iOS and Android.
• Supports both TypeScript and JavaScript.
• Supports both numeric and string month representation.
• Supports both English and Arabic languages.
• Supports custom styles.

Prerequisites

• React Native >= 0.60.0
• TypeScript >= 4.0.0

Installation

npm install react-native-hijri-date-picker

Usage

import * as React from 'react';

import { StyleSheet, Text, View } from 'react-native';
import {
  HijriRNDatePicker,
  type TDate,
} from 'react-native-hijri-date-picker';

export default function App() {
  const [date, setDate] = React.useState<TDate>({
    year: '',
    month: '',
    day: '',
  });

  const updateDate = (params: TDate) => {
    setDate((prevDate) => ({
      ...prevDate,
      ...params,
    }));
  };

  return (
    <View style={styles.container}>
      <HijriRNDatePicker
        updateDate={updateDate}
        numericMonth={false}
        labelLang="en"
        valueLang="ar"
        viewStyle={{ width: 300 }}
      />
      <Text style={styles.label}>{JSON.stringify(date)}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
    height: 500,
    backgroundColor: '#f0f0f0',
  },
  label: {
    fontSize: 20,
    marginTop: 20,
  },
});

Screen Recording

iOS + Android

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---