How to style an Alert element in React Native?

Sometimes, we want to style an Alert element in React Native.

In this article, we’ll look at how to style an Alert element in React Native.

How to style an Alert element in React Native?

To style an Alert element in React Native, we can use the react-native-modalbox package.

We run npm i react-native-modalbox to install it.

Then we write:

import * as React from 'react';
import { View, Text } from 'react-native';
import Modal from 'react-native-modalbox';

export default function App() {
  const ref = React.useRef();

  React.useEffect(() => {
    ref.current.open();
  }, []);

  return (
    <View>
      <Modal style={{ background: 'red' }} ref={ref}>
        <Text style={{ color: 'green' }}>Basic modal</Text>
      </Modal>
    </View>
  );
}

to add the Modal component from the package.

We assign a ref to it and then we call open on it to open the modal.

Conclusion

To style an Alert element in React Native, we can use the react-native-modalbox package.