GMB Layout

A comprehensive React Native layout system with shadcn/ui inspired components, theming, and internationalization support.

🆕 Version 1.3.12 - Now with exact component replication, legal modals, settings screen, automatic CSS integration, and bugfixes!
See MIGRATION.md for upgrade guide.

Features

• 🎨 shadcn/ui inspired design - Clean, modern components with consistent styling
• 🌙 Dark/Light theme support - Automatic system theme detection with manual override
• 🌍 Internationalization - Built-in support for German, English, French, and Italian
• 📱 Cross-platform - Works on iOS, Android, and Web
• 🎯 TypeScript - Full TypeScript support with type definitions
• 🧩 Modular - Use only the components you need
• 🍪 Cookie Banner - GDPR-compliant cookie consent with legal modals
• ⚙️ Settings Screen - Built-in settings with analytics toggle and legal links
• 📄 Legal Modals - Cookie policy, privacy policy, terms, and imprint
• 🔄 Hybrid Translations - Package + app-specific translation support

Installation

npm install gmblayout

CSS Styles (für Web)

✅ Automatisch integriert! Die Button-Hover-Effekte werden automatisch für Web geladen. Kein manueller Import nötig!

Die CSS-Styles werden automatisch eingebunden, wenn du die Button-Komponente verwendest.

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install react react-native @expo/vector-icons @react-native-async-storage/async-storage expo-localization react-native-svg react-native-safe-area-context

Quick Start

1. Setup Providers

Wrap your app with the required providers:

import React from 'react';
import { ThemeProvider, LanguageProvider } from 'gmblayout';

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

2. Use Layout Components

import React from 'react';
import { View } from 'react-native';
import { 
  Header, 
  Footer, 
  TranslatedNavigation,
  Card,
  Button 
} from 'gmblayout';

export default function MyScreen() {
  return (
    <View style={{ flex: 1 }}>
      <Header title="My App" />
      
      <View style={{ flex: 1, padding: 16 }}>
        <Card>
          <Button onPress={() => console.log('Hello!')}>
            Click me
          </Button>
        </Card>
      </View>
      
      <TranslatedNavigation
        activeKey="home"
        onItemPress={(key) => console.log('Navigate to:', key)}
      />
      
      <Footer />
    </View>
  );
}

Components

Layout Components

Header

A flexible header component with theme and language toggles.

import { Header } from 'gmblayout';

<Header 
  title="My App"
  subtitle="Welcome to my app"
  showThemeToggle={true}
  showLanguageToggle={true}
  logo={<MyLogo />}
/>

Footer

A simple footer with customizable text.

import { Footer } from 'gmblayout';

<Footer 
  customText="Custom footer text"
  showCopyright={true}
  showMadeWith={true}
/>

TranslatedNavigation

Bottom navigation with automatic translation support.

import { TranslatedNavigation } from 'gmblayout';

<TranslatedNavigation
  activeKey="home"
  onItemPress={(key) => setActiveTab(key)}
  items={[
    { key: 'home', titleKey: 'nav.home', icon: 'home' },
    { key: 'profile', titleKey: 'nav.profile', icon: 'person' }
  ]}
/>

UI Components

Button

A versatile button component with multiple variants.

import { Button } from 'gmblayout';

<Button 
  variant="default" // 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
  size="default"    // 'default' | 'sm' | 'lg' | 'icon'
  onPress={() => console.log('Pressed')}
>
  Click me
</Button>

Card

A card component with header, content, and footer sections.

import { Card, CardHeader, CardContent, CardFooter } from 'gmblayout';

<Card variant="default"> {/* 'default' | 'outline' | 'secondary' */}
  <CardHeader>
    <Text>Card Title</Text>
  </CardHeader>
  <CardContent>
    <Text>Card content goes here</Text>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

ThemeToggle

A toggle button for switching between light and dark themes.

import { ThemeToggle } from 'gmblayout';

<ThemeToggle size={24} />

LanguageToggle

A language selector with modal interface.

import { LanguageToggle } from 'gmblayout';

<LanguageToggle />

CookieBanner

A GDPR-compliant cookie consent banner with legal modal support.

import { CookieBanner } from 'gmblayout';

<CookieBanner
  visible={showCookieBanner}
  onAccept={() => setShowCookieBanner(false)}
  onReject={() => setShowCookieBanner(false)}
  onOpenPrivacy={() => setPrivacyModalVisible(true)}
  onOpenCookiePolicy={() => setCookieModalVisible(true)}
  onLegalModalClosed={() => {}} // Keep banner visible
/>

LegalModal

Legal content modals for cookie policy, privacy policy, terms, and imprint.

import { LegalModal } from 'gmblayout';

<LegalModal
  visible={legalModalVisible}
  onDismiss={() => setLegalModalVisible(false)}
  type="datenschutz" // 'agb' | 'impressum' | 'datenschutz' | 'cookie-policy'
  appName="My App"
  appVersion="1.0.0"
/>

Settings

A comprehensive settings screen with analytics toggle and legal links.

import { Settings } from 'gmblayout';

<Settings
  appName="My App"
  appVersion="1.0.0"
  contactEmail="[email protected]"
  website="https://myapp.com"
  analyticsEnabled={analyticsEnabled}
  onAnalyticsToggle={(enabled) => setAnalyticsEnabled(enabled)}
  onNavigateToLegal={(type) => handleLegalNavigation(type)}
/>

Theming

Theme Context

The ThemeProvider provides theme management with automatic system theme detection.

import { useTheme } from 'gmblayout';

function MyComponent() {
  const { theme, isDark, mode, setMode, toggleTheme } = useTheme();
  
  return (
    <View style={{ backgroundColor: theme.colors.background }}>
      <Text style={{ color: theme.colors.foreground }}>
        Current theme: {mode}
      </Text>
    </View>
  );
}

Theme Modes

• light - Light theme
• dark - Dark theme
• system - Follows system preference (default)

Custom Themes

You can extend the default themes:

import { lightTheme, darkTheme } from 'gmblayout';

const customLightTheme = {
  ...lightTheme,
  colors: {
    ...lightTheme.colors,
    primary: '#your-color',
  }
};

Internationalization

Language Context

The LanguageProvider handles language switching and translations.

import { useLanguage } from 'gmblayout';

function MyComponent() {
  const { language, setLanguage, t } = useLanguage();
  
  return (
    <View>
      <Text>{t('common.hello')}</Text>
      <Button onPress={() => setLanguage('de')}>
        Switch to German
      </Button>
    </View>
  );
}

Supported Languages

• de - Deutsch (German)
• en - English
• fr - Français (French)
• it - Italiano (Italian)

Hybrid Translation System

The package uses a hybrid translation system:

• Package Translations: Universal UI elements (buttons, legal texts, etc.)
• App Translations: Navigation, countries, categories, etc.

import { LanguageProvider } from 'gmblayout';

const appTranslations = {
  de: {
    'nav.home': 'Startseite',
    'nav.profile': 'Profil',
    'countries.germany': 'Deutschland'
  },
  en: {
    'nav.home': 'Home',
    'nav.profile': 'Profile',
    'countries.germany': 'Germany'
  }
};

<LanguageProvider appTranslations={appTranslations}>
  {/* Your app */}
</LanguageProvider>

Adding Translations

The package includes comprehensive translations for legal content, UI elements, and common terms. You can extend them by providing custom translation keys in your app.

API Reference

ThemeProvider Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | ReactNode | - | Child components |

LanguageProvider Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | ReactNode | - | Child components | | appTranslations | Record<SupportedLanguage, Record<string, string>> | - | App-specific translations |

Header Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | title | string | - | Header title | | subtitle | string | - | Header subtitle | | onMenuPress | () => void | - | Menu button press handler | | rightContent | ReactNode | - | Custom right content | | showThemeToggle | boolean | true | Show theme toggle | | showLanguageToggle | boolean | true | Show language toggle | | logo | ReactNode | - | Custom logo component |

Button Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | ReactNode | - | Button content | | onPress | () => void | - | Press handler | | variant | ButtonVariant | 'default' | Button style variant | | size | ButtonSize | 'default' | Button size | | disabled | boolean | false | Disabled state | | style | ViewStyle | - | Custom styles | | textStyle | TextStyle | - | Custom text styles |

CookieBanner Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | visible | boolean | - | Whether banner is visible | | onAccept | () => void | - | Accept cookies handler | | onReject | () => void | - | Reject cookies handler | | onOpenPrivacy | () => void | - | Open privacy policy handler | | onOpenCookiePolicy | () => void | - | Open cookie policy handler | | onLegalModalClosed | () => void | - | Legal modal closed handler | | appName | string | 'App' | Application name | | appVersion | string | '1.0.0' | Application version |

LegalModal Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | visible | boolean | - | Whether modal is visible | | onDismiss | () => void | - | Dismiss handler | | type | 'agb' | 'impressum' | 'datenschutz' | 'cookie-policy' | - | Legal content type | | appName | string | 'App' | Application name | | appVersion | string | '1.0.0' | Application version |

Settings Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | appName | string | 'App' | Application name | | appVersion | string | '1.0.0' | Application version | | contactEmail | string | - | Contact email | | contactPhone | string | - | Contact phone | | website | string | - | Website URL | | analyticsEnabled | boolean | false | Analytics enabled state | | onAnalyticsToggle | (enabled: boolean) => void | - | Analytics toggle handler | | onNavigateToLegal | (type: string) => void | - | Legal navigation handler |

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT © Gino Berardone

Support

For support, email [email protected] or create an issue on GitHub.