Available in v5.x with theme version 3

A component to show an icon in a Dialog.


import * as React from 'react';
import { StyleSheet } from 'react-native';
import { Paragraph, Dialog, Portal } from 'react-native-paper';

const MyComponent = () => {
  const [visible, setVisible] = React.useState(false);

  const hideDialog = () => setVisible(false);

  return (
      <Dialog visible={visible} onDismiss={hideDialog}>
        <Dialog.Icon icon="alert" />
        <Dialog.Title style={styles.title}>This is a title</Dialog.Title>
          <Paragraph>This is simple dialog</Paragraph>

const styles = StyleSheet.create({
  title: {
    textAlign: 'center',

export default MyComponent;


Type: string

Custom color for action icon.

Name of the icon to show.

Type: number
Default value: 24

Optional icon size.

Edit this page