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);

Answer 1

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);

Answer 2

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));

Answer 3

你从 react-native 导入withTheme ，它应该从react-native-paper导入

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

Answer 4

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,
  },
}));