react-native-ui-lib: Dark mode view modifiers no longer working

It shouldn’t be this hard to enable dark mode.

After reading this thread and trying most solutions proposed here, nothing has worked on my detached expo project, so I think its time for me to abandon this library. The components look great but the documentation is not great (and it also lacks dark mode!) and to make things worse the APIs are not intuitive.

I don’t see why this couldn’t be abstracted into a single theme builder function with a more traditional context provider type of solution

// App.tsx
const theme = createTheme({
  mode: 'light', // or 'dark'
  lightColors: {
    tertiary: '#124789',
    accent: '#f98652',
    surface: '#0990763',
  },
  darkColors: {
    tertiary: '#124789',
    accent: '#908652',
    surface: '#0990763',
  },
  components:{
    Button:(props,theme)=>({
      containerStyle:{
        backgroundColor:theme.colors.tertiary
      }
    })
  }
});

// Wrap with ThemeProvider
const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Component />
    </ThemeProvider>
  );
};

still waiting for any working solution? I tried everything above, but nothing works

Using Expo here. I did all of the suggested fixes however, even with an app reload, the colors still don’t change at all when I change to dark mode on iOS. Any ideas? package: 6.25.0 expo: 47.0.6 react: 18.1.0 react-native: 0.70.5

@lidord-wix Let’s add this to our docs. Under Foundation -> Colors

@lidord-wix thanks for the response. I’ll go with the UX solution for now. Is the future solution something that’s already in progress. If not, is there a way I can contribute to help speedup this solution. I think this will be a big win

Struggled through the documentation, simply adding the require to set the scheme to default did not work in a new bare Expo application, and since import statements are evaluated before requires, the setConfig() function does not work. The trick was to move the require into a new file, and import that file before anything else.

The following did work:

1. create a file called setup.js besides the App.js file
2. import the ./setup file before all the other imports in the App.js file.

setup.js

require('react-native-ui-lib/config').setConfig({appScheme: 'default'});

App.js line 1

import './setup';

This worked for me, I am using the latest version as of today (7.5.1) and using expo + expo router.

I went and put the require('react-native-ui-lib/config').setConfig({appScheme: 'default'}); directly into my index.js, and now it looks like this:

// index.js
require('react-native-ui-lib/config').setConfig({appScheme: 'default'});
import "expo-router/entry";

Thanks @uyasarkocal for making me realise that I indeed needed to do serInterfaceStyle": "automatic" and of course @mr-menno for the well explained solution.

@MrX1068, @josegiufrida Did you try the solution from this comment?

Dark mode

any support for dark mode, still I’m not able to use dark mode for the latest versions.

in my case if I didn’t use any wrapper like Redux or other then this dark mode background is applying for View. If I use redux provider it’s not applying the dark background.

Struggled through the documentation, simply adding the require to set the scheme to default did not work in a new bare Expo application, and since import statements are evaluated before requires, the setConfig() function does not work. The trick was to move the require into a new file, and import that file before anything else.

The following did work:

1. create a file called setup.js besides the App.js file
2. import the ./setup file before all the other imports in the App.js file.

setup.js

require('react-native-ui-lib/config').setConfig({appScheme: 'default'});

App.js line 1

import './setup';

@DeveloperTheExplorer I was having the same issue, If you are using expo don’t forget to add
"userInterfaceStyle": "automatic" to your app.json. Also it is crucial to install “expo-system-ui” package when using development builds.