How do I add a modal to a screen?

I’d like to use a modal for a brief tutorial before the user lands on the main page after signing up. If there is another way to accomplish this goal, please let me know.

Hey Todd,

We don’t support a Modal component yet, but there’s a way we can make a modal work! The second half of this will have to be done outside of Draftbit, however.

Part 1:

  1. Drop in “View” component. Name it “Overlay”
  2. Set “position” to absolute
  3. Set top, bottom, left, right to 0
  4. Drop in another “Container” component. Name it “Content”.
  5. Set the background color to whatever you’d like
  6. Set its top, bottom, left, right to the space you’d like the modal to take up.

You now have an Overlay and a Content component that you can use to add in any necessary children.

Part 2:

Modals are controlled by state in React Native. You will create a state variable called “isVisible”. Since you want the modal to appear immediately, set the default state to true:

this.state = {
  isVisible: true

The second part will require the button that you want to open the state with. If you’re using Jigsaw’s Button component, all you will have to do is this:

<Button onPress={() => this.setState({ false })> Close modal </Button>

This will immediately close the modal.

Please let me know if this makes sense!