Fundamentally, Views and Containers have very similar uses:
- Organizing groups of content
- Manipulating the layout of the grouped content with Flex properties
The main difference between a
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!
If you’re curious about when it might be useful to use a
Container, here are some common uses:
Creating a custom
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
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.
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
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
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
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.
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!