Manthan React Native Component Library

A comprehensive React Native component library featuring Level 1 (Atomic) and Level 2 (Molecular) components built with Expo, NativeWind (TailwindCSS), and GluestackUI.

Features

• 🎨 Design System Based: Components built from Figma design specifications
• ⚛️ Atomic Design: Organized into Level 1 (Atomic) and Level 2 (Molecular) components
• 🎯 Fully Typed: Complete TypeScript support with detailed prop types
• 🎭 Highly Customizable: Every component accepts props to customize colors, sizes, fonts, and more
• 🎨 Theme Support: Built-in theme system with easy customization
• 📱 Cross-Platform: Works on iOS, Android, and Web
• 🚀 Expo Compatible: Built with Expo SDK 54+
• 💨 NativeWind Styling: Utilizes Tailwind CSS for React Native

Installation

npm install @manthan/react-native-components
# or
yarn add @manthan/react-native-components

Peer Dependencies

This library requires the following peer dependencies:

npm install react react-native expo nativewind react-native-svg react-native-reanimated

Quick Start

1. Wrap your app with ThemeProvider

import { ThemeProvider } from '@manthan/react-native-components';

export default function App() {
  return (
    <ThemeProvider>
      {/* Your app content */}
    </ThemeProvider>
  );
}

2. Use components

import { Button, InputField, Checkbox } from '@manthan/react-native-components';

function MyScreen() {
  const [checked, setChecked] = useState(false);
  const [email, setEmail] = useState('');

  return (
    <View>
      <InputField
        label="Email"
        value={email}
        onChangeText={setEmail}
        placeholder="Enter your email"
      />

      <Checkbox
        checked={checked}
        onChange={setChecked}
      />

      <Button onPress={() => console.log('Submitted')}>
        Submit
      </Button>
    </View>
  );
}

Components

Level 1 - Atomic Components

Button

Primary and secondary button variants with loading and disabled states.

<Button variant="primary" onPress={handlePress}>
  Click Me
</Button>

<Button
  variant="secondary"
  backgroundColor="#FF5733"
  textColor="#FFFFFF"
  loading
>
  Processing...
</Button>

Props:

• variant: 'primary' | 'secondary'
• size: 'sm' | 'md' | 'lg' | number
• loading: boolean
• disabled: boolean
• backgroundColor, textColor, borderColor: string
• fontSize, fontWeight, fontFamily: customization options
• And many more...

Checkbox

Customizable checkbox with checked/unchecked states.

<Checkbox
  checked={isChecked}
  onChange={setIsChecked}
  size={24}
  checkedColor="#1DB390"
/>

Toggle

Smooth animated toggle/switch component.

<Toggle
  value={isEnabled}
  onChange={setIsEnabled}
  activeColor="#1DB390"
  inactiveColor="#E9E9EA"
/>

RadioButton

Radio button with label for option selection.

<RadioButton
  selected={selectedValue === 'option1'}
  onChange={setSelectedValue}
  value="option1"
  label="Option 1"
/>

Level 2 - Molecular Components

InputField

Comprehensive input field with label, tooltip, validation, and error states.

<InputField
  label="Email Address"
  value={email}
  onChangeText={setEmail}
  placeholder="Enter your email"
  error="Please enter a valid email"
  showTooltip
  onTooltipPress={() => showHelp()}
/>

AmountField

Specialized field for currency amounts with Indian number formatting.

<AmountField
  label="Amount"
  value={amount}
  onChangeText={setAmount}
  placeholder="Enter Amount"
  currencySymbol="₹"
  enableFormatting={true}
  maxValue={10000000}
/>

DateField

Date input field with calendar icon.

<DateField
  label="Birth Date"
  value={birthDate}
  onChangeDate={setBirthDate}
  placeholder="DD/MM/YYYY"
  minDate={new Date('1900-01-01')}
  maxDate={new Date()}
/>

DropdownField

Dropdown selection field with options.

<DropdownField
  label="Country"
  value={country}
  onValueChange={setCountry}
  options={[
    { label: 'India', value: 'IN' },
    { label: 'USA', value: 'US' },
  ]}
  placeholder="Select an option"
/>

YearsField

Numeric input field with "years" suffix.

<YearsField
  label="Retirement Age"
  value={age}
  onChangeText={setAge}
  placeholder="Enter retirement age"
  maxValue={100}
  minValue={18}
/>

Theming

Custom Theme

You can customize the default theme by passing a custom theme object to the ThemeProvider:

import { ThemeProvider } from '@manthan/react-native-components';

const customTheme = {
  colors: {
    primary: '#FF5733',
    primaryPressed: '#C70039',
    text: {
      primary: '#2C3E50',
      secondary: '#7F8C8D',
    },
  },
  typography: {
    fontFamily: {
      default: 'CustomFont',
    },
  },
};

<ThemeProvider theme={customTheme}>
  <App />
</ThemeProvider>

Component-Level Customization

Every component accepts props to override default styling:

<Button
  backgroundColor="#9B59B6"
  textColor="#ECF0F1"
  borderRadius={24}
  fontSize={18}
  fontWeight="600"
  paddingHorizontal={32}
>
  Custom Styled Button
</Button>

Development

Running the Demo App

# Install dependencies
npm install

# Start Expo dev server
npm start

# Run on specific platform
npm run ios
npm run android
npm run web

The demo app includes an interactive showcase of all components in the "Components" tab.

Building for Production

npm run build

TypeScript

This library is written in TypeScript and provides complete type definitions for all components and their props.

import type { ButtonProps, InputFieldProps } from '@manthan/react-native-components';

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues, questions, or suggestions, please open an issue on GitHub.