Transforming Values

Draftbit comes with built-in transform utility functions to transform data on-the-fly. You can also use your own Functions to transform data.

If the value you are working with supports being transformed, the 'transform' dropdown will be displayed below it allowing you to apply one or more transforms to the value.

These functions work on components like Text and Set Variable Actions on Touchable or Button Components. Or, use them to conditionally display a component.

It's possible to chain multiple transforms together and use conditional statements to perform more complex manipulation of your value. This includes both the built-in transforms and your own transform functions.

Keypath

If the value you are transforming is an object or array and you just want to access nested data, then you can type the keypath directly into the transform input to target specific indexes and keys.

In the case of an object, we can use simple dot notation (.) to get the value of a specific key. Consider a value like this assigned to a Variable named user:

{
  id: 1,
  name: 'Dave',
  company: 'Draftbit',
  address: {
    street: '123 Draftbit Way',
    city: 'Austin',
    state: 'Texas'
  }
}

After we select the user variable from the dropdown, we can get just the id value by entering .id into the transform input. Notice the period (.) prefix. In the generated code, this will create user.id which references the value 1 in the example object above.

Or, we could get the state value by entering .address.state which would generate user.address.state which references the value Texas.

In the case of an array, we can add the use of square brackets ([]) to select specific indexes. Consider a value like this assigned to a Variable named teams:

[
  {
    id: 1,
    name: 'Development',
    tags: ['engineering','software','coding']
  },
  {
    id: 2,
    name: 'Design',
    tags: ['ui','ux','branding']
  }
]

We can get just the name of the first item in the array by entering [0].name where 0 is the first index in the array. The generated code would be teams[0].name.

If we wanted the second tag in the second item in the array, we would enter [1].tags[1].

Date

String

Logic

Numeric

Generic

Comparison

Array

Custom Transforms

You can also use any Functions that have one or more parameters as a Transform Function by selecting it from the dropdown.

📘

Multiple Arguments

If your function accepts more than one argument, you will have additional inputs to pass those values. The first value selected will always be passed as the first argument to the function.