Caleb Dykema

Co-founder, vaultsportshq.com
I'm a co-founder at Vault! Marketing, connecting with people, and UI/UX are my focus. Traveling, scuba diving, and cooking are some of my favorite hobbies.

Creating a 'Filters' page - How do I create a toggle button effect?

I'm building a 'Filters' page where a user can filter in/out certain data in order to view different things. In regards to the look and feel of the buttons, I'm wanting the selected buttons to be one color and one font, and the unselected buttons another color and another font. See picture.

There are certain filters that only one button can be selected (example: the Filter By Date), but others a multitude can be selected (example: the Filter By Bet Type).

Has anyone created a filter page similar to this before that could share how they got the buttons to interact similar to this? And how they went about making the data react with the filters changing?



Why can't I change the text color on Search Bars?

If you have built your app in dark mode, you'll notice that you have to change Text Fields from their default dark font color to a lighter font as seen in the picture below so that it doesn't get lost in the background....


This is easy enough to do, but for a Search Bar, it doesn't give you the option to change the text color (it looks like it's a light font here but as soon as you begin typing the text turns to a black font).


Has anyone found a work around this? I'd prefer not making the background light for aesthetic purposes. Or is font color change a feature Draftbit could implement from the Text Fields into the Search Bar?

Add interactions to header buttons

I have a stack navigator which has a header and two icons on the left and right side.

One of these icons is Settings which I want to be able to click and it will bring me to the Settings page, and another is Filters and with a click I want it to bring me to the Filters page. In the build mode, however, the only modifications I can make to these icons are the color, text, and the icon itself.

I can't figure out how to add interactions to these header buttons. Does anyone know how to do this?


*Bonus points: if you know a way I can put our actual Vault logo in the header instead of Draftbit's standard font, I'd love to hear how!


My current header:


The only modifications you can make:


Issues with making Touchables the correct size

I've been experiencing chronic issues with touchables where they seem to ignore the size constraints I give them.

An example of this is shown below:

In the Builder I have the 3 touchable block/buttons setup like such:

View (Row, Space Between)
>Touchable (30% Width)
>>View (Row, Justify Center)
>Touchable (30% Width)
>>View (Row, Justify Center)
>Touchable (30% Width, 100% Height*)
>>View  (Row, Justify Center)

*I want all three of the blocks to have their top and bottom edges align (aka for them to be the same height) no matter how much text or icons are within the view. I would have thought that giving the third block a 100% height constraint it would have matched the height of the first two but it doesn't change it at all.

I've tried a bunch of different configurations (mainly putting the 100% constraint on various views) and nothing seems to align them properly in the Preview screen view.

Has anyone had a problem like this and knows the solution?


Builder View:

Preview screen view:


Does anyone have experience with Keyboard Avoiding View?

I'm making a Create Your Profile screen and I'm confusing about the Keyboard Avoiding View.

Should I be setting each text field element to have its own keyboard avoiding view (Option A), or do I make the entire view a keyboard avoiding view (Option B)? I just want to be sure the user can see what they are typing on each individual text field.

Option A
View
>Keyboard avoiding view
>>Text Field
>Keyboard avoiding view
>>Text Field
>Keyboard avoiding view
>>Text Field
...

Option B
View
>Keyboard avoiding view
>>Text Field
>>Text Field
>>Text Field
...



Help with positioning a logo on the screen with a element on one side

This seems like such an easy problem to fix but I can't figure it out! I have a back button aligned to the left and I want our logo to always be centered on the screen at the top, no matter what the screen size.

There doesn't seem to be a way to space this so that this is possible and almost seems like I'd need to layer a view on top of a view and have one view align left, and one view aligns center. (Not sure if that's possible though)

Has anyone else run into this problem? See the picture below.



Add a drop shadow to elements

I'm trying to figure out how to add a drop shadow to a box, such as a view, to make the different sections of a screen "pop" out of the page. I found the instructions for a Container here (https://docs.draftbit.com/docs/views-and-containers#configuration-2) but it looks like this component type was removed. Any thoughts?