Theming via React Native Paper

Question

I'm trying to set some color properties to the assigned theme in the class/function. I've got it working with react-native-paper and some theming, but only in this first class:

export default class App extends React.Component {

  state = {
    theme : yellowDark,
  }

  render() {
    return (
    <PaperProvider theme={this.state.theme}>

    <NavigationContainer>
      <Tab.Navigator screenOptions={{
        tabBarShowLabel: false,
        headerShown: false,
        tabBarStyle: {
          backgroundColor: '#212121',
          borderTopWidth: 0,
          height: 50,
        }
      }}>

        <Tab.Screen name={"Workout"} component={WorkoutScreen} options={{
          tabBarIcon: ({ focused }) => (
            <View style={{
              position: 'absolute',
              top: '30%'
            }}>
              <FontAwesome5
                name="dumbbell"
                size={20}
                color={focused ? this.state.theme.colors.primary : '#AAAAAA'}
              ></FontAwesome5>
            </View>
          )
        }}></Tab.Screen>

      </Tab.Navigator>
    </NavigationContainer>
    </PaperProvider>
  );
 }
}

Here's the theme I'm talking about :

const yellowDark = {
  ...DefaultTheme,
  roundness: 2,
  colors: {
    ...DefaultTheme.colors,
    primary: '#F3AF21',
  }
};

How do I go about importing this same theme and its state to other functions in the file? Here's one for example:

function AnalyticsScreen() {
  return (
    <SafeAreaView style={styles.container}>

      <Header
        leftComponent={() => renderLogoIcon()}
        rightComponent={{ icon: 'more-vert', color: '#F3AF21', size: 30, iconStyle: { color: '#F3AF21' } }}
        centerComponent={{ text: 'Analytics', style: { color: '#F3AF21', fontSize: 20 } }}
        containerStyle={{ backgroundColor: '#212121', borderBottomWidth: 0, height: 80 }}
      />

      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

I've looked into passing props, etc, but no luck. I want to eventually create a button that changes the theme, so each class/function should be tied together and change themes at the press of one button.

How would this work? Thanks

score 0 · Answer 1 · answered Sep 11 '21 at 05:57

0

You can use the useTheme hook provided by react-native-paper.

import * as React from 'react';
import { useTheme } from 'react-native-paper';

function MyComponent(props) {
  const { colors } = useTheme();
  return <Text style={{ color: colors.primary }}>Yo!</Text>;
}

Reference: https://callstack.github.io/react-native-paper/theming.html#using-the-theme-in-your-own-components

answered Sep 11 '21 at 05:57

Prateek Goyal

474
4
12

How to get `colors` on the class component instead function component? – Binh Ho Nov 29 '21 at 05:01
One way would be to use HOC. Ref link - https://stackoverflow.com/a/69010052/6578256 – Prateek Goyal Nov 29 '21 at 06:30

score 0 · Answer 2 · answered Jun 21 '23 at 05:03

It's really simple, all you need to do is :

import { useTheme } from "react-native-paper";
function AnalyticsScreen() {

    theme = useTheme();  // this method returns your current theme;

    return (
        <Button style={{
            backgroundColor:theme.colors.primary // you can access colors like this
        }}>
            Click Me!
        </Button>
    );
}

Theming via React Native Paper

2 Answers2