react-native-platform-components 0.0.2

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 Andrew Tosh
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/PlatformComponents.podspec

@@ -0,0 +1,20 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "PlatformComponents"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => "https://github.com/BearPeak-Technology-Group/react-native-platform-components.git", :tag => "#{s.version}" }
+
+  s.source_files = ["ios/**/*.{h,m,mm,swift,cpp}", "shared/**/*.{h,m,mm,swift,cpp}"]
+  s.private_header_files = ["ios/**/*.h", "shared/**/*.h"]
+
+  install_modules_dependencies(s)
+end

package/README.md

@@ -0,0 +1,233 @@
+# react-native-platform-components
+
+High-quality **native UI components for React Native**, implemented with platform-first APIs and exposed through clean, typed JavaScript interfaces.
+
+This library focuses on **true native behavior**, not JavaScript re-implementations — starting with:
+
+- **SelectionMenu** – native selection menus (Material on Android, system menus on iOS, web fallback)
+- **DatePicker** – native date & time pickers with modal and inline presentations
+
+The goal is to provide components that:
+
+- Feel **100% native** on each platform
+- Support modern platform design systems (Material 2 / Material 3 on Android, system pickers on iOS)
+- Offer **headless** and **inline** modes for maximum layout control
+- Integrate cleanly with **React Native Codegen / Fabric**
+- Degrade gracefully on **Web**
+
+---
+
+## 🎥 Demos
+
+### SelectionMenu
+Native Material / system selection menus with headless and inline modes.
+
+📹 **Demo video:**  
+👉 *(add SelectionMenu demo link here)*
+
+---
+
+### DatePicker
+Native date & time pickers using platform system UI.
+
+📹 **Demo video:**  
+👉 *(add DatePicker demo link here)*
+
+---
+
+## 📦 Installation
+
+```sh
+npm install react-native-platform-components
+# or
+yarn add react-native-platform-components
+```
+
+### iOS
+
+```sh
+cd ios
+pod install
+```
+
+- Minimum iOS version: **iOS 13+**
+- Uses `UIDatePicker` and system selection menus
+
+### Android
+
+- Uses native Android Views
+- Supports **Material 2** and **Material 3**
+- No additional setup required beyond autolinking
+
+### Web
+
+- **SelectionMenu** is supported with a web-appropriate fallback
+- **DatePicker** currently targets native platforms only
+
+---
+
+## 🚀 Quick Start
+
+### SelectionMenu (Headless)
+
+```tsx
+import { SelectionMenu } from 'react-native-platform-components';
+
+const options = [
+  { label: 'Apple', data: 'apple' },
+  { label: 'Banana', data: 'banana' },
+  { label: 'Orange', data: 'orange' },
+];
+
+export function Example() {
+  const [visible, setVisible] = React.useState(false);
+  const [value, setValue] = React.useState<string | null>(null);
+
+  return (
+    <>
+      <Button title="Open menu" onPress={() => setVisible(true)} />
+
+      <SelectionMenu
+        options={options}
+        selected={value}
+        visible={visible}
+        onSelect={(data) => {
+          setValue(data);
+          setVisible(false);
+        }}
+        onRequestClose={() => setVisible(false)}
+      />
+    </>
+  );
+}
+```
+
+---
+
+### DatePicker (Modal)
+
+```tsx
+import { DatePicker } from 'react-native-platform-components';
+
+export function Example() {
+  const [date, setDate] = React.useState<Date | null>(null);
+  const [visible, setVisible] = React.useState(false);
+
+  return (
+    <>
+      <Button title="Pick date" onPress={() => setVisible(true)} />
+
+      <DatePicker
+        date={date}
+        visible={visible}
+        presentation="modal"
+        onConfirm={(d) => {
+          setDate(d);
+          setVisible(false);
+        }}
+        onClosed={() => setVisible(false)}
+      />
+    </>
+  );
+}
+```
+
+---
+
+## 🧩 Components
+
+## SelectionMenu
+
+Native selection menu with **inline** and **headless** modes.
+
+### Props
+
+```ts
+type SelectionMenuProps = {
+  style?: StyleProp<ViewStyle>;
+
+  options: readonly {
+    label: string;
+    data: string;
+  }[];
+
+  selected: string | null;
+
+  disabled?: boolean;
+  placeholder?: string;
+
+  inlineMode?: boolean;
+  visible?: boolean;
+
+  presentation?: 'auto' | 'popover' | 'sheet';
+
+  onSelect?: (data: string, label: string, index: number) => void;
+  onRequestClose?: () => void;
+
+  ios?: {};
+
+  android?: {
+    material?: 'auto' | 'm2' | 'm3';
+  };
+};
+```
+
+---
+
+## DatePicker
+
+Native date & time picker using **platform system pickers**.
+
+### Props
+
+```ts
+type DatePickerProps = {
+  style?: StyleProp<ViewStyle>;
+
+  date: Date | null;
+
+  minDate?: Date | null;
+  maxDate?: Date | null;
+
+  locale?: string;
+  timeZoneName?: string;
+
+  mode?: 'date' | 'time' | 'dateAndTime' | 'countDownTimer';
+  presentation?: 'modal' | 'inline';
+
+  visible?: boolean;
+
+  onConfirm?: (dateTime: Date) => void;
+  onClosed?: () => void;
+
+  ios?: {
+    preferredStyle?: 'automatic' | 'wheels' | 'inline' | 'compact';
+    countDownDurationSeconds?: number;
+    minuteInterval?: number;
+    roundsToMinuteInterval?: boolean;
+  };
+
+  android?: {
+    firstDayOfWeek?: number;
+    material?: 'auto' | 'm2' | 'm3';
+    dialogTitle?: string;
+    positiveButtonTitle?: string;
+    negativeButtonTitle?: string;
+  };
+};
+```
+
+---
+
+## 🧠 Design Philosophy
+
+- **Native first** — no JS re-implementation of pickers
+- **Headless-friendly** — works with any custom UI
+- **Codegen-safe** — string unions & sentinel values
+- **Predictable behavior** — no surprise re-renders or layout hacks
+
+---
+
+## 📄 License
+
+MIT

package/android/build.gradle

@@ -0,0 +1,78 @@
+buildscript {
+  ext.getExtOrDefault = {name ->
+    return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties['PlatformComponents_' + name]
+  }
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.7.2"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+  }
+}
+
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+
+apply plugin: "com.facebook.react"
+
+def getExtOrIntegerDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["PlatformComponents_" + name]).toInteger()
+}
+
+android {
+  namespace "com.platformcomponents"
+
+  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+  }
+
+  buildFeatures {
+    buildConfig true
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lintOptions {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+
+  sourceSets {
+    main {
+      java.srcDirs += [
+        "generated/java",
+        "generated/jni"
+      ]
+    }
+  }
+}
+
+repositories {
+  mavenCentral()
+  google()
+}
+
+def kotlin_version = getExtOrDefault("kotlinVersion")
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+  implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+  implementation "com.google.android.material:material:1.12.0"
+}

package/android/gradle.properties

@@ -0,0 +1,5 @@
+PlatformComponents_kotlinVersion=2.0.21
+PlatformComponents_minSdkVersion=24
+PlatformComponents_targetSdkVersion=34
+PlatformComponents_compileSdkVersion=35
+PlatformComponents_ndkVersion=27.1.12297006

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

package/android/src/main/java/com/platformcomponents/DateConstraints.kt

@@ -0,0 +1,83 @@
+package com.platformcomponents.datepicker
+
+import com.google.android.material.datepicker.CalendarConstraints
+import com.google.android.material.datepicker.DateValidatorPointBackward
+import com.google.android.material.datepicker.DateValidatorPointForward
+import java.util.TimeZone
+
+object DateConstraints {
+  fun build(minMs: Double, maxMs: Double, firstDayOfWeek: Int?): CalendarConstraints? {
+    val hasMin = minMs >= 0
+    val hasMax = maxMs >= 0
+    if (!hasMin && !hasMax && firstDayOfWeek == null) return null
+
+    val builder = CalendarConstraints.Builder()
+
+    // First day of week: MaterialDatePicker uses java.util.Calendar constants. We map ISO 1..7.
+    firstDayOfWeek?.let {
+      val calDay = isoToCalendarDay(it)
+      if (calDay != null) builder.setFirstDayOfWeek(calDay)
+    }
+
+    val validators = ArrayList<CalendarConstraints.DateValidator>(2)
+    if (hasMin) validators.add(DateValidatorPointForward.from(minMs.toLong()))
+    if (hasMax) validators.add(DateValidatorPointBackward.before(maxMs.toLong()))
+
+    if (validators.isNotEmpty()) {
+      builder.setValidator(CompositeValidator(validators))
+    }
+
+    return builder.build()
+  }
+
+  private fun isoToCalendarDay(iso: Int): Int? {
+    // ISO: 1=Mon ... 7=Sun
+    return when (iso) {
+      1 -> java.util.Calendar.MONDAY
+      2 -> java.util.Calendar.TUESDAY
+      3 -> java.util.Calendar.WEDNESDAY
+      4 -> java.util.Calendar.THURSDAY
+      5 -> java.util.Calendar.FRIDAY
+      6 -> java.util.Calendar.SATURDAY
+      7 -> java.util.Calendar.SUNDAY
+      else -> null
+    }
+  }
+
+  private class CompositeValidator(
+    private val validators: List<CalendarConstraints.DateValidator>
+  ) : CalendarConstraints.DateValidator {
+
+    override fun isValid(date: Long): Boolean {
+      for (v in validators) if (!v.isValid(date)) return false
+      return true
+    }
+
+    override fun describeContents(): Int = 0
+
+    override fun writeToParcel(dest: android.os.Parcel, flags: Int) {
+      dest.writeInt(validators.size)
+      validators.forEach { dest.writeParcelable(it, flags) }
+    }
+
+    companion object {
+      @JvmField
+      val CREATOR: android.os.Parcelable.Creator<CompositeValidator> =
+        object : android.os.Parcelable.Creator<CompositeValidator> {
+          override fun createFromParcel(source: android.os.Parcel): CompositeValidator {
+            val n = source.readInt()
+            val list = ArrayList<CalendarConstraints.DateValidator>(n)
+            repeat(n) {
+              val v = source.readParcelable<CalendarConstraints.DateValidator>(
+                CalendarConstraints.DateValidator::class.java.classLoader
+              )
+              if (v != null) list.add(v)
+            }
+            return CompositeValidator(list)
+          }
+
+          override fun newArray(size: Int): Array<CompositeValidator?> = arrayOfNulls(size)
+        }
+    }
+  }
+}

package/android/src/main/java/com/platformcomponents/Helper.kt

@@ -0,0 +1,27 @@
+package com.platformcomponents
+
+import android.app.Activity
+import android.content.Context
+import android.content.ContextWrapper
+import androidx.fragment.app.FragmentActivity
+import com.facebook.react.uimanager.ThemedReactContext
+
+public fun Context.findActivity(): Activity? {
+  var c: Context? = this
+  while (c is ContextWrapper) {
+    if (c is Activity) return c
+    c = c.baseContext
+  }
+  return null
+}
+
+public fun Context.findFragmentActivity(): FragmentActivity? {
+  // RN best-case
+  val trc = this as? ThemedReactContext
+  val a1 = trc?.currentActivity
+  if (a1 is FragmentActivity) return a1
+
+  // fallback unwrap
+  val a2 = this.findActivity()
+  return a2 as? FragmentActivity
+}