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;