🧩 minimal-native

A zero-dependency, lightweight, and elegant React Native component library — designed for simplicity, speed, and customizability.

⚡ Minimal-native is built from scratch without relying on any external UI libraries or dependencies. Perfect for teams who want full control over their UI with minimal bundle size.

🚀 Features

• 🪶 Zero dependencies — no third-party UI or utility libraries.
• 🎨 Customizable components — fully styleable using plain React Native StyleSheet.
• 📱 Pure React Native — works seamlessly across iOS, Android, and Web (via Expo).
• 🧠 Simple, intuitive API — focus on clarity and developer experience.
• 🧩 Composable design — small components that can be built up into complex UIs.

📦 Installation

npm install minimal-native

or

yarn add minimal-native

🧠 Usage Example

Here’s a simple example using the Tooltip component:

import React from "react";
import { View } from "react-native";
import { Tooltip } from "minimal-native";
import { ThemedText } from "@/components/themed-text";

export default function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Tooltip
        title="Info"
        content="This is a helpful tooltip!"
        position="top"
        width={200}
      >
        <ThemedText>Hover or tap me!</ThemedText>
      </Tooltip>
    </View>
  );
}

🧱 Available Components

| Component | Description | Status | | --------- | ------------------------ | -------------- | | Tooltip | Displays contextual info | ✅ Implemented |

🧩 Planned Components

| Component | Description | Status | | ------------- | ------------------------------------ | ---------- | | Button | Customizable button component | ⏳ Planned | | TextInput | Styled input field with states | ⏳ Planned | | Card | Container with shadow and padding | ⏳ Planned | | Badge | Small indicator for counts or status | ⏳ Planned | | Avatar | Circular profile image component | ⏳ Planned | | Switch | Toggle switch with custom styling | ⏳ Planned | | Checkbox | Checkbox with label | ⏳ Planned | | RadioButton | Grouped radio selection | ⏳ Planned | | Modal | Custom modal component | ⏳ Planned | | Snackbar | Temporary feedback message | ⏳ Planned | | ProgressBar | Progress indicator | ⏳ Planned | | Tabs | Tab navigation container | ⏳ Planned | | ListItem | Standard list entry with icon/text | ⏳ Planned | | Divider | Thin separator line | ⏳ Planned | | Chip | Compact tag-style component | ⏳ Planned | | Accordion | Expandable content view | ⏳ Planned |

💡 Design Philosophy

• Minimal & Fast – No dependency bloat or heavy animations.

• Developer Friendly – Straightforward API design and TypeScript support.

• Native First – Uses native View, Text, and Touchable primitives.

• Composable – Components can be mixed and matched easily.

🧰 API Reference (Tooltip)

| Prop | Type | Default | Description | | ------------ | ---------------------------------------- | ------- | --------------------------------------- | | title | string | "" | Optional tooltip title | | content | string | — | The text or message inside the tooltip | | position | "top" \| "bottom" \| "left" \| "right" | "top" | Tooltip placement relative to the child | | width | number | 150 | Tooltip box width | | titleStyle | StyleProp<TextStyle> | — | Custom style for title text | | textStyle | StyleProp<TextStyle> | — | Custom style for content text |

🧑‍💻 Contributing

Contributions are welcome! If you'd like to add a new component or improve an existing one:

1. Fork the repository

2. Create a feature branch (feature/button-component)

3. Submit a pull request

📄 License

ISC License

© 2025 Dinindu Peiris

🌟 Future Vision

The goal of minimal-native is to evolve into a complete, zero-dependency alternative to libraries like react-native-paper and react-native-elements, with a focus on simplicity, performance, and developer experience.

“Simplicity is the ultimate sophistication.” – Leonardo da Vinci