---

Work In Progress, though star this repo 😉

---

React Native Theme

React Native theme is a single source of truth for your App Design. It's a scalable theme for your React Native project. You can easily integrate it in your workflow, and modify entire look of your app in seconds. The basic idology can be implemented outside React Native realm.

✨ Inspiration

In entire app, colors, typography and values for margin/padding/height/width are typically defined in each component, which makes it hard to change. This theme module, defines all colors, typography and sizes at a single place, so that only few changes in value can change the overall look of the app.

Table of Contents

• theme.js - combine colors.js, typography.js, spacing.js & dimens.js into single module
• colors.js - where all colors used in entire app are defined
• typography.js - all typography related style are defined
• spacing.js - common padding/margin value defined
• dimens.js - component custom width/height are defined here

🚀 Getting Started

Instructions

• Copy the theme folder and place it in your APP.
• Copy Text component and paste it in your component folder.

Theme

Theme is implemented by creating sepearte file for colors, spacing, typography and combining it in single file, and accessing it using React Context. Follow below steps to import theme object in your component.

For Functional Component

import React, { useContext } from 'react';
import { ThemeContext } from './theme';
//...
const CustomComponent = props => {
    const theme = useContext(ThemeContext);
    //...
    return <View style={{ backgroundColor: theme.colors.background }} />
}

For Class Component

import React from 'react';
import { ThemeContext } from './theme';
//...
class CustomComponent  extends React.Component {
    static contextType = ThemeContext;
    //...
    render() {
        const theme = this.context;
        return <View style={{ backgroundColor: theme.colors.background }} />
   }
}

🎨 Colors

Color palette is inspired(stolen) from Google Material Design. There are two major colors primary which represents brand color and secondary which represents accent color.

Color Name	Color Use
primaryDark	To be used for status bar and for dark tint
primary	To be used as a background color for appbar(toolbar)
appBarTint	To be used for appbar title text, appbar icons color and for back button
secondaryLight	To be used for hover state
secondary	to be used as default button, checkbox, spinner, radio button and other component color
secondaryDark	to be used for active state
background	Every Screen will have this as his default background color
surface	To be used as a default background for all components, like Card, CardSection, List etc
border	Use it for card border
titleText	To be used for heading, subheading, label text
bodyText	To be used for normal text like paragraph
captionText	To be used for hint text component, or of less importance
success	Success messages and icons.
error	Error messages and icons.

TODO: Insert Image to showcase color palette visually.

If primary is dark make appBarTint color light, and vice versa. If surface is dark make titleText, bodyText & captionText light, and vice versa.

✔️ Do this

<View style={{ backgroundColor: theme.colors.background }}>
    <View style={{ borderColor: theme.colors.border }}>

❌ Don't do this

<View style={{ backgroundColor: '#222' }}>
    <View style={{ borderColor: '#eee' }}>

✒️ Typography

Name	value	variant
titleText	Use for the title of a screen(Toolbar) & the titles of Modal dialogs	bold
headingText	Use for card titles	bold
subheadingText	Use for new sections within cards	bold
bodyText	Default style	bold
labelText	Use for form field and input elements	bold
captionText	Use the for help/hint text	bold

TODO: Insert image depicting different text style used in Screen

A custom Text component has been defined in component folder, which uses typography styles from typography.js. Use this Text component to understand how typography is implemented.

<Text type="heading">This is a Heading</Text>
<Text type="subheading">This is a SubHeading</Text>
<Text type="body">This is a Body</Text>
<Text>Default is a Body</Text>
<Text type="label">This is a label</Text>
<Text type="caption">This is a caption</Text>
---
<Text type="heading" bold>This is a Bold Heading</Text>
<Text type="subheading" bold>This is a Bold SubHeading</Text>
<Text type="body" bold>This is a Bold Body</Text>
<Text type="label" bold>This is a Bold label</Text>
<Text type="caption" bold>This is a Bold caption</Text>

✔️ Use custom Text component in App

import { Text } from './component/Text'; // import Text component from component folder
//...
return (
    <View>
        <Text>Text which is theme aware</Text>
    </View>
);

❌ Don't do this

import { Text } from 'react-native';

📏 Spacing

Spacing should be consistent and whitespace thought of as a first class technique up there with color and typefaces. Define preset for spacing which will be used for padding and margin value.

Name	Value
tiny	4
small	8
medium	12
large	16

If required, add more like extraLarge etc.

✔️ Do this

<View style={{ padding: theme.spacing.large }}>
    <Text style={{ margin: theme.spacing.tiny }}>

❌ Don't do this

<View style={{ padding: 16 }}>
    <Text style={{ margin: 4 }}>

📐 Dimensions

App contain several cutom values from image height, width to a view border radius. Define all numerical sizes used in app in dimens file.

✔️ Do this

• Define custom sizes in dimens file

{
    customComponentHeight: 234,
    customComponentWidth: 345,
    //...
}

• In you CustomComponent access the property like

<Image style={{
        width: theme.dimens.customComponentWidth,
        height: theme.dimens.customComponentHeight,
    }}>

🤝 Contributing

⭐ If you like what you see, star us on GitHub.

Finding bugs, sending pull requests or improving docs - any contribution is welcome and highly appreciated. To get started, head over to our contribution guidelines. Thanks!

📚 Projects using this theme module

• MageCart: E-commerce App
• magento-react-native

👨 Authors

• Sanjeev Yadav - alexakasanjeev

See also the list of contributors who participated in this project.

📄 License

This project is licensed under the GNU v3 Public License License - see the LICENSE.md file for details.

💡 Acknowledgements

• Google Material Design created by Google
• Reaction Commerce Design System create by Reaction commerce
• README-Template.md by Billie Thompson