React Native Ethr

Build your apps faster with modular components, dev-ready templates, and seamless Figma-to-code integration.

✨ Features

• 🎨 77+ Production-Ready Components - Buttons, inputs, modals, navigation, cards, lists, forms, and more — styled and ready for use.
• 🧪 5600+ Variants - Customizable props, styles, and states (dark/light mode, RTL support, accessibility built-in).
• 📱 Cross-Platform - iOS and Android optimized with native performance
• 🧩 Ready-Made Templates - Kickstart flows like onboarding, authentication, product catalog, cart, and chat screens.
• 🎭 Design System Parity - A Figma component library synced with Ethr React Native SDK — ensuring pixel-perfect design-to-code consistency.
• ♿ Accessible & Scalable - Built with accessibility guidelines and internationalization support (RTL, multiple locales).
• 🎨 Dev-Ready Theming - Easily extend or override styles with your brand tokens, colors, and typography.
• 🤖 CursorAI + MCP Integration - Generate components and screens from prompts, speeding up experimentation and iteration.
• 📖 Comprehensive Docs - Storybook integration and detailed examples

📱Download the Ethr Preview App

Ethr Preview App to test the components and use cases in playgrounds!

🚀 Quick Start

1. Install the Package

# Using npm
npm install @venturediveeng/react-native-ethr-community

# Using yarn
yarn add @venturediveeng/react-native-ethr-community

2. Install Peer Dependencies

Choose the installation command based on your React Native version:

For React Native 0.73-0.77 (React 18):

# Using npm
npm install react-native-reanimated@^3.8.1 react-native-gesture-handler@^2.20.0 react-native-safe-area-context@^4.14.0 react-native-screens@^4.2.0 @shopify/react-native-skia@^1.12.3 @gorhom/bottom-sheet@^5.0.0 victory-native@^41.16.0

# Using yarn
yarn add react-native-reanimated@^3.8.1 react-native-gesture-handler@^2.20.0 react-native-safe-area-context@^4.14.0 react-native-screens@^4.2.0 @shopify/react-native-skia@^1.12.3 @gorhom/bottom-sheet@^5.0.0 victory-native@^41.16.0

For React Native 0.78-0.81+ (React 18/19):

# Using npm
npm install react-native-reanimated@^3.16.3 react-native-gesture-handler@^2.20.0 react-native-safe-area-context@^5.2.2 react-native-screens@^5.0.0 @shopify/react-native-skia@^2.0.0 @gorhom/bottom-sheet@^5.0.0 victory-native@^41.16.0

# Using yarn
yarn add react-native-reanimated@^3.16.3 react-native-gesture-handler@^2.20.0 react-native-safe-area-context@^5.2.2 react-native-screens@^5.0.0 @shopify/react-native-skia@^2.0.0 @gorhom/bottom-sheet@^5.0.0 victory-native@^41.16.0

Note: If you're not using React Navigation or bottom sheet components, you can omit react-native-screens from the installation.

3. 🚨 Critical: Configure Babel for Reanimated 3 (Must be done)

Add to your babel.config.js (React Native Reanimated plugin must be LAST):

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    'react-native-reanimated/plugin', // ⚠️ Must be the last plugin!
  ],
};

4. 🚨 Critical: Configure Metro for Reanimated (Must be done)

Add to your metro.config.js:

// metro.config.js
const { wrapWithReanimatedMetroConfig } = require('react-native-reanimated/metro-config');

const config = {
  // Your existing Metro configuration options
};

module.exports = wrapWithReanimatedMetroConfig(config);

5. 🔄 Reset Cache & Rebuild (Required after configuration)

After updating Babel and Metro configs, you must clear React Native cache and rebuild:

# Clear React Native cache and rebuild
npx react-native start --reset-cache

# For iOS (in a new terminal)
npx react-native run-ios

# For Android (in a new terminal)
npx react-native run-android

6. Basic Usage

import React from 'react';
import { View } from 'react-native';
import { ThemeProvider, Button, Input, BasicCard } from '@venturediveeng/react-native-ethr-community';

export default function App() {
  return (
    <ThemeProvider>
      <View style={{ padding: 20 }}>
        <BasicCard
          header={{ title: 'Welcome to Ethr!' }}
          footer={{
            primaryButton: {
              text: 'Get Started',
              onPress: () => console.log('Started!'),
            },
          }}
        >
          <Input label="Enter your name" placeholder="John Doe" onChangeText={(text) => console.log(text)} />
          <Button text="Submit" variant="primary" onPress={() => console.log('Form submitted!')} />
        </BasicCard>
      </View>
    </ThemeProvider>
  );
}

⚙️ Configuration

Theme Customization

import { ThemeProvider, createTheme } from '@venturediveeng/react-native-ethr-community';

const customTheme = createTheme({
  colors: {
    primary: '#007AFF',
    secondary: '#34C759',
    background: '#F2F2F7',
  },
  spacing: {
    sm: 8,
    md: 16,
    lg: 24,
  },
});

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

Dark Mode Support

import { ThemeProvider } from '@venturediveeng/react-native-ethr-community';

export default function App() {
  return <ThemeProvider darkMode={true}>{/* Your app will automatically use dark theme */}</ThemeProvider>;
}

🧪 Testing Setup

Install Testing Dependencies

# Using npm
npm install --save-dev jest babel-jest @testing-library/react-native react-test-renderer

# Using yarn
yarn add --dev jest babel-jest @testing-library/react-native react-test-renderer

Configure Jest

Create jest.config.js:

module.exports = {
  preset: 'react-native',
  setupFiles: ['<rootDir>/jest.setup.ts'],
  transformIgnorePatterns: [
    'node_modules/(?!(react-native|@venturediveeng/react-native-ethr-community|@react-native/js-polyfills|@react-native/assets-registry|react-native-size-matters|@react-native-masked-view/masked-view|react-native-linear-gradient|react-native-reanimated|@react-native/virtualized-lists|react-native-gifted-charts|gifted-charts-core|react-native-device-info)/)',
  ],
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|webp|svg)$': '<rootDir>/__mocks__/fileMock.js',
  },
};

Test Example

import React from 'react';
import { render } from '@testing-library/react-native';
import { ThemeProvider, Button } from '@venturediveeng/react-native-ethr-community';

test('renders button correctly', () => {
  const { getByText } = render(
    <ThemeProvider>
      <Button text="Test Button" onPress={() => {}} />
    </ThemeProvider>,
  );

  expect(getByText('Test Button')).toBeTruthy();
});

Run Tests

# Using npm
npm test

# Using yarn
yarn test

🎨 Ethr Design System 2.0 for Figma

Ethr comes with a companion Figma library, so designers and developers can work from the same source of truth.

🔥 What's New in Version 2.0:

Ethr 2.0 brings a major uplift to the design experience — redefined for speed, flexibility, and scalability. This release includes:

• 77+ reusable, scalable components
• 5600+ smart variants
• 225+ custom-designed icons
• Support for Figma Variables: Color, Typography, Spacing, Radius, and Padding
• Lighter, faster, and free-to-use component set for individuals and teams
• Cleaner layout, new structure, and simplified usage
• Enhanced foundational styles and documentation for rapid prototyping

Get your copy of Ethr Design System 2.0 Lite for free now!
https://www.figma.com/community/file/1548332800294159849/ethr-design-system-2-0-lite

❓ Frequently Asked Questions

Q: Do I need to install all peer dependencies?

A: Yes, peer dependencies are required for the components to work properly. They provide core functionality like animations, navigation, and graphics rendering.

Q: Can I use this with Expo?

A: Yes! All components are compatible with Expo managed workflow. Make sure to install the required peer dependencies.

Q: How do I customize component styles?

A: Use the ThemeProvider to customize global styles, or pass custom style props to individual components.

Q: Is TypeScript supported?

A: Yes! The library is built with TypeScript and includes full type definitions.

Q: How do I report bugs or request features?

A: Please open an issue on our Bitbucket repository or contact our support team.

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

We welcome contributions! Please see our Contributing Guide.

Made with ❤️ by VentureDive