@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

``bash
npm install @multichoice/mydstv-gluestack
`

Peer Dependencies

This package requires the following peer dependencies:

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

Components

$3

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


Click me

`

$3

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

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

$3

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



Card Title


Card content goes here


`

$3

`typescript
import { GluestackUIProvider } from '@multichoice/mydstv-gluestack';

function App() {
return (

{/ Your app content /}

);
}
`

Setup

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

`typescript
import React from 'react';
import { GluestackUIProvider } from '@multichoice/mydstv-gluestack';

export default function App() {
return (

{/ Your app components /}

);
}
`

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:

`bash
npm run storybook
``

Requirements

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

License

MIT