# babel-plugin-twrnc-extract

> Use className in your React Native project with twrnc

Latest version **0.0.7** (published 2022-11-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-twrnc-extract
pnpm add babel-plugin-twrnc-extract
yarn add babel-plugin-twrnc-extract
bun add babel-plugin-twrnc-extract
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2022-11-02 |
| First published | 2022-10-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | makaronma |
| Maintainers | makaronma |
| Keywords | babel, babel-plugin, react-native, tailwind |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-twrnc-extract
- Repository: https://github.com/makaronma/babel-plugin-twrnc-extract
- Homepage: https://github.com/makaronma/babel-plugin-twrnc-extract#readme
- Issues: https://github.com/makaronma/babel-plugin-twrnc-extract/issues
- npm.io page: https://npm.io/package/babel-plugin-twrnc-extract

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.0.7 (latest) — 2022-11-02
- 0.0.6 — 2022-11-02
- 0.0.5 — 2022-11-01
- 0.0.4 — 2022-10-31
- 0.0.3 — 2022-10-31
- 0.0.2 — 2022-10-30
- 0.0.1 — 2022-10-30

## README

# babel-plugin-twrnc-extract

This plugin let you use className in your React Native project with twrnc.

Try out the example app [here](https://github.com/makaronma/babel-plugin-twrnc-extract/tree/main/example).

## Usage

```tsx
import React from 'react';

const YourComponent = () => {
  return (
    <View className="bg-black flex-1">
      <Text className="text-white">Hello World!</Text>
    </View>
  );
}

```

## Prerequisites

Make sure you have installed [twrnc](https://github.com/jaredh159/tailwind-react-native-classnames) in your react native project.

npm:

```shell
npm i twrnc
```

yarn:

```shell
yarn add twrnc
```

## Installation

npm:

```shell
npm i -D babel-plugin-twrnc-extract
```

yarn:

```shell
yarn add -D babel-plugin-twrnc-extract
```

## Use

You should have a `tw.ts` or `tw.js`. See the [documentation](https://github.com/jaredh159/tailwind-react-native-classnames#customization) for example.

```js
// lib/utils/tw.ts
import { create } from 'twrnc';

// create the customized version...
const tw = create(require(`../../tailwind.config.js`)); // <- your path may differ

// ... and then this becomes the main function your app uses
export default tw;
```

Add it as a plugin in `.babelrc`:

```js
{
  "plugins": [
    [
      "twrnc-extract", 
      {
        "twPath": "lib/utils/tw",
        "acceptedJsxIdentifiers": ["Text", "View", "Image"],
      }
    ],
    // other plugins. . .
  ]
}
```

or Add it as a plugin in `babel.config.js`:

```js
module.exports = (api) => {
  api.cache(true);
  return {
    plugins: [
      [
        "twrnc-extract", 
        {
          twPath: "lib/utils/tw", // default "lib/tw"
          acceptedJsxIdentifiers: ["Text", "View", "Image"], // default ["Text", "View", "Image"]
        }
      ],
      // other plugins. . .
    ],
  };
};
```

Then, Add a global type file e.g. `rn.d.ts`:

```typescript
import "react-native";

declare module "react-native" {
  interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
    className?: string;
  }

  interface ImagePropsBase {
    className?: string;
  }

  interface ViewProps {
    className?: string;
  }

  interface TextProps {
    className?: string;
  }

  interface SwitchProps {
    className?: string;
  }

  interface InputAccessoryViewProps {
    className?: string;
  }

  interface TouchableWithoutFeedbackProps {
    className?: string;
  }
}
```

## How it works

### In

```js
const YourComponent = () => {
  return (
    <View className="bg-black flex-1">
      <Text className="text-white">Hello World!</Text>
    </View>
  );
}
```

### Out

```js
import tw from "./lib/tw";

const YourComponent = () => {
  return (
    <View style={twStyles._attr_str}>
      <Text style={twStyles._attr2_str}>Hello World!</Text>
    </View>
  );
};

const twStyles = {
  _attr_str: tw`bg-black flex-1`,
  _attr2_str: tw`text-white`
};
```

---
_Source: https://npm.io/package/babel-plugin-twrnc-extract · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._