Skip to main content

React Native - Global StyleSheet and Dark/Light Theme design approach

We use StyleSheet in almost all components. Generally there are three different approaches to changing component layout with React Native:

  1. Direct layout change in the component (e.g. text field)
  2. Create a StyleSheet section in each page
  3. Create a Global StyleSheet and reference in each component
Personally speaking, I do not recommend the first 2 options due to:
  1. maintenance and inconsistency approach in design between different components
  2. harder to transfer to a new project.
  3. with GlobalStyles, you can put on a separate windows for easy view and update as you work on different component
  4. apply the dark/light theme to the component directly through GlobalStyles without having to customize it for each page

Theme - Dark and Light theme with React Native with iOS, Android, Web, etc.

Warning: if you use Expo Debugging, the system will default to Light theme (at least on iOS). Remove Remote Debugging if you want the Dark Theme to show up.

In your Navigagor, apply the theme:
  • const scheme = useColorScheme();
  • <NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>

In the import section, import the useTheme:

import { useTheme } from '@react-navigation/native';

In the function section, you can use the colors from the theme similar to below:

  • const { colors } = useTheme();

To use the theme, you can access using the command colors.background (for background color), colors.text (for text color), etc.

Apply this concept suing the GlobalStyles stylesheet and you can use it on the stylesheet directly for all your projects - see the GlobalStyles section below.

Customized layout


Just a note, the first option could be used if you require flexibility in your component (where a conditional (if/else) needs to be used in your code or customized style needs to be applied to the component directly

  • <Icon style={{...GlobalStyles.icon, color: iconColor, fontSize: iconSize }} />
<- Customized is on the red-text

GlobalStyles StyleSheet and reference Dark/Light Theme

Credit: the idea on using GlobalStyle/props/and hook to support Dark and Light Theme comes from this page: link.

For global stylesheet, create a stylesheet on a specific folder: 

E.g. Add the file to the root folder: globalStyles.js

Add the code similar to be low in the file:

import { StyleSheet } from 'react-native';
import { useTheme } from '@react-navigation/native';
import React from 'react';

const getGlobalStyles = (props) => StyleSheet.create({
    container: {
        backgroundColor: props.colors.background,
    },
}

function useGlobalStyles() {
    const { colors } = useTheme();
    const styles = React.useMemo(() => getGlobalStyles({ colors }), [colors]);
    return styles;
}

export default useGlobalStyles;

In the component that you want to use the Global Style, import the StyleSheet:
import useGlobalStyles from '../globalStyles.js';

export default function Feed({ content, onProfileRequested, navigation }) {

Now to use the GlobalStyles in the component:

const globalStyles = useGlobalStyles();
<TouchableOpacity style={globalStyles.flatListRow} ....

That is about it... easy to use and edit!





 

Comments

Popular posts from this blog

Checked! Task Pro for Android

SMART task system that combine the best of task management methodologies Natively Built for Android! The best Task, Note, and Calendar Master from BlackBerry is now available on Android! Please scroll to near bottom to see information on the Smart Task system - most efficient approach to manage your tasks and projects. Android Store link ------------------------------------------------- Instructions: Checked! Task Pro Instruction ------------------------------------------------- Current features: Use Speech to text icon to automatically add new task and calendar entry: e.g. Meet John tomorrow (use keyword similar to Smart Add feature below). Smart Add featuring category and natural language parsing for extremely fast event creation: Dr appointment on Dec 1, 2016 at 5pm Pick up airport tomorrow Meet John next Monday at 5PM Email Shawn tomorrow @Tax Finish tax in 5 days // Tax is a category Superb fluid user interface. Ultimate task and project management application SMART task system -

Bartender Cocktails and Drink 30,000+ for BlackBerry 10

Calling all cocktails & drinks lovers! This is the most wanted intelligent Cocktails & Drinks recipe application. It contains 30,000+ easy-to-follow cocktails and drinks with photo capability. No internet/Wifi connection required! You can also search any drink recipes easily, or even add your own invented cocktails and drinks! 

New Site

Testing the new site! The focus will be on Project Portfolio Management and Software Development. Hope everyone's having a great day!