How to implement react-native-dark-mode in ios - ios

Question

Hi all i want to try implement react-native-dark-mode but not worked in my project.
"react-native": "0.61.5"
I Already try like this :
import { useDarkMode } from 'react-native-dark-mode'
export default class Login extends Component {
render(){
const isDarkMode = useDarkMode() // i think this make error
return(
<View style={{ backgroundColor: isDarkMode ? 'black' : 'white' }}></View>
)
}
}
This my error
error-output
any solutions?

Answer 1

In your scenario react hooks can only be used inside the functional components
Example of functional component usage:
import { useDarkMode } from 'react-native-dark-mode'
function Component() {
const isDarkMode = useDarkMode()
return <View style={{ backgroundColor: isDarkMode ? 'black' : 'white' }} />
}
Example of class component usage:
You can play around with DarkModeContext. Just make sure to wrap your application in a DarkModeProvider with no props to avoid getting a value of current.
1 - Setup context provider for the app.
// App.js or top of the hierarchy in your app
import React, {Component} from 'react';
import {DarkModeProvider} from 'react-native-dark-mode';
export default class App extends Component {
render() {
return (
<DarkModeProvider>
<YourApp />
</DarkModeProvider>
);
}
}
2 - Use the context with contextType or context consumer.
// class based component with contextType
import React, {Component} from 'react';
import {Text} from 'react-native';
import {DarkModeContext} from 'react-native-dark-mode';
export default class HelloWorldText extends Component {
static contextType = DarkModeContext;
render() {
const isDarkMode = this.context === 'dark';
return (
<Text style={{color: isDarkMode ? '#ffffff' : '#000000'}}>
{this.props.children}
</Text>
);
}
}
3 - Final class based component
// class based component with context consumer
import React, {Component} from 'react';
import {Text} from 'react-native';
import {DarkModeContext} from 'react-native-dark-mode';
export default class HelloWorldText extends Component {
render() {
return (
<DarkModeContext.Consumer>
{mode => (
<Text style={{color: mode === 'dark' ? '#ffffff' : '#000000'}}>
{this.props.children}
</Text>
)}
</DarkModeContext.Consumer>
);
}
}
If you want to know about the context, you can find more detail in context page. It is really useful feature for both, class and function components.