React-Native custom dialog

Question

I am using React-Native to create my project, in my project I need a dialog.

How can I make the dialog just like the image? If anyone have an example about it please tell me its very important in my App thank you . I also tried this from React-Native documentation but I can't modify it to be like this photo.

I tried many examples in the internet but I failed to make it.

Alert.alert(
  'Alert Title',
  'My Alert Msg',
    [
      {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
      {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
      {text: 'OK', onPress: () => console.log('OK Pressed')},
    ]
)

Answer 1

Alert is a pretty good component if you just want to display a simple message using the system-default layout for modal messages. Otherwise, I'd recommend using the Modal component. The documentation example is pretty good to help you understand how to customize it to fit your particular usecase.