Install the core package using npm or yarn to use Material UI components in your React Native project.

npm install @react-native-material/core

Or using yarn

yarn add @react-native-material/core

To get started immediately, import the Button component from @react-native-material/core. This example demonstrates a basic button that triggers an alert.

import React from "react";
import { Button } from "@react-native-material/core";

export default function App() {
  return <Button title="Button" onPress={() => alert("hi!")} />;
}

You can show a loading state using the loading prop. You can control where the indicator appears using loadingIndicatorPosition:

• leading: Replaces the leading element.
• trailing: Replaces the trailing element.
• overlay: Adds the indicator as an absolute overlay over the entire button (hiding the title/icons).

Custom indicators can be passed via loadingIndicator as a string, a React node, or a function receiving { color: string }.

<Button 
  loading={true} 
  loadingIndicatorPosition="overlay" 
  loadingIndicator={<ActivityIndicator color="white" />} 
  title="Loading..."
/>

Wrap your application (or a specific component tree) with the ThemeProvider to provide theme data to all child components.

By default, ThemeProvider detects the device's color scheme using React Native's useColorScheme hook and automatically switches between darkTheme and defaultTheme. You can also provide a custom theme object to override this behavior.

import { ThemeProvider } from '@react-native-material/core';

function App() {
  return (
    <ThemeProvider>
      <YourAppComponents />
    </ThemeProvider>
  );
}

To use custom icon components with the library's <Icon /> component, you must wrap your application (or a specific subtree) with the IconComponentProvider. This provider allows the library's internal <Icon /> component to resolve which icon library (like Material Icons, FontAwesome, etc.) to use.

1. Create or identify your icon component that accepts name, size, and color props.
2. Wrap your app with IconComponentProvider and pass your component to the IconComponent prop.
3. Use the <Icon /> component anywhere inside that provider.

import { IconComponentProvider, Icon } from '@react-native-material/core';
// Example: Using a hypothetical MyIconLibrary
import { MyIconLibrary } from 'my-icon-library';

const App = () => (
  <IconComponentProvider IconComponent={MyIconLibrary}>
    <Icon name="home" size={24} color="primary" />
  </IconComponentProvider>
);

If you encounter the error: 'IconComponent' is undefined. Seems like you forgot to wrap your component with 'Provider'.'

This occurs because the <Icon /> component was used outside of an <IconComponentProvider />. Ensure that your component tree is wrapped with the provider and that you have passed a valid component to the IconComponent prop.

The TextInput component is a Material Design-inspired text input for React Native. It supports multiple visual variants, labels, helper text, and icons (leading/trailing elements). It extends the standard react-native TextInputProps.

import TextInput from './TextInput';

// Basic usage
<TextInput 
  label="Username" 
  placeholder="Enter your username" 
/>

// Usage with variant and icons
<TextInput
  variant="outlined"
  label="Email"
  leading={({ color, size }) => (
    <Icon color={color} size={size} name="email" />
  )}
  trailing={<ClearIcon />}
  helperText="We'll never share your email."
/>

The <Icon /> component renders an icon based on the icon library provided via IconComponentProvider. It automatically handles color resolution using the theme's palette.

Props:

• name (string): The identifier for the icon (e.g., 'home', 'settings').
• size (number, optional): The size of the icon.
• color (Color, optional): A theme color key (e.g., 'primary', 'on-background'). Defaults to 'on-background'.
• ...rest: Any other props passed to the underlying icon component.

import { Icon } from '@react-native-material/core';

// Usage inside an IconComponentProvider
<Icon name="favorite" color="error" size={32} />

The library re-exports utilities from react-native-window-size to help manage responsive layouts. You can use the WindowSizeProvider to wrap your application and access window dimensions and breakpoints via hooks like useWindowSize and useActiveBreakpoint.

import {
  WindowSizeProvider,
  useWindowSize,
  useActiveBreakpoint,
  Breakpoint
} from '@react-native-material/core';

// Wrap your app
<WindowSizeProvider>
  <MyComponent />
</WindowSizeProvider>

// Inside a component
const MyComponent = () => {
  const { width, height } = useWindowSize();
  const activeBreakpoint = useActiveBreakpoint();

  return <Text>Width: {width}, Breakpoint: {activeBreakpoint}</Text>;
};