When should I use a View and when should I use a Container?

Fundamentally, Views and Containers have very similar uses:

  1. Organizing groups of content
  2. Manipulating the layout of the grouped content with Flex properties

The main difference between a View and Container is that a View is a that doesn’t allow for any styling or additional functionality (if you have experience with web development, think of a View as the equivalent of a <div>) while a Container can be styled and used for different purposes.

If you don’t need to style the container, it’s recommended that you use a View instead of a Container! :slightly_smiling_face:

If you’re curious about when it might be useful to use a Container, here are some common uses:

Creating a custom Button

We’ve created a Button component for you to use in our Blocks section, but you might be trying to achieve a different look for a button in your design. If that’s the case, no problem! It’s super easy to create a button using Bits and style it to your desire.

To create a custom button, simply place a Container or View inside of a Touchable. You can then style and configure your Container by changing its color, border radius, or by adding other Bits inside of it.

custombutton

You can add actions to the Touchable to make your custom button navigate to a different screen or navigator just as you would with the Button component. Not familiar with actions/navigation in Draftbit? Check out the Navigation section on our docs site to catch up on all the basics.

Creating a custom Card

You may have also seen the Card component we’ve created for you in the Blocks section. It’s easy to create your own by putting Image, Text, and Icon components inside of a Container. By using some of the Flex properties in the Alignment section of the config panel, you’ll be able to create a variety of layouts. You may also want to consider using the Elevation property in the config panel, to give your cards a floating effect.

For a more detailed look at how to create your own Card, stay tuned for a tutorial about integrating Data into Rentbit where you’ll also learn how to use the new Fetch component and updated List component!

Creating a floating header

Further using the Elevation property to create a floating Header on your screen. To do this, simply add a Container to the top of your screen followed by a ScrollView. Set an Elevation, Background Color and Height on the Container as shown below.

header-setup

Note: make sure that the Scrollable switch is disabled under the screen’s configuration options.

Place all of your content inside of the ScrollView and you will end up with your screen looking like this:

These are just a few different ways you can use a Container inside of Draftbit. See what other uses you can come up with!

1 Like