How to change light-dark theme of Alert dialog in React Native?

React Native Alert api provides userInterfaceStyle property of optional object that we pass as 4th parameter in alert() function and 7th parameter in prompt() function.

We can use it like this –

import Alert from 'react-native'

Alert.alert(
  "title",
  "message",
  [{ text: "OK", onPress: () => console.log("OK Pressed") }],
  {userInterfaceStyle: 'dark'}
)

From above snippet you can see that we are setting 4th parameter of alert() as optional object.

Code Example

import React, { useState } from "react";
import { View, StyleSheet, Button, Alert, Text } from "react-native";

const App = () => {
  
  const lightAlert = () =>
    Alert.alert(
      "Alert Title",
      "This is a light alert because we are setting userInterfaceStyle:light",
      [
        {
          text: "Ok",
          onPress: () => console.log("OK"),
        },
      ],
      {userInterfaceStyle: 'light'}
    );

  const darkAlert = () =>
    Alert.alert(
      "Alert Title",
      "This is a dark alert because we are setting userInterfaceStyle:dark",
      [
        {
          text: "Ok",
          onPress: () => console.log("OK"),
        },
      ],
      {userInterfaceStyle: 'dark'}
    );

  return (
    <View style={styles.container}>
      <Button title={"Light Alert"} onPress={lightAlert} />
      <Button title={"Dark Alert"} onPress={darkAlert} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-around",
    alignItems: "center",
    paddingVertical: 100
  }
});

export default App;

In our code we have declared two functions – lightAlert() and darkAlert(). In lightAlert function we are setting {userInterfaceStyle: 'light'} while in darkAlert we are setting {userInterfaceStyle: 'dark'}.

Live Demo

Conclusion

In conclusion, the dark-light theme of Alert dialog can be changed by setting userInterfaceStyle property in options object. It can accept two values – dark and light. This option works for iOS only.