@multichoice/gotv-gluestack

GOTV GlueStack components for the Multichoice Design System. This package provides React Native components built with GlueStack UI for the GOTV brand.

Installation

npm install @multichoice/gotv-gluestack

Peer Dependencies

This package requires the following peer dependencies:

npm install react react-native @multichoice/core @gluestack-ui/core @gluestack-ui/themed @gluestack-ui/utils nativewind react-native-svg react-native-reanimated

Components

Button

A customizable button component with GOTV branding.

import { GOTVButton } from '@multichoice/gotv-gluestack';

<GOTVButton variant="primary" size="md">
  Click me
</GOTVButton>

Input

Form input components with GOTV styling.

import { GOTVInput } from '@multichoice/gotv-gluestack';

<GOTVInput 
  placeholder="Enter your email"
  variant="outline"
  size="md"
/>

Card

Card components for displaying content.

import { GOTVCard } from '@multichoice/gotv-gluestack';

<GOTVCard variant="elevated" size="md">
  <GOTVCard.Header>
    <Text>Card Title</Text>
  </GOTVCard.Header>
  <GOTVCard.Body>
    <Text>Card content goes here</Text>
  </GOTVCard.Body>
</GOTVCard>

GlueStack UI Provider

Required provider component for GlueStack UI functionality.

import { GluestackUIProvider } from '@multichoice/gotv-gluestack';

function App() {
  return (
    <GluestackUIProvider>
      {/* Your app content */}
    </GluestackUIProvider>
  );
}

Setup

1. Install the package and its dependencies
2. Wrap your app with the GluestackUIProvider
3. Import and use the components

import React from 'react';
import { GluestackUIProvider } from '@multichoice/gotv-gluestack';

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

Styling

This package uses NativeWind (Tailwind CSS for React Native) for styling. Make sure to configure NativeWind in your project:

1. Install NativeWind: npm install nativewind
2. Configure your tailwind.config.js
3. Set up the babel plugin

Storybook

View all components in Storybook:

npm run storybook

Requirements

• React 18+
• React Native 0.72+
• Node.js 18+

License

MIT