RN Neo

https://rn-neo.gs-rumana.com
Admin
RN Neo is an open-source React Native component library designed with a unique neubrutalist style,...
Tokens:12,689
Snippets:110
Trust Score:5.3
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install dependencies

Source: https://rn-neo.gs-rumana.com/docs/installation

Run these commands in the project root to install the library and required peer dependencies.

```bash
npm install rn-neo react-native-reanimated react-native-worklets
```

```bash
yarn add rn-neo react-native-reanimated react-native-worklets
```

```bash
pnpm add rn-neo react-native-reanimated react-native-worklets
```

```bash
expo install rn-neo react-native-reanimated react-native-worklets
```

--------------------------------

### Install rn-neo Dependencies

Source: https://rn-neo.gs-rumana.com/

Command to install the required packages for the library.

```bash
$ npm install rn-neo react-native-reanimated
```

--------------------------------

### Initialize NeoProvider and App Configuration

Source: https://rn-neo.gs-rumana.com/

Setup the application with NeoProvider, custom fonts, and theme switching based on the device color scheme.

```javascript
import { useColorScheme, ScrollView, StyleSheet, View } from 'react-native';
import {
  NeoProvider,
  DefaultLightTheme,
  DefaultDarkTheme,
  Card,
  Text,
  Badge,
  Pressable,
  Input,
  Checkbox,
  Radio,
  Switch,
  useNeo,
} from 'rn-neo';
import { useState } from 'react';
import {
  useFonts,
  SpaceGrotesk_400Regular,
  SpaceGrotesk_500Medium,
  SpaceGrotesk_700Bold,
} from '@expo-google-fonts/space-grotesk';

export default function App() {
  const [loaded] = useFonts({
    SpaceGrotesk_400Regular,
    SpaceGrotesk_500Medium,
    SpaceGrotesk_700Bold
  })
  const scheme = useColorScheme();
  const theme = scheme === 'dark' ? DefaultDarkTheme : DefaultLightTheme;

  if (!loaded) {
    return null;
  }

  return (
    <NeoProvider
      theme={theme}
      config={{
        fonts: {
          bold: 'SpaceGrotesk_700Bold',
          medium: 'SpaceGrotesk_500Medium',
          normal: 'SpaceGrotesk_400Regular',
        },
      }}
    >
      <Showcase />
    </NeoProvider>
  );
}
```

--------------------------------

### Implementing Pressable with various configurations

Source: https://rn-neo.gs-rumana.com/docs/components/pressable

Examples showing basic usage, border and shadow application, loading states, and custom styling for the Pressable component.

```tsx
import { Pressable, Text } from 'rn-neo';

<Pressable onPress={() => console.log('pressed')}>
  <Text>Click me</Text>
</Pressable>

// With border and shadow
<Pressable border shadow shadowColor="shadow" onPress={handleSubmit}>
  <Text>Submit</Text>
</Pressable>

// Loading state
<Pressable loading={isSubmitting} onPress={handleSubmit}>
  <Text>Submit</Text>
</Pressable>

// Custom appearance
<Pressable
  backgroundColor="secondary"
  border
  shadow
  radius="md"
  padding="lg"
  onPress={handlePress}
>
  <Text>Secondary action</Text>
</Pressable>
```

--------------------------------

### Use RN Neo components

Source: https://rn-neo.gs-rumana.com/docs/usage

Example of implementing Pressable and Text components within the application.

```tsx
<Pressable backgroundColor="primary">
  <Text>Sign Up</Text>
</Pressable>
```

--------------------------------

### Basic and Styled Input Usage

Source: https://rn-neo.gs-rumana.com/docs/components/input

Examples of implementing the Input component with default settings, borders, shadows, and custom styling tokens.

```tsx
import { Input } from 'rn-neo';

<Input placeholder="Enter your name" />

// With border and shadow
<Input placeholder="Email" border shadow backgroundColor="surface" padding="lg" />

// Custom focus shadow color
<Input placeholder="Search" border shadow shadowColor="primary" radius="md" />
```

--------------------------------

### Implement Radio and Switch Components

Source: https://rn-neo.gs-rumana.com/

Examples of Radio and Switch components with various sizes, custom colors, and states.

```jsx
      {/* ── Radio ── */}
      <Section title="Radio">
        <View style={styles.row}>
          {['a', 'b', 'c'].map((v) => (
            <View key={v} style={styles.radioItem}>
              <Radio
                selected={radioValue === v}
                onChange={() => setRadioValue(v)}
                border
                shadow
                radius="full"
              />
              <Text>{v.toUpperCase()}</Text>
            </View>
          ))}
        </View>

        <View style={styles.row}>
          <Radio
            selected={true}
            onChange={() => {}}
            size="sm"
            border
            shadow
            radius="full"
          />
          <Radio
            selected={true}
            onChange={() => {}}
            size="md"
            border
            shadow
            radius="full"
          />
          <Radio
            selected={true}
            onChange={() => {}}
            size="lg"
            border
            shadow
            radius="full"
          />
        </View>

        <View style={styles.row}>
          <Radio
            selected={true}
            onChange={() => {}}
            border
            shadow
            radius="full"
            backgroundColor={{ true: 'secondary', false: 'surface' }}
            innerColor={{ true: 'onSecondary', false: 'onSurface' }}
          />
          <Text>Custom colors</Text>
        </View>
      </Section>

      {/* ── Switch ── */}
      <Section title="Switch">
        <View style={styles.row}>
          <Switch
            value={switchValue}
            onChange={setSwitchValue}
            border
            shadow
            radius="full"
          />
          <Text>{switchValue ? 'On' : 'Off'}</Text>
        </View>

        <View style={styles.row}>
          <Switch
            value={true}
            onChange={() => {}}
            size="sm"
            border
            shadow
            radius="full"
          />
          <Switch
            value={true}
            onChange={() => {}}
            size="md"
            border
            shadow
            radius="full"
          />
          <Switch
            value={true}
            onChange={() => {}}
            size="lg"
            border
            shadow
            radius="full"
          />
        </View>

        <View style={styles.row}>
          <Switch
            value={true}
            onChange={() => {}}
            border
            shadow
            radius="full"
            backgroundColor={{ true: 'success', false: 'muted' }}
            thumbColor={{ true: 'onSuccess', false: 'onPrimary' }}
          />
          <Text>Custom colors</Text>
        </View>

        <View style={styles.row}>
          <Switch
            value={false}
            onChange={() => {}}
            border
            shadow
            radius="full"
            disabled
          />
          <Text color="muted">Disabled</Text>
        </View>
      </Section>
    </ScrollView>
  );
}

function Section({
  title,
  children,
}) {
  return (
    <View style={styles.section}>
      <Text fontSize="xl" fontWeight="bold" style={styles.sectionTitle}>
        {title}
      </Text>
      <View style={styles.sectionContent}>{children}</View>
    </View>
  );
}

const styles = StyleSheet.create({
  scroll: {
    flex: 1,
  },
  container: {
    padding: 16,
    gap: 24,
    paddingTop: 60,
    paddingBottom: 40,
  },
  section: {
    gap: 12,
  },
  sectionTitle: {
    marginBottom: 4,
  },
  sectionContent: {
    gap: 12,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
    flexWrap: 'wrap',
  },
  radioItem: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
  },
});
```

--------------------------------

### Implement Checkbox usage

Source: https://rn-neo.gs-rumana.com/docs/components/checkbox

Basic implementation examples including standard usage, custom styling with colors and sizes, and the disabled state.

```tsx
import { Checkbox } from 'rn-neo';
import { useState } from 'react';

const [checked, setChecked] = useState(false);

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

// With size and custom colors
<Checkbox
  checked={checked}
  onChange={setChecked}
  size="lg"
  backgroundColor={{ true: 'secondary', false: 'surface' }}
  checkColor={{ true: 'onSecondary', false: 'transparent' }}
/>

// Disabled
<Checkbox checked={checked} onChange={setChecked} disabled />
```

--------------------------------

### Implement Badge component

Source: https://rn-neo.gs-rumana.com/docs/components/badge

Basic usage examples for the Badge component, including text, numeric, and custom content variants.

```tsx
import { Badge } from 'rn-neo';

// Plain text — no need to wrap in a Text component
<Badge>New</Badge>

// With a number
<Badge>4</Badge>

// Custom size and color
<Badge size="sm" backgroundColor="success">Active</Badge>

// Custom children
<Badge>
  <Icon name="star" size={12} />
</Badge>
```

--------------------------------

### Initialize RN Neo Application

Source: https://rn-neo.gs-rumana.com/

Setup the NeoProvider with a theme and custom font configuration to initialize the component library in a React Native application.

```javascript
import { useColorScheme, ScrollView, StyleSheet, View } from 'react-native'; import { NeoProvider, DefaultLightTheme, DefaultDarkTheme, Card, Text, Badge, Pressable, Input, Checkbox, Radio, Switch, useNeo, } from 'rn-neo'; import { useState } from 'react'; import { useFonts, SpaceGrotesk_400Regular, SpaceGrotesk_500Medium, SpaceGrotesk_700Bold, } from '@expo-google-fonts/space-grotesk'; export default function App() { const [loaded] = useFonts({ SpaceGrotesk_400Regular, SpaceGrotesk_500Medium, SpaceGrotesk_700Bold }) const scheme = useColorScheme(); const theme = scheme === 'dark' ? DefaultDarkTheme : DefaultLightTheme; if (!loaded) { return null; } return ( <NeoProvider theme={theme} config={{ fonts: { bold: 'SpaceGrotesk_700Bold', medium: 'SpaceGrotesk_500Medium', normal: 'SpaceGrotesk_400Regular', }, }} > <Showcase /> </NeoProvider> ); } function Showcase() { const [checkboxValue, setCheckboxValue] = useState(false); const [radioValue, setRadioValue] = useState('a'); const [switchValue, setSwitchValue] = useState(false); const [inputValue, setInputValue] = useState(''); const {theme} = useNeo(); return ( <ScrollView style={[styles.scroll, {backgroundColor: theme.colors.background}]} contentContainerStyle={styles.container}> {/* ── Card ── */} <Section title="Card"> <Card> <Text fontWeight="bold" fontSize="lg"> Default Card </Text> <Text color="muted" fontSize="sm"> border, shadow and surface background out of the box </Text> </Card> <Card backgroundColor="primary" radius="md" shadowSize="lg"> <Text color="onPrimary" fontWeight="bold"> Custom Card </Text> <Text color="onPrimary" fontSize="sm"> Primary background with large shadow </Text> </Card> </Section> {/* ── Text ── */} <Section title="Text"> <Text fontSize="3xl" fontWeight="bold"> 3xl bold </Text> <Text fontSize="2xl" fontWeight="bold"> 2xl bold </Text> <Text fontSize="xl" fontWeight="medium"> xl medium </Text> <Text fontSize="lg">lg normal</Text> <Text fontSize="md" color="muted"> md muted </Text> <Text fontSize="sm" color="muted"> sm muted </Text> <Text fontSize="md" color="primary" fontWeight="bold"> primary color </Text> <Text fontSize="md" color="secondary" fontWeight="bold"> secondary color </Text> </Section> {/* ── Badge ── */} <Section title="Badge"> <View style={styles.row}> <Badge>Default</Badge> <Badge size="sm" backgroundColor="success"> Success </Badge> <Badge size="sm" backgroundColor="error"> Error </Badge> <Badge size="sm" backgroundColor="warning"> Warning </Badge> </View> <View style={styles.row}> <Badge size="lg" backgroundColor="secondary"> Large </Badge> <Badge size="md" backgroundColor="primary" radius="none"> No Radius </Badge> <Badge size="md" backgroundColor="surface" border shadow> Outlined </Badge> </View> </Section> {/* ── Pressable ── */} <Section title="Pressable"> <Pressable border shadow onPress={() => {}}> <Text color="onPrimary" fontWeight="bold" align="center"> Primary Button </Text> </Pressable> <Pressable backgroundColor="secondary" border shadow radius="md" onPress={() => {}} > <Text color="onSecondary" fontWeight="bold" align="center"> Secondary Button </Text> </Pressable> <Pressable backgroundColor="surface" border shadow onPress={() => {}} loading > <Text fontWeight="bold" align="center"> Loading State </Text> </Pressable> <Pressable backgroundColor="surface" border shadow onPress={() => {}} disabled > <Text fontWeight="bold" align="center" color="muted"> Disabled State </Text> </Pressable> </Section> {/* ── Input ── */} <Section title="Input"> <Input placeholder="Default input" value={inputValue} onChangeText={setInputValue} border shadow backgroundColor="surface" /> <Input placeholder="With radius" border shadow radius="md" backgroundColor="surface" /> <Input placeholder="Large shadow on focus" border shadow shadowSize="lg" backgroundColor="surface" /> </Section> {/* ── Checkbox ── */} <Section title="Checkbox"> <View style={styles.row}> <Checkbox checked={checkboxValue} onChange={setCheckboxValue} border shadow /> <Text>{checkboxValue ? 'Checked' : 'Unchecked'}</Text> </View> <View style={styles.row}> <Checkbox checked={true} onChange={() => {}} size="sm" border shadow /> <Checkbox checked={true} onChange={() => {}} size="md" border shadow /> <Checkbox checked={true} onChange={() => {}} size="lg" border shadow /> </View> <View style={styles.row}> <Checkbox checked={false} onChange={() => {}} border shadow disabled /> <Text color="muted">Disabled</Text> </View> <View style={styles.row}> <Checkbox checked={true} onChange={() => {}} border shadow backgroundColor={{ true: 'secondary', false: 'surface' }} checkColor={{ true:
```

--------------------------------

### Implement Radio component usage

Source: https://rn-neo.gs-rumana.com/docs/components/radio

Basic implementation of the Radio component with examples for custom styling and disabled states.

```tsx
import { Radio } from 'rn-neo';
import { useState } from 'react';

const [selected, setSelected] = useState(false);

<Radio selected={selected} onChange={setSelected} />

// With size and custom colors
<Radio
  selected={selected}
  onChange={setSelected}
  size="lg"
  backgroundColor={{ true: 'secondary', false: 'surface' }}
  innerColor={{ true: 'onSecondary', false: 'transparent' }}
/>

// Disabled
<Radio selected={selected} onChange={setSelected} disabled />
```

--------------------------------

### Implement Showcase Components

Source: https://rn-neo.gs-rumana.com/

Demonstrates usage of Card, Radio, and Switch components within a scrollable view, including state management and custom styling.

```javascript
function Showcase() {
  const [checkboxValue, setCheckboxValue] = useState(false);
  const [radioValue, setRadioValue] = useState('a');
  const [switchValue, setSwitchValue] = useState(false);
  const [inputValue, setInputValue] = useState('');

  const {theme} = useNeo();

  return (
    <ScrollView style={[styles.scroll, {backgroundColor: theme.colors.background}]} contentContainerStyle={styles.container}>
      {/* ── Card ── */}
      <Section title="Card">
        <Card>
          <Text fontWeight="bold" fontSize="lg">
            Default Card
          </Text>
          <Text color="muted" fontSize="sm">
            border, shadow and surface background out of the box
          </Text>
        </Card>

        <Card backgroundColor="primary" radius="md" shadowSize="lg">
          <Text color="onPrimary" fontWeight="bold">
            Custom Card
          </Text>
          <Text color="onPrimary" fontSize="sm">
            Primary background with large shadow
          </Text>
        </Card>
      </Section>

'onSecondary', false: 'onSurface' }} /> <Text>Custom colors</Text> </View> </Section> {/* ── Radio ── */} <Section title="Radio"> <View style={styles.row}> {['a', 'b', 'c'].map((v) => ( <View key={v} style={styles.radioItem}> <Radio selected={radioValue === v} onChange={() => setRadioValue(v)} border shadow radius="full" /> <Text>{v.toUpperCase()}</Text> </View> ))} </View> <View style={styles.row}> <Radio selected={true} onChange={() => {}} size="sm" border shadow radius="full" /> <Radio selected={true} onChange={() => {}} size="md" border shadow radius="full" /> <Radio selected={true} onChange={() => {}} size="lg" border shadow radius="full" /> </View> <View style={styles.row}> <Radio selected={true} onChange={() => {}} border shadow radius="full" backgroundColor={{ true: 'secondary', false: 'surface' }} innerColor={{ true: 'onSecondary', false: 'onSurface' }} /> <Text>Custom colors</Text> </View> </Section> {/* ── Switch ── */} <Section title="Switch"> <View style={styles.row}> <Switch value={switchValue} onChange={setSwitchValue} border shadow radius="full" /> <Text>{switchValue ? 'On' : 'Off'}</Text> </View> <View style={styles.row}> <Switch value={true} onChange={() => {}} size="sm" border shadow radius="full" /> <Switch value={true} onChange={() => {}} size="md" border shadow radius="full" /> <Switch value={true} onChange={() => {}} size="lg" border shadow radius="full" /> </View> <View style={styles.row}> <Switch value={true} onChange={() => {}} border shadow radius="full" backgroundColor={{ true: 'success', false: 'muted' }} thumbColor={{ true: 'onSuccess', false: 'onPrimary' }} /> <Text>Custom colors</Text> </View> <View style={styles.row}> <Switch value={false} onChange={() => {}} border shadow radius="full" disabled /> <Text color="muted">Disabled</Text> </View> </Section> </ScrollView> ); } function Section({ title, children, }) { return ( <View style={styles.section}> <Text fontSize="xl" fontWeight="bold" style={styles.sectionTitle}> {title} </Text> <View style={styles.sectionContent}>{children}</View> </View> ); } const styles = StyleSheet.create({ scroll: { flex: 1, }, container: { padding: 16, gap: 24, paddingTop: 60, paddingBottom: 40, }, section: { gap: 12, }, sectionTitle: { marginBottom: 4, }, sectionContent: { gap: 12, }, row: { flexDirection: 'row', alignItems: 'center', gap: 12, flexWrap: 'wrap', }, radioItem: { flexDirection: 'row', alignItems: 'center', gap: 6, }, });
```

--------------------------------

### Initialize NeoProvider in App.js

Source: https://rn-neo.gs-rumana.com/docs/usage

Wrap the root component with NeoProvider to enable library functionality.

```tsx
import { NeoProvider } from 'rn-neo';

export default function App() {
  return <NeoProvider>{/* Your app code */}</NeoProvider>;
}
```

--------------------------------

### Initialize ThemeProvider

Source: https://rn-neo.gs-rumana.com/

Wrap the application with the ThemeProvider component.

```typescript
// App.tsx
import { ThemeProvider } from 'rn-neo';
```

--------------------------------

### Configure ThemeProvider

Source: https://rn-neo.gs-rumana.com/

Wrap the application root with ThemeProvider to enable library-wide styling.

```javascript
export default function App() {
  return (
    <ThemeProvider>
      {/* your app */}
    </ThemeProvider>
  );
}
```

--------------------------------

### Implement Card component with defaults and overrides

Source: https://rn-neo.gs-rumana.com/docs/components/card

Demonstrates basic usage of the Card component and how to override default styling properties like background color, shadow, and padding.

```tsx
import { Card } from 'rn-neo';

<Card>
  <Text>Hello</Text>
</Card>

// Override defaults
<Card backgroundColor="primary" shadow={false} padding="xl">
  <Text>Custom card</Text>
</Card>
```

--------------------------------

### Implement Text component with theme tokens and shadows

Source: https://rn-neo.gs-rumana.com/docs/components/text

Demonstrates basic usage, theme-based styling, shadow application, and custom font family assignment.

```tsx
import { Text } from 'rn-neo';

<Text>Basic text</Text>

// Using theme tokens
<Text color="primary" fontSize="xl" fontWeight="bold">
  Bold Primary Heading
</Text>

// With shadow and alignment
<Text align="center" shadow shadowColor="shadow" shadowSize="sm">
  Centered text with shadow
</Text>

// Custom font family
<Text fontFamily="SpaceMono-Regular">
  Monospace content
</Text>
```

--------------------------------

### Configure NeoProvider

Source: https://rn-neo.gs-rumana.com/docs/customization

Apply custom theme and configuration objects to the root provider.

```tsx
<NeoProvider theme={myTheme} config={myConfig}>
  <App />
</NeoProvider>
```

--------------------------------

### Implement Box component usage

Source: https://rn-neo.gs-rumana.com/docs/components/box

Demonstrates basic usage of the Box component, including applying background colors, borders, shadows, and custom spacing.

```tsx
import { Box } from 'rn-neo';

<Box backgroundColor="surface" padding="md">
  {/* anything */}
</Box>

// With border and shadow
<Box
  backgroundColor="primary"
  border
  borderSize="thick"
  shadow
  shadowSize="lg"
  padding="lg"
/>

// Custom radius and shadow color
<Box
  backgroundColor="surface"
  border
  shadow
  shadowColor="primary"
  radius="md"
  paddingHorizontal="xl"
  paddingVertical="md"
/>
```

--------------------------------

### Basic Dialog Usage

Source: https://rn-neo.gs-rumana.com/docs/components/dialog

Demonstrates how to control the Dialog visibility using state and provide custom content for the title and footer.

```tsx
import { Dialog, Pressable, Text } from 'rn-neo';
import { useState } from 'react';

const [visible, setVisible] = useState(false);

<Pressable onPress={() => setVisible(true)}>
  <Text color="onPrimary" fontWeight="bold">Open</Text>
</Pressable>

<Dialog
  visible={visible}
  onClose={() => setVisible(false)}
  title="Delete item?"
  footer={
    <>
      <Pressable backgroundColor="surface" onPress={() => setVisible(false)}>
        <Text fontWeight="bold">Cancel</Text>
      </Pressable>
      <Pressable backgroundColor="error" onPress={() => setVisible(false)}>
        <Text color="onError" fontWeight="bold">Delete</Text>
      </Pressable>
    </>
  }
>
  <Text color="muted">This action can't be undone.</Text>
</Dialog>
```

--------------------------------

### Import RN Neo components

Source: https://rn-neo.gs-rumana.com/docs/usage

Import necessary UI components from the rn-neo package.

```tsx
import { Pressable, Text } from 'rn-neo';
```

--------------------------------

### useNeo()

Source: https://rn-neo.gs-rumana.com/docs/customization

The useNeo hook provides access to the active theme and configuration objects within the component tree.

```APIDOC
## useNeo()

### Description
The `useNeo` hook allows components to access the current `NeoTheme` and `NeoConfig` objects, ensuring consistency with the application's UI settings.

### Usage
```tsx
import { useNeo } from 'rn-neo';

function MyComponent() {
  const { theme, config } = useNeo();
  // Access theme.colors or config.spacing here
}
```

### Returns
- **theme** (NeoTheme) - The full resolved theme object.
- **config** (NeoConfig) - The full resolved configuration object.
```

--------------------------------

### Use Button Component

Source: https://rn-neo.gs-rumana.com/

Import the Button component from rn-neo and apply the desired variant.

```javascript
import { Button } from 'rn-neo';

<Button variant="primary">Press me</Button>
```

--------------------------------

### Access Theme and Config with useNeo

Source: https://rn-neo.gs-rumana.com/docs/customization

Use the useNeo hook to retrieve the resolved theme and configuration objects for consistent custom component styling.

```tsx
import { useNeo } from 'rn-neo';

function MyComponent() {
  const { theme, config } = useNeo();

  return (
    <View
      style={{
        backgroundColor: theme.colors.surface,
        padding: config.spacing.md,
        borderRadius: config.radius.lg,
      }}
    />
  );
}
```

--------------------------------

### Link assets for React Native CLI

Source: https://rn-neo.gs-rumana.com/docs/installation

Execute this command to link necessary assets for the RN Neo theme in a React Native CLI project.

```bash
npx react-native-asset
```

--------------------------------

### Import Built-in Themes

Source: https://rn-neo.gs-rumana.com/docs/customization

Access the default light and dark themes provided by the library.

```tsx
import { DefaultLightTheme, DefaultDarkTheme } from 'rn-neo';
```

--------------------------------

### Configuring Input Fields

Source: https://rn-neo.gs-rumana.com/

Input components support placeholders, value binding, and various styling options like borders, shadows, and radius.

```jsx
<Input
          placeholder="Default input"
          value={inputValue}
          onChangeText={setInputValue}
          border
          shadow
          backgroundColor="surface"
        />

        <Input
          placeholder="With radius"
          border
          shadow
          radius="md"
          backgroundColor="surface"
        />

        <Input
          placeholder="Large shadow on focus"
          border
          shadow
          shadowSize="lg"
          backgroundColor="surface"
        />
```

--------------------------------

### Apply custom NeoConfig

Source: https://rn-neo.gs-rumana.com/docs/customization

Define a NeoConfig object with custom spacing and font mappings, then pass it to the NeoProvider.

```tsx
import type { NeoConfig } from 'rn-neo';

const myConfig: NeoConfig = {
  spacing: {
    'xs': 4,
    'sm': 8,
    'md': 12,
    'lg': 16,
    'xl': 20,
    '2xl': 28,
    '3xl': 36,
  },
  fonts: {
    normal: 'Inter-Regular',
    medium: 'Inter-Medium',
    bold: 'Inter-Bold',
  },
};

<NeoProvider config={myConfig}>
  <App />
</NeoProvider>;
```

--------------------------------

### Configure Expo plugin

Source: https://rn-neo.gs-rumana.com/docs/installation

Add the rn-neo plugin to the expo configuration in app.json.

```json
{
  "expo": {
    "plugins": [
      // ...other plugins,
      "rn-neo"
    ]
  }
}
```

--------------------------------

### NeoConfig Configuration

Source: https://rn-neo.gs-rumana.com/docs/customization

The NeoConfig object is passed to the NeoProvider to define custom design tokens and font mappings.

```APIDOC
## NeoConfig

### Description
The `NeoConfig` object defines the concrete pixel values for design tokens and maps font weight names to font families. It supports partial overrides of the default values.

### Usage
```tsx
import type { NeoConfig } from 'rn-neo';

const myConfig: NeoConfig = {
  spacing: { 'xs': 4, 'sm': 8, ... },
  fonts: { normal: 'Inter-Regular', ... },
};

<NeoProvider config={myConfig}>
  <App />
</NeoProvider>;
```

### Configuration Tokens
- **Radius**: `none`, `sm`, `md`, `lg`, `xl`, `full`
- **BorderSize**: `none`, `thin`, `medium`, `thick`
- **ShadowSize**: `sm`, `md`, `lg`
- **Spacing**: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`
- **FontSize**: `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`
- **FontWeight**: Maps `normal`, `medium`, `bold` to font family strings.
```

--------------------------------

### Implementing Pressable Components

Source: https://rn-neo.gs-rumana.com/

Pressable components support various states like loading and disabled, and can be styled with borders, shadows, and custom background colors.

```jsx
<Pressable border shadow onPress={() => {}}>
          <Text color="onPrimary" fontWeight="bold" align="center">
            Primary Button
          </Text>
        </Pressable>

        <Pressable
          backgroundColor="secondary"
          border
          shadow
          radius="md"
          onPress={() => {}}
        >
          <Text color="onSecondary" fontWeight="bold" align="center">
            Secondary Button
          </Text>
        </Pressable>

        <Pressable
          backgroundColor="surface"
          border
          shadow
          onPress={() => {}}
          loading
        >
          <Text fontWeight="bold" align="center">
            Loading State
          </Text>
        </Pressable>

        <Pressable
          backgroundColor="surface"
          border
          shadow
          onPress={() => {}}
          disabled
        >
          <Text fontWeight="bold" align="center" color="muted">
            Disabled State
          </Text>
        </Pressable>
```

--------------------------------

### Using Badges

Source: https://rn-neo.gs-rumana.com/

Badges are used to display status or labels with configurable sizes, background colors, and border styles.

```jsx
<View style={styles.row}>
          <Badge>Default</Badge>
          <Badge size="sm" backgroundColor="success">
            Success
          </Badge>
          <Badge size="sm" backgroundColor="error">
            Error
          </Badge>
          <Badge size="sm" backgroundColor="warning">
            Warning
          </Badge>
        </View>

        <View style={styles.row}>
          <Badge size="lg" backgroundColor="secondary">
            Large
          </Badge>
          <Badge size="md" backgroundColor="primary" radius="none">
            No Radius
          </Badge>
          <Badge size="md" backgroundColor="surface" border shadow>
            Outlined
          </Badge>
        </View>
```

--------------------------------

### Implement Switch component in React

Source: https://rn-neo.gs-rumana.com/docs/components/switch

Basic implementation of the Switch component including standard usage, custom styling with sizes and colors, and the disabled state.

```tsx
import { Switch } from 'rn-neo';
import { useState } from 'react';

const [value, setValue] = useState(false);

<Switch value={value} onChange={setValue} />

// With size and custom colors
<Switch
  value={value}
  onChange={setValue}
  size="lg"
  backgroundColor={{ true: 'success', false: 'muted' }}
  thumbColor={{ true: 'onSuccess', false: 'onPrimary' }}
/>

// Disabled
<Switch value={value} onChange={setValue} disabled />
```

--------------------------------

### Displaying Text with rn-neo

Source: https://rn-neo.gs-rumana.com/

Use the Text component to render text with various font sizes, weights, and colors.

```jsx
<Text fontSize="3xl" fontWeight="bold">
          3xl bold
        </Text>
        <Text fontSize="2xl" fontWeight="bold">
          2xl bold
        </Text>
        <Text fontSize="xl" fontWeight="medium">
          xl medium
        </Text>
        <Text fontSize="lg">lg normal</Text>
        <Text fontSize="md" color="muted">
          md muted
        </Text>
        <Text fontSize="sm" color="muted">
          sm muted
        </Text>
        <Text fontSize="md" color="primary" fontWeight="bold">
          primary color
        </Text>
        <Text fontSize="md" color="secondary" fontWeight="bold">
          secondary color
        </Text>
```

--------------------------------

### Apply Dark Theme

Source: https://rn-neo.gs-rumana.com/docs/customization

Explicitly pass the dark theme to the provider.

```tsx
<NeoProvider theme={DefaultDarkTheme}>
  <App />
</NeoProvider>
```

--------------------------------

### Text Component Props

Source: https://rn-neo.gs-rumana.com/docs/components/text

The Text component accepts various props for styling, including color, alignment, font settings, and shadow configurations.

```APIDOC
## Text Component Props

### Text
- **color** (Colors | string) - Optional - Text color. Token or any color string. Default: 'onBackground'.
- **align** ('auto'|'left'|'right'|'center'|'justify') - Optional - Text alignment. Maps to textAlign. Default: 'auto'.

### Font
- **fontSize** (FontSize) - Optional - Font size token. Default: 'md'.
- **fontWeight** ('normal' | 'medium' | 'bold') - Optional - Font weight token. Maps to the font family defined in config. Default: 'normal'.
- **fontFamily** (string) - Optional - Custom font family string.

### Shadow
- **shadow** (boolean) - Optional - Whether to show a text shadow. Default: false.
- **shadowSize** (ShadowSize | number) - Optional - Shadow offset size. Token or raw number. Default: From theme.
- **shadowColor** (Colors | string) - Optional - Shadow color. Token or any color string. Default: 'shadow'.
```

--------------------------------

### Implement Dynamic Dark Mode

Source: https://rn-neo.gs-rumana.com/docs/customization

Use React Native's useColorScheme hook to toggle between themes based on system settings.

```tsx
import { useColorScheme } from 'react-native';
import { NeoProvider, DefaultLightTheme, DefaultDarkTheme } from 'rn-neo';

export default function App() {
  const scheme = useColorScheme();
  const theme = scheme === 'dark' ? DefaultDarkTheme : DefaultLightTheme;

  return (
    <NeoProvider theme={theme}>
      <YourApp />
    </NeoProvider>
  );
}
```

--------------------------------

### Configure custom font families

Source: https://rn-neo.gs-rumana.com/docs/customization

Map font weight names to specific font family strings for use in the library.

```tsx
fonts: {
  normal: 'SpaceGrotesk-Regular',
  medium: 'SpaceGrotesk-Medium',
  bold: 'SpaceGrotesk-Bold',
}
```

--------------------------------

### Build a Radio Group

Source: https://rn-neo.gs-rumana.com/docs/components/radio

Manual implementation of a radio group by wiring multiple controlled Radio components to a shared state.

```tsx
const [value, setValue] = useState('a');

<Radio selected={value === 'a'} onChange={() => setValue('a')} />
<Radio selected={value === 'b'} onChange={() => setValue('b')} />
<Radio selected={value === 'c'} onChange={() => setValue('c')} />
```

--------------------------------

### Pressable Component API

Source: https://rn-neo.gs-rumana.com/docs/components/pressable

The Pressable component is a UI element that supports various styling props and interaction states.

```APIDOC
## Pressable Component

### Description
A touchable container that provides a physical press animation. It supports loading states and accepts standard React Native PressableProps.

### Props

#### Pressable
- **loading** (boolean) - Optional - Disables the component and sets accessibilityState.busy.

#### Font
- **textColor** (Colors | string) - Optional - Text color cascaded to children.
- **fontSize** (FontSize) - Optional - Font size token.
- **fontWeight** ('normal' | 'medium' | 'bold') - Optional - Font weight token.
- **fontFamily** (string) - Optional - Custom font family string.

#### Background
- **backgroundColor** (BgColors | string) - Optional - Background color. Defaults to 'primary'.

#### Border
- **border** (boolean) - Optional - Whether to show a border.
- **borderSize** (BorderSize | number) - Optional - Border width.
- **borderColor** (Colors | string) - Optional - Border color.
- **radius** (Radius | number) - Optional - Border radius.

#### Shadow
- **shadow** (boolean) - Optional - Whether to show a shadow.
- **shadowSize** (ShadowSize | number) - Optional - Shadow offset size.
- **shadowColor** (Colors | string) - Optional - Shadow color.

### Accessibility
- **accessibilityRole**: Defaults to 'button'.
- **accessibilityState**: Automatically includes 'disabled' and 'busy' (when loading is true).
```

--------------------------------

### Override NeoTheme properties

Source: https://rn-neo.gs-rumana.com/docs/customization

Spread the DefaultLightTheme and override specific fields to customize the application theme.

```tsx
import { DefaultLightTheme } from 'rn-neo';
import type { NeoTheme } from 'rn-neo';

const myTheme: NeoTheme = {
  ...DefaultLightTheme,
  colors: {
    ...DefaultLightTheme.colors,
    primary: '#6600FF',
    onPrimary: '#FFFFFF',
  },
  radius: 'md',
  shadowSize: 'lg',
  animation: false,
};
```

--------------------------------

### Apply Component-Level Style Overrides

Source: https://rn-neo.gs-rumana.com/docs/customization

Pass style props directly to components to override theme defaults for specific instances.

```tsx
// Uses theme defaults
<Box />

// Overrides radius and shadow for this instance only
<Box radius="lg" shadowSize="sm" shadowColor="primary" />

// Disables border for this button only
<Pressable border={false}>
  <Text>Click me</Text>
</Pressable>
```

--------------------------------

### Radio Component Props

Source: https://rn-neo.gs-rumana.com/docs/components/radio

The Radio component accepts various props to control its state, appearance, and behavior. It supports standard spacing, border, and shadow configurations.

```APIDOC
## Radio Component Props

### Radio
- **selected** (boolean) - Required - Current selected state.
- **onChange** ((selected: boolean) => void) - Required - Called with the new value on press.
- **disabled** (boolean) - Optional - Disables interaction and reduces opacity.
- **size** ('sm' | 'md' | 'lg') - Optional - Controls the dimensions of the radio button. Default: 'md'.
- **backgroundColor** (Record<'true' | 'false', BgColors | string>) - Optional - Background color for each state. Default: { true: 'primary', false: 'surface' }.
- **innerColor** (Record<'true' | 'false', Colors | string>) - Optional - Inner dot color for each state. Default: { true: 'onPrimary', false: 'transparent' }.

### Border
- **border** (boolean) - Optional - Whether to show a border.
- **borderSize** (BorderSize | number) - Optional - Border width. Token or raw number.
- **borderColor** (Colors | string) - Optional - Border color.
- **radius** (Radius | number) - Optional - Border radius. Scales to the inner dot proportionally.

### Shadow
- **shadow** (boolean) - Optional - Whether to show a shadow.
- **shadowSize** (ShadowSize | number) - Optional - Shadow offset size. Doubles when selected.
- **shadowColor** (Colors | string) - Optional - Shadow color.
```

--------------------------------

### Badge Component API

Source: https://rn-neo.gs-rumana.com/docs/components/badge

The Badge component is a React component used to display labels. It accepts various props for sizing, styling, and layout.

```APIDOC
## Badge Component

### Description
A small label component for status indicators, tags, and counts. It defaults to a pill shape and automatically manages text contrast.

### Props
#### Badge
- **size** ('sm' | 'md' | 'lg') - Optional - Controls padding and font size. Default: 'md'.
- **textStyle** (TextStyle) - Optional - Style applied to the auto-rendered Text when children is a string or number.

#### Font
- **textColor** (Colors | string) - Optional - Text color. Resolved from background token if not set.
- **fontSize** (FontSize) - Optional - Overrides the font size from the size preset.
- **fontWeight** ('normal' | 'medium' | 'bold') - Optional - Font weight token.
- **fontFamily** (string) - Optional - Custom font family string.

#### Background
- **backgroundColor** (BgColors | string) - Optional - Background color. Default: 'primary'.

#### Border
- **border** (boolean) - Optional - Whether to show a border.
- **borderSize** (BorderSize | number) - Optional - Border width.
- **borderColor** (Colors | string) - Optional - Border color.
- **radius** (Radius | number) - Optional - Border radius. Default: 'full'.

#### Shadow
- **shadow** (boolean) - Optional - Whether to show a shadow.
- **shadowSize** (ShadowSize | number) - Optional - Shadow offset size.
- **shadowColor** (Colors | string) - Optional - Shadow color.

### Usage Example
```tsx
import { Badge } from 'rn-neo';

<Badge size="sm" backgroundColor="success">Active</Badge>
```
```

--------------------------------

### Managing Checkbox States

Source: https://rn-neo.gs-rumana.com/

Checkboxes support controlled state, different sizes, disabled states, and custom color mappings for checked and unchecked states.

```jsx
<View style={styles.row}>
          <Checkbox
            checked={checkboxValue}
            onChange={setCheckboxValue}
            border
            shadow
          />
          <Text>{checkboxValue ? 'Checked' : 'Unchecked'}</Text>
        </View>

        <View style={styles.row}>
          <Checkbox
            checked={true}
            onChange={() => {}}
            size="sm"
            border
            shadow
          />
          <Checkbox
            checked={true}
            onChange={() => {}}
            size="md"
            border
            shadow
          />
          <Checkbox
            checked={true}
            onChange={() => {}}
            size="lg"
            border
            shadow
          />
        </View>

        <View style={styles.row}>
          <Checkbox
            checked={false}
            onChange={() => {}}
            border
            shadow
            disabled
          />
          <Text color="muted">Disabled</Text>
        </View>

        <View style={styles.row}>
          <Checkbox
            checked={true}
            onChange={() => {}}
            border
            shadow
            backgroundColor={{ true: 'secondary', false: 'surface' }}
            checkColor={{ true: 'onSecondary', false: 'onSurface' }}
          />
          <Text>Custom colors</Text>
        </View>
```

--------------------------------

### Switch Component

Source: https://rn-neo.gs-rumana.com/docs/components/switch

The Switch component is a controlled toggle element. It requires a value and an onChange handler to manage its state.

```APIDOC
## Switch Component

### Description
A toggle switch with a sliding thumb animation. The thumb translates across the track when the value changes.

### Props
- **value** (boolean) - Required - Current on/off state.
- **onChange** ((value: boolean) => void) - Required - Called with the new value on press.
- **disabled** (boolean) - Optional - Disables interaction, reduces opacity.
- **size** ('sm' | 'md' | 'lg') - Optional - Controls track width and height. Default: 'md'.
- **backgroundColor** (Record<'true' | 'false', BgColors | string>) - Optional - Track background for each state.
- **thumbColor** (Record<'true' | 'false', Colors | string>) - Optional - Thumb color for each state.

### Border Props
- **border** (boolean) - Optional - Whether to show a border.
- **borderSize** (BorderSize | number) - Optional - Border width.
- **borderColor** (Colors | string) - Optional - Border color.
- **radius** (Radius | number) - Optional - Track radius.

### Shadow Props
- **shadow** (boolean) - Optional - Whether to show a shadow.
- **shadowSize** (ShadowSize | number) - Optional - Shadow offset size.
- **shadowColor** (Colors | string) - Optional - Shadow color.
```

--------------------------------

### Dialog Component API

Source: https://rn-neo.gs-rumana.com/docs/components/dialog

The Dialog component is a controlled modal that requires visibility state and a close handler. It supports custom titles, footers, and various styling props.

```APIDOC
## Dialog Component

### Description
A controlled modal component that centers content over a dimmed backdrop. It supports custom titles, footers, and inherits all Box component styling props.

### Props
- **visible** (boolean) - Required - Controls the visibility of the dialog.
- **onClose** (() => void) - Required - Callback triggered on backdrop press or Android hardware back button.
- **title** (string) - Optional - Bold heading displayed at the top of the dialog.
- **titleColor** (Colors | string) - Optional - Color of the title text. Default: 'onSurface'.
- **footer** (ReactNode) - Optional - Content rendered in a right-aligned row at the bottom.
- **children** (ReactNode) - Optional - The main body content of the dialog.
- **dismissable** (boolean) - Optional - Whether pressing the backdrop closes the dialog. Default: true.
- **backdropColor** (string) - Optional - Color of the overlay behind the surface. Default: 'rgba(0,0,0,0.5)'.
- **animationType** ('none' | 'fade' | 'slide') - Optional - Transition effect for mounting/unmounting. Default: 'fade'.
- **containerStyle** (StyleProp<ViewStyle>) - Optional - Style applied to the centering container.

### Inherited Props
- **Box Props** - The Dialog surface accepts all standard Box props (e.g., backgroundColor, border, shadow, radius, padding) to customize its appearance.
```

--------------------------------

### Checkbox Component API

Source: https://rn-neo.gs-rumana.com/docs/components/checkbox

The Checkbox component is a UI element that allows users to toggle a boolean state. It supports custom styling, sizing, and accessibility features.

```APIDOC
## Checkbox Component

### Description
A toggleable checkbox component with press animations and configurable visual states.

### Props

#### Checkbox Props
- **checked** (boolean) - Required - Current checked state.
- **onChange** ((checked: boolean) => void) - Required - Callback function triggered on press.
- **disabled** (boolean) - Optional - If true, disables interaction and reduces opacity.
- **size** ('sm' | 'md' | 'lg') - Optional - Controls dimensions (Default: 'md').
- **backgroundColor** (Record<'true' | 'false', BgColors | string>) - Optional - Background color for checked/unchecked states.
- **checkColor** (Record<'true' | 'false', Colors | string>) - Optional - Checkmark color for checked/unchecked states.

#### Border Props
- **border** (boolean) - Optional - Whether to show a border.
- **borderSize** (BorderSize | number) - Optional - Border width.
- **borderColor** (Colors | string) - Optional - Border color.
- **radius** (Radius | number) - Optional - Border radius.

#### Shadow Props
- **shadow** (boolean) - Optional - Whether to show a shadow.
- **shadowSize** (ShadowSize | number) - Optional - Shadow offset size.
- **shadowColor** (Colors | string) - Optional - Shadow color.
```
Tokens:
Raw