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.

2238

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

NameDescription
AddSecondsAdds the provided value in seconds to a Date object
AddMinutesAdds the provided value in minutes to a Date object
AddHoursAdds the provided value in hours to a Date object
AddDaysAdds the provided value in days to a Date object
AddWeeksAdds the provided value in weeks to a Date object
AddMonthsAdds the provided value in months to a Date object
AddYearsAdds the provided value in years to a Date object
SubtractSecondsSubtracts the provided value in seconds from a Date object
SubtractMinutesSubtracts the provided value in minutes from a Date object
SubtractHoursSubtracts the provided value in hours from a Date object
SubtractDaysSubtracts the provided value in days from a Date object
SubtractWeeksSubtracts the provided value in weeks from a Date object
SubtractMonthsSubtracts the provided value in months from a Date object
SubtractYearsSubtracts the provided value in years from a Date object
FormatDateFormats a Date object as a string using the provided format. For example, yyyy-MM-dd hh:mm:ss. See here for more.
FormatDistanceToNowFormats a Date object as a human-readable string relative to now. For example, less than a minute, about 1 year, etc.
ParseDateParses a string representation of a date, and returns a Date object
FormatDateISOConverts a date object to an ISO-formatted date string. The standard is called ISO-8601 and the format is: YYYY-MM-DDTHH:mm:ss.sssZg

String

NameDescriptionBeforeAfter
ParseBooleanFunction that takes a string value. If it's "false", evaluates to false otherwise evaluates to true."false"
"true"
true
false
false
true
true
false
ParseIntParses a string and returns an integer."29.99"29
ParseFloatParses a string and returns a floating-point number."29.99"29.99
ParseJsonStringA function that converts a JSON string to a JavaScript object.{"age":30}{age: 30}
AddBearerPrefixA function returns the token with the prefix Bearer such that it can be set as the value to the Authorization header.tokenBearer token
ToUpperCaseA function that converts a string to uppercase letters."String""STRING"
ToLowerCaseA function that converts a string to lowercase letters."String""string"
StringConcatConcatenates the given strings"Hello " + "World""Hello World"
TrimTrims the whitespace from the start and end of the given string" Hello World ""Hello World"
TrimStartTrims the whitespace from the start of the given string" Hello World""Hello World"
TrimEndTrims the whitespace from the end of the given string"Hello World ""Hello World"
StartsWithReturns true if the give string starts with the provide value, else false"Hello World" starts with "He"true
EndsWithReturns true if the give string ends with the provided value, else false"Hello World" ends with "He"false

Logic

NameDescriptionBeforeAfter
If/ElseUsed to further conditionally customize the chain of transforms
AndUsed to further conditionally customize the chain of transforms
OrUsed to further conditionally customize the chain of transforms
NegateFunction that takes a truthy value and changes it to falsy and vice versa.truefalse

Numeric

NameDescriptionBeforeAfter
RoundUpRounds a numerical value up to the next largest integer.29.9930
RoundDownRounds a numerical value down to the largest integer less than or equal to a given number.29.9929
IncrementA function that increments the number by one.12
DecrementA function that decrements the number by one.10
Numeric NegateReturns the negated value of the provided value33-33
AddThe addition operator (+) adds numbers1+23
SubtractThe subtraction operator (-) subtracts numbers3 - 21
MultiplyThe multiplication operator (*) multiplies numbers.3 * 39
DivideThe division operator (/) divides numbers.99 / 333
ExponentThe exponentiation operator (**) raises the first operand to the power of the second operand.3 ** 29
Remainder (Modulus)The modulus operator (%) returns the division remainder.33 % 30

Generic

NameDescriptionBeforeAfter
LengthCalculates the number of elements in an array or characters in a string and returns as a number["coffee", "jar", "cup"] or
"Hello World"
3 or
11
JsonStringifyA function that converts a JavaScript object or value to a JSON string.{count: 42}{"count": 42}
ToStringA function that converts a given value to a string.15
true
"15"
"true"
IncludesReturns true if the selected value includes the provided value, else false"Hello World"includes "World"true
SliceReturns the extracted part of a given string based on the provided start and end as a new string"Hello World"slice from 0 to 4"Hello"
ConsoleLogPrints the given value to the Builder's Console Logs

Comparison

NameDescriptionBeforeAfter
EqualToA function that checks if two values are equal.1 and 1 or "foo" and "bar"Returns true or false
NotEqualToA function that checks if two values are unequal.1 and 1 or "foo" and "bar"Returns false or true
LessThanA function that checks if the first value is less than the second value.1 < 10Returns true
GreaterThanA function that checks if the first value is greater than the second value.1 > 10Returns false
LessThanOrEqualA function that checks if the first value is less than or equal to the second value.1 <= 10Returns true
GreaterThanOrEqualA function that checks if the first value is greater than or equal to the second value.1 >= 10Returns false

Array

NameDescriptionBeforeAfter
ArrayConcatA function that transform an array but adding the items from a second array to the end of the first array.['apple' , 'orange]
and
['mango']
['apple', 'orange', 'mango']
ArrayAppendA Function that transform an array by adding the given value as the last item in the array.['22,'33'] and '11'['22,'33','11']
ArrayPrependA Function that transform an array by adding the given value as the first item in the array.['22,'33'] and '11'['11','22,'33']
ArrayLastReturns the last item in the given array[1, 2, 3, 4]4

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.