Installation

Get Prizmux installed and ready to use in your project. This guide will walk you through the setup process.

Prerequisites

Before installing Prizmux, ensure you have the following installed:

• React Native 0.60 or higher
• React 16.8 or higher
• Node.js 14 or higher

Install the Package

Choose your preferred package manager to install Prizmux:

npm install prizmux

npm install prizmux

yarn add prizmux

yarn add prizmux

pnpm add prizmux

pnpm add prizmux

If you're using a separate client and server setup, make sure to install Prizmux in all the parts of your project that need it.

Basic Setup

Once installed, you can start using Prizmux components immediately:

import { Button } from 'prizmux'

export default function App() {
  return (
    <Button 
      title="Press Me" 
      onPress={() => console.log('Pressed!')}
    />
  )
}

import { Button } from 'prizmux'

export default function App() {
  return (
    <Button 
      title="Press Me" 
      onPress={() => console.log('Pressed!')}
    />
  )
}

TypeScript Support

Prizmux comes with full TypeScript support out of the box. All components are fully typed with JSDoc comments for better IDE autocomplete and type safety:

import { Button, ButtonProps } from 'prizmux'

const handlePress: ButtonProps['onPress'] = () => {
  console.log('Button pressed')
}

export default function App() {
  return <Button title="Press Me" onPress={handlePress} />
}

import { Button, ButtonProps } from 'prizmux'

const handlePress: ButtonProps['onPress'] = () => {
  console.log('Button pressed')
}

export default function App() {
  return <Button title="Press Me" onPress={handlePress} />
}

Peer Dependencies

Prizmux requires very few peer dependencies, keeping your bundle light and lean:

• react-native — The React Native framework
• react — React library
• react-native-gesture-handler — For gesture support (optional, but recommended)

That's it! No heavy dependencies to worry about.

Troubleshooting

Component not found

Make sure you're importing from the main prizmux package:

// ✅ Correct
import { Button } from 'prizmux'

// ❌ Wrong
import { Button } from 'prizmux/lib/components'

// ✅ Correct
import { Button } from 'prizmux'

// ❌ Wrong
import { Button } from 'prizmux/lib/components'

TypeScript errors

Ensure your tsconfig.json includes the following compiler options:

{
  "compilerOptions": {
    "strict": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "moduleResolution": "node"
  }
}

{
  "compilerOptions": {
    "strict": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "moduleResolution": "node"
  }
}

Next Steps

Great! You're all set up. Now explore the components documentation to learn how to use each component in your project.

Still having issues?

Check out the GitHub Issues or open a new discussion on our Community.

Next Steps

• Explore Components to see what's available
• Read the Philosophy behind Prizmux
• Check out Examples for real-world usage patterns