UI Kitten - Modal - How to style and set size, color etc?

Question

I'm tyring to implement the UI Kitten modal into my app. I have the modal working just fine. The issue I am having in setting the stle, size and color of the modal.

<Modal
  visible={visible}
  backdropStyle={styles.backdrop}
  style={styles.modalContainer}
  ViewProps={styles.modalSize}>
  <Card disabled={true} header={modalHeader} footer={modalFooter}>
    {selectedType ? renderItemSelectedDetails() : ''}
  </Card>
</Modal>

I am passing this CSS style to the modal ViewProps.

  modalSize: {
    width: '250px',
    height: '200px',
    backgroundColor: '#58B83E',
  },

No matter what I pass in this CSS, its not affecting the style or size of the modal. What am I doing wrong?

I think you need to pass modalSize style to Cards' style or Modals' style. I styled it like this: ` ` — BurnOut, Aug 02 '20 at 10:13
I think you read it in docs "...ViewProps - Any props applied to View component.", but it's not prop, it's spread operation, you can just pass any prop that View has as you pass in View. — BurnOut, Aug 02 '20 at 10:20

score 0 · Answer 1 · answered Aug 02 '20 at 10:33

You need to pass styles to Modals' style prop.

<Modal
  backdropStyle={styles.backdrop}
  style={styles.modalSize}
  visible={visible}>
    <Something />
</Modal>

Also, you can add Layout as a child and style that layout how you wanted to style modal. (I prefer this solution)

<Modal
  backdropStyle={styles.backdrop}
  visible={visible}>
  <Layout
    level='3'
    style={styles.modalSize}>
     <Something />
  </Layout>
</Modal>

UI Kitten - Modal - How to style and set size, color etc?

1 Answers1