CODEWITHSUNDEEP
reactjsreact-nativereact-native-paper
Joseph
Joseph

Reputation: 7785

Accessing Theme Color in React Native

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

Upvotes: 0

Views: 3601

Answers (4)

MOHD SAQUIB
MOHD SAQUIB

Reputation: 41

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

Upvotes: 0

Ellysson Miike
Ellysson Miike

Reputation: 133

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

Upvotes: 5

Sameer Kumar Jain
Sameer Kumar Jain

Reputation: 2135

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

Upvotes: 3

Oliver D
Oliver D

Reputation: 2889

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

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

Upvotes: 0

Related Questions