Problem with react-native-paper Theme using Expo and Stack Navigation

Question

I'm working with Expo to create a mobile app with react native, I'm trying to include styles with react-native-paper and applying a custom theme to the whole project, but it doesn't apply any changes from DefaultTheme, DarkTheme, or custom theme.

The only value that changes is the "primary" color, the underline in the InputText in my screenshot.

Getting Started Documentation

Theming Documentation

Login Screen

import React from 'react'
import { View, Text, StatusBar } from 'react-native'
import { TextInput } from 'react-native-paper'

const LoginScreen = () => {
  const [text, setText] = React.useState('')
  return (
    <View style = {{flex: 1, alignItems:'center'}} >
      <StatusBar barStyle="light" />
      <View style = {{marginTop: '10%', width: '80%'}}>
      <Text style = {{fontWeight: 'bold', fontSize: 30}}>Inicia Sesión</Text>
      <Text>¡Hola! Es un gusto verte de nuevo.</Text>
        <Text style = {{color: '#fcd580', fontWeight: 'bold', marginTop: 50}}>Correo electrónico</Text>
        <TextInput
          style = {{backgroundColor: null}}
          value = {text}
          placeholder = 'ejemplo@email.com'
          //placeholderTextColor = 'white'
          selectionColor = '#fcd580'
          outlineColor = '#fcd580'
          underlineColor = 'white'
        />
        <Text style = {{color: '#fcd580', fontWeight: 'bold', marginTop: 20}}>Contraseña</Text>
        <TextInput
          style = {{backgroundColor: null}}
          value = {text}
          placeholder = 'Contraseña?'
          //placeholderTextColor = 'white'
          underlineColor = 'white'
          selectionColor = '#fcd580'
          outlineColor = 'white'
          secureTextEntry
        />
      </View>
    </View>
  )
}

export default LoginScreen

Stack Navigation

import React from 'react'
import { createStackNavigator } from '@react-navigation/stack'
import LoginScreen from '../screens/LoginScreen'

const LoginRegisterStack = () => {
  return (
    <Stack.Navigator >
      <Stack.Screen name = 'Login' component = {LoginScreen} 
        options ={{headerShown: false}}
      />
      <Stack.Screen name = 'Register' component = {RegisterScreen}/>
    </Stack.Navigator>
  )
}

export { LoginRegisterStack }

App.js

import React from 'react'
import { NavigationContainer } from '@react-navigation/native';
import { LoginRegisterStack } from './routes/MyRoutes'
import store from './store/store';
import { Provider } from 'react-redux';
import { Provider as PaperProvider } from 'react-native-paper';
import MainTheme from './theme/MainTheme';

export default function App(){
  return(
    <Provider store={store}>
      <PaperProvider theme ={MainTheme}>
        <NavigationContainer>
          <LoginRegisterStack/>
        </NavigationContainer>
      </PaperProvider>
    </Provider>
  );
}

Custom Theme (using random colors to test)

import { DefaultTheme } from 'react-native-paper'
import { black, pink50 } from 'react-native-paper/src/styles/colors'
import type { Theme } from 'react-native-paper/src/types'

const MainTheme: Theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: '#fcd580',
    background: black,
    text: pink50,
  },
};

export default MainTheme

score 2 · Answer 1 · answered Jan 17 '22 at 09:10

Actually react-native-paper theme is applied on react-native-paper elements only. So to change the text color, simply import the text from react-native-paper instead of react-native. Also the backgroundColor will change for only the react-native elements. So if you want to change the backgroundColor of the main screen, use react-navigation theming (if using react-navigation).

Problem with react-native-paper Theme using Expo and Stack Navigation

1 Answers1