Accessing Theme Color in React Native

Question

I'm trying to access the primary color of the theme. I have a problem doing it since the error says "Cannot read property colors of undefined"

Pls check my code below.

import React, { memo } from "react";
import { StyleSheet, Text, withTheme } from "react-native";

const Header = ({ children }) => <Text style={styles.header}>{children}</Text>;

const styles = StyleSheet.create({
  header: {
    fontSize: 26,
    color: withTheme.colors.primary,
  },
});

export default memo(Header);

withTheme is not exported from react-native. – Sameer Kumar Jain Aug 30 '20 at 16:02 — Sameer Kumar Jain, Aug 30 '20 at 16:02

score 3 · Answer 1 · answered Oct 08 '21 at 02:24

You can do this creating a function called useStyles, then passing the theme object by argument.

Example:

import React, { memo } from "react";
import { StyleSheet, Text } from "react-native";
import { useTheme } from 'react-native-paper'; //or styled-components theme object 

const Header = ({ children }) => {

  const theme = useTheme();
  const styles = useStyles(theme);

  return <Text style={styles.header}>{children}</Text>;
}



const useStyles = theme => (StyleSheet.create(({
  container: {
    ...
  },
  header: {
    fontSize: 26,
    color: theme.colors.primary,
  },
  something: {
    ...
    backgroudColor: theme.colors.background,
  },
  other: {
    ...
    color: theme.colors.primary,
  },
)))


export default memo(Header);

Sameer Kumar Jain · Accepted Answer · 2020-08-30T16:55:46.963

you can use it like this in react-native-paper

import React, { memo } from "react";
import { StyleSheet, Text } from "react-native";
import { DefaultTheme } from 'react-native-paper';

const theme =  ({
    ...DefaultTheme,
    colors: {
        ...DefaultTheme.colors,
    }
});
const Header = ({ children }) => <Text style={styles.header}>{children}</Text>;

const styles = StyleSheet.create({
  header: {
    fontSize: 26,
    color: theme.colors.primary,
  },
});

export default memo(Header);

If you already have a theme defined and want to import it here then you can use withTheme HOC like below

import React, { memo } from "react";
import { StyleSheet, Text } from "react-native";
import { withTheme } from 'react-native-paper';

const Header = ({ theme, children }) => {
    const styles = StyleSheet.create({
        header: {
            fontSize: 26,
            color: theme.colors.primary,
        },
    });
    return (
        <Text style={styles.header}>{children}</Text>
    )
}

export default memo(withTheme(Header));

score 0 · Answer 3 · answered Aug 30 '20 at 16:05

0

You import withTheme from react-native, it should be imported from react-native-paper

import {withTheme} from "react-native-paper"

answered Aug 30 '20 at 16:05

Oliver D

2,579
6
37
80

It says cannot ready property 'primary' of undefined – Joseph Aug 30 '20 at 16:23

score 0 · Answer 4 · answered Dec 20 '22 at 16:59

You can write a hook generator like this

import { useTheme } from "@react-navigation/native"
import { useMemo } from "react";
import { StyleSheet } from "react-native";

export const makeStyles = (styles) => (props) => {
  const theme = useTheme();

  return useMemo(() => {
    const css = typeof styles === 'function' ? styles(theme, props) : styles;
    return StyleSheet.create(css);
  }, [props, theme]);

};

and then use it like this

const ListScreen = () => {
  const styles = useStyles();

  return (
    <View>
      <Text style={styles.text}>ListScreen</Text>
    </View>
  );
};

export default ListScreen;

const useStyles = makeStyles((theme, props) => ({
  text: {
    color: theme.colors.primary,
  },
}));

Accessing Theme Color in React Native

4 Answers4

Linked