rn-neo

A high-performance, neobrutalism-inspired UI library for React Native.

Built with React Native Reanimated, focused on performance, strict design consistency, and developer experience.

✨ Features

• 🎨 Strict Neobrutalism: Hard shadows, bold borders, and vibrant colors.
• ⚡ Performance First: Optimized for low-end Android devices using react-native-reanimated.
• 🛠️ Themable: Centralized token system via NeoProvider.
• 📦 Tree-shakable: Only include what you use.
• 📘 TypeScript Support: Fully typed for a better DX.

🚀 Installation

yarn add rn-neo react-native-reanimated

Note: react-native-reanimated is a peer dependency and must be installed. Follow its installation guide for additional setup (like adding the Babel plugin).

🛠 Usage

1. Wrap your app with NeoProvider

import { NeoProvider } from 'rn-neo';

export default function App() {
  return (
    <NeoProvider>
      <YourAppContent />
    </NeoProvider>
  );
}

2. Use Components

import { Button, Card, Text, Input } from 'rn-neo';

const MyScreen = () => (
  <Card variant="surface" shadow>
    <Text variant="xl" weight="black">Hello Neobrutalism!</Text>
    <Input placeholder="Type something..." />
    <Button
      title="Click Me"
      variant="primary"
      onPress={() => console.log('Pressed!')}
    />
  </Card>
);

🏗 Components

• Box: The foundation for layout and shadows.
• Text: Theme-aware typography.
• Pressable: Animated interactive wrapper.
• Button: Versatile button with variants (primary, secondary).
• Card: Container with customizable padding and shadows.
• Input: Neobrutalism styled text input.

🎨 Customizing Theme

You can override the default tokens by passing a theme object to NeoProvider.

const customTheme = {
  colors: {
    primary: '#FF5733',
  },
};

<NeoProvider theme={customTheme}>
  {/* ... */}
</NeoProvider>

🗺 Roadmap

See the roadmap to see what's planned for future releases.

🤝 Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

📄 License

MIT

Made with create-react-native-library