To add themes to React Native

Installation:

npm install pa-react-themes

Updates:

npm update --save pa-react-themes

Initialization:

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:

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:

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. At the moment in Spanish because we are making improvements, soon in English but you can translate it with Google Translator...

Feedbacks

Any comments or improvements can write to us at [email protected], Thank you!