@react-native-paper-abstracted/cli

React Native Paper Abstracted (RNPA)

Introduction

React Native Paper Abstracted (RNPA) is a package that allows you to use only the components you need from React Native Paper. This helps keep your app size small while providing endless customization options.

---

Installation

Using the CLI

The command-line interface (CLI) tool lets you set up and install components effortlessly.

npm install @react-native-paper-abstracted/cli

npx rnpa init

---

Manual Installation

RNPA can be used without installing the CLI tool.

npm i @callstack/react-theme-provider color react-native-safe-area-context

Navigate to the Explorer tab and add the following folders/files to your project while maintaining the correct file structure:

• /core
• /styles
• /utils
• /types.tsx
• /constants.tsx

Non-Expo Projects

For non-Expo projects, install and link react-native-vector-icons (specifically, MaterialCommunityIcons):

npm install @react-native-vector-icons/material-icons
npm i @types/react-native-vector-icons

Expo Projects

If you use Expo, vector icons are already included. However, ensure your babel.config.js or .babelrc file (if they exist) includes babel-preset-expo:

.babelrc

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

---

How to Use

Using the CLI

To initialize the project, run:

npx rnpa init

To add components, use the add command followed by the component name:

npx rnpa add <component-name>

You can find available components and their commands in the Explorer tab.

---

Manual Usage

Visit the Explorer tab and copy the desired component.

---

Wrap your root layout with the PaperProvider component:

import { Stack } from 'expo-router';
import PaperProvider from '@/components/core/PaperProvider';

export default function RootLayout() {
  return (
    <PaperProvider>
      <Stack>
        <Stack.Screen name="index" options={{headerShown: false}}/>
      </Stack>
    </PaperProvider>
  );
}

Now, you can import and use components as usual:

import * as React from 'react';
import Button from '@/components/Button/Button';
import { View } from 'react-native';

const HomeScreen = () => (
  <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap' }}>
    <Button style={{ width: 'auto' }} mode="contained">
      Press me
    </Button>  
  </View>
);

export default HomeScreen;