https://github.com/s-fabian/react-native-alam

A tailwind-like solution for react native
https://github.com/s-fabian/react-native-alam

react-native styling tailwind tailwindcss

Last synced: about 1 month ago
JSON representation

A tailwind-like solution for react native

• Host: GitHub
• URL: https://github.com/s-fabian/react-native-alam
• Owner: s-fabian
• License: mit
• Created: 2023-11-11T18:13:24.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-07-30T08:57:51.000Z (5 months ago)
• Last Synced: 2024-07-30T12:05:21.186Z (5 months ago)
• Topics: react-native, styling, tailwind, tailwindcss
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-native-alam
• Size: 1.7 MB
• Stars: 5
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-alam

A tailwind-like solution for react native

Click _[here](./ATTR.md)_ to see all properties / alams.

## Installation

```sh

npm install --save react-native-alam

yarn add react-native-alam

pnpm add react-native-alam

bun add react-native-alam

pip install react-native-alam # wait

```

## Usage

`alam.tsx`

```tsx

import createAlam from 'react-native-alam';

export const Alam = createAlam({});

```

`component.tsx`

```tsx

import { Alam } from './alam';

function MySuperComponent({ style }: { style?: Style }) {

  return (

    

      

        Hello World!

      

    

  );

}

export default Alam.convert(MySuperComponent);

```

`index.tsx`

```tsx

import MySuperComponent from './component';

import { Alam } from './alam';

export default function App() {

  return (

    

      

    

  );

}

```

## Advanced Usage

`alam.tsx`

```tsx

import createAlam from 'react-native-alam';

const extended = {

  'custom-extended': (_: true, style: Style) => ({

    color: 'red',

    ...style,

  }),

};

export const Alam = createAlam(extended);

```

`index.tsx`

```tsx

import { Alam } from './alam';

export default function App() {

  return (

    

      

        Red Text

      

    

  );

}

```

## With colors

`root.tsx`

```tsx

import { ThemeProvider, Appearance } from 'react-native-alam';

export const enum Colors {

  Background = 'background',

  Foreground = 'foreground',

  Primary = 'primary',

}

export default function Root({ component }) {

  const isDarkMode = Appearance.getColorScheme() === 'dark';

  const theme: Record = isDarkMode

    ? {

        background: '#000000',

        foreground: '#eeeeee',

        primary: '#eee8aa',

      }

    : {

        background: '#ffffff',

        foreground: '#111111',

        primary: '#daa520',

      };

  return {component};

}

```

`index.tsx`

```tsx

import { Alam } from './alam';

import { Colors } from './root';

export default function App() {

  return (

    

      Primary Text

      Foreground Text

    

  );

}

```