@multichoice/mydstv-gluestack

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

Installation

npm install @multichoice/mydstv-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 MyDSTV branding.

import { MyDSTVButton } from '@multichoice/mydstv-gluestack';

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

Input

Form input components with MyDSTV styling.

import { MyDSTVInput } from '@multichoice/mydstv-gluestack';

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

Card

Card components for displaying content.

import { MyDSTVCard } from '@multichoice/mydstv-gluestack';

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

GlueStack UI Provider

Required provider component for GlueStack UI functionality.

import { GluestackUIProvider } from '@multichoice/mydstv-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/mydstv-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