CODEWITHSUNDEEP
iosreact-nativeios-darkmodereact-native-paper
Ajeng
Ajeng

Reputation: 37

React Native Paper Dark Theme on IOS

I want to use react-native-paper dark theme on my apps, however, all my <View> are still had a white background and causing all the Text component unreadable because the text turns white in dark mode. I didn't use custom theming since the docs mention that:

If you don't use a custom theme, Paper will automatically turn animations on/off, depending on device settings.

This is my code in App.js:

import React from 'react';
import {Provider as PaperProvider} from 'react-native-paper';
import Home from './src/Home';

const App = () => {
  return (
    <PaperProvider>
      <Home />
    </PaperProvider>
  );
};

export default App;

This is in my Home.js:

import React from 'react';
import {View} from 'react-native';
import {Appbar, Card, Title} from 'react-native-paper';

const Home = () => {
  return (
    <View style={{flex: 1}}>
      <Appbar.Header>
        <Appbar.BackAction onPress={() => console.log('back')} />
        <Appbar.Content title="Title" subtitle={'Subtitle'} />
      </Appbar.Header>
      <View>
        <Title>Hello World</Title>
        <Card
          style={{margin: 15, padding: 15}}
          onPress={() => console.log('press card')}>
          <Title>This is Card</Title>
        </Card>
      </View>
    </View>
  );
};

export default Home;

and this is the result: The view still white and the Title also white due to dark mode

It working fine on android

The text turns white because it is the behavior of dark mode, but why my <View> is still white? This is only happening on iOS, it works fine on android.

This is a new react native project, and based on documentation in react-native-paper it will turn the dark theme automatically. So, I need help if I missed something in setting up this project on iOS. Any help would be appreciated.

Upvotes: 1

Views: 1509

Answers (1)

David Richards
David Richards

Reputation: 81

If you do not specify a custom theme, Paper will use the DefaultTheme which is essentially a light theme. To employ a dark theme in your app, Paper provides a Material based DarkTheme. You can specify which theme to use within the Paper provider.

Complete example from the docs for DefaultTheme including customization:

import * as React from 'react';
import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
import App from './src/App';

const theme = {
  ...DefaultTheme,
  roundness: 2,
  colors: {
    ...DefaultTheme.colors,
    primary: '#3498db',
    accent: '#f1c40f',
  },
};

export default function Main() {
  return (
    <PaperProvider theme={theme}>
      <App />
    </PaperProvider>
  );
}

PaperProvider uses React Context. Theme can be accessed within components with the withTheme HOC or useTheme hook.

Upvotes: 2

Related Questions