@leogouveia/gds-library

✨ Features

• 🎯 Modern Design - Clean, professional components
• 📱 Cross-Platform - Works on iOS, Android, and Web
• 🎨 Customizable - Built with Tamagui's powerful styling system
• 📦 TypeScript First - Full type safety out of the box
• ⚡ Performance - Optimized for React Native performance
• 🌓 Theme Ready - Built-in light/dark theme support
• ♿ Accessible - Following accessibility best practices

🚀 Installation

# npm
npm install @leogouveia/gds-library

# yarn
yarn add @leogouveia/gds-library

# pnpm
pnpm add @leogouveia/gds-library

Peer Dependencies

Make sure you have the required peer dependencies installed:

npm install react react-native

📖 Quick Start

1. Setup Provider

Wrap your app with the TamaguiProvider:

import React from 'react';
import { TamaguiProvider } from '@leogouveia/gds-library';

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

2. Use Components

Import and use components in your screens:

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Button, Input } from '@leogouveia/gds-library';

export default function MyScreen() {
  const [text, setText] = useState('');

  return (
    <View style={styles.container}>
      <Input 
        placeholder="Enter your name" 
        value={text}
        onChangeText={setText}
      />
      <Button onPress={() => alert(`Hello, ${text}!`)}>
        Say Hello
      </Button>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    gap: 16,
    justifyContent: 'center',
  },
});

🧩 Available Components

Button

A customizable button component with multiple variants and sizes.

import { Button } from '@leogouveia/gds-library';

<Button onPress={handlePress}>Primary Button</Button>
<Button variant="secondary" onPress={handlePress}>Secondary</Button>
<Button size="small" onPress={handlePress}>Small Button</Button>

Input

A text input component with built-in styling and validation support.

import { Input } from '@leogouveia/gds-library';

<Input 
  placeholder="Enter text"
  value={value}
  onChangeText={setValue}
/>

TamaguiProvider

The required provider component that enables theming and styling.

import { TamaguiProvider } from '@leogouveia/gds-library';

<TamaguiProvider>
  <YourApp />
</TamaguiProvider>

🎨 Theming

The components are built with Tamagui and support extensive theming capabilities:

import { TamaguiProvider } from '@leogouveia/gds-library';

// Custom theme configuration coming soon!
<TamaguiProvider>
  <App />
</TamaguiProvider>

📱 Platform Support

• ✅ iOS - Full support
• ✅ Android - Full support
• ✅ Web - Full support via React Native Web
• ✅ Expo - Compatible with Expo managed workflow

🛠️ Development

This library is built with:

• React Native - Mobile framework
• Tamagui - Styling and theming
• TypeScript - Type safety
• React Native Builder Bob - Build system

📄 License

ISC © Leonardo de Albuquerque Gouveia

Documentation • Issues • Contributing