pa-react-themes/README.md

React Native Themes

## To add themes to React Native

### Installation: 

```console
npm install pa-react-themes
```

### Updates:

```console
npm update --save pa-react-themes
```

### Initialization:

```console
npx pa-react-themes init
```

### Generated Files:

```
project_root_folder
|-- theme.app.example.js
|-- theme.component.example.js
|-- theme.config.js
|-- theme.css.example.json
|-- theme.shorcuts.js
|-- theme.tw.example.json
```

### App.js Example:

```javascript
import { Platform, useColorScheme } from "react-native";
import { ThemeProvider } from 'pa-react-themes';
import MyComponent from './theme.component.example';

export default function App() {
  return (
    <ThemeProvider mode={useColorScheme()} platform={Platform.OS}>
      <MyComponent /> 
    </ThemeProvider>
  );
}
```

### Component Example:

```javascript
import { Pressable, Text, View } from 'react-native'
import { Theme } from './theme.shorcuts'

export default function MyComponent() {
  const handlePress = () => {
      console.log("Button Pressed")
  }

  return (
    <View>
      <Text style={Theme.Text('h1')}>This is a Text

      <Pressable style={Theme.Button('primary', 'background')} onPress={handlePress}>
        <Text style={Theme.Button('primary', 'text')}>This is a Button 
      </Pressable>

      <Pressable style={Theme.Button('secondary').background} onPress={handlePress}>
        <Text style={Theme.Button('secondary').text}>This is another Button 
      </Pressable>
    </View>
  )
}
```

### Documentation

The link to the documentation is shown when executing the init since it is located in the module folder.<br>
At the moment in Spanish because we are making improvements, soon in English but you can translate it with Google Translator...<br>

***

### Feedbacks

Any comments or improvements can write to us at ebfash2@hotmail.com, Thank you!

***