Skip to main content

defaultNativeStyles

const defaultNativeStyles: object

Type declaration​

actionElement​

actionElement: object

actionElement.borderRadius​

actionElement.borderRadius: number = 4

actionElement.borderWidth​

actionElement.borderWidth: number = 1

actionElement.height​

actionElement.height: number = 32

actionElement.padding​

actionElement.padding: number = 8

actionElement.paddingBottom​

actionElement.paddingBottom: number = 4

actionElement.paddingTop​

actionElement.paddingTop: number = 4

actionElementText​

actionElementText: object = {}

combinatorOption​

combinatorOption: TextStyle = defaultNativeSelectStyles.option

combinatorSelector​

combinatorSelector: TextStyle = defaultNativeSelectStyles.selector

dragHandle​

dragHandle: object = {}

fieldOption​

fieldOption: TextStyle = defaultNativeSelectStyles.option

fieldSelector​

fieldSelector: TextStyle = defaultNativeSelectStyles.selector

inlineCombinator​

inlineCombinator: object = {}

notToggle​

notToggle: object

notToggle.flexDirection​

notToggle.flexDirection: "row" = 'row'

notToggleLabel​

notToggleLabel: object = {}

notToggleSwitch​

notToggleSwitch: object = {}

operatorOption​

operatorOption: TextStyle = defaultNativeSelectStyles.option

operatorSelector​

operatorSelector: TextStyle = defaultNativeSelectStyles.selector

rule​

rule: object

rule.alignItems​

rule.alignItems: "center" = 'center'

rule.flexDirection​

rule.flexDirection: "row" = 'row'

rule.gap​

rule.gap: number = 10

ruleGroup​

ruleGroup: object

ruleGroup.backgroundColor​

ruleGroup.backgroundColor: string = 'rgba(0, 75, 183, 0.2)'

ruleGroup.borderColor​

ruleGroup.borderColor: string = '#8081a2'

ruleGroup.borderRadius​

ruleGroup.borderRadius: number = 4

ruleGroup.borderWidth​

ruleGroup.borderWidth: number = 1

ruleGroup.gap​

ruleGroup.gap: number = 10

ruleGroup.padding​

ruleGroup.padding: number = 10

ruleGroupBody​

ruleGroupBody: object

ruleGroupBody.gap​

ruleGroupBody.gap: number = 10

ruleGroupHeader​

ruleGroupHeader: object

ruleGroupHeader.alignItems​

ruleGroupHeader.alignItems: "center" = 'center'

ruleGroupHeader.flexDirection​

ruleGroupHeader.flexDirection: "row" = 'row'

ruleGroupHeader.gap​

ruleGroupHeader.gap: number = 10

shiftActions​

shiftActions: object

shiftActions.flexDirection​

shiftActions.flexDirection: "column" = 'column'

value​

value: object

value.alignContent?​

optional value.alignContent: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | "space-evenly"

value.alignItems?​

optional value.alignItems: FlexAlignType

value.alignSelf?​

optional value.alignSelf: "auto" | FlexAlignType

value.aspectRatio?​

optional value.aspectRatio: string | number

value.backfaceVisibility?​

optional value.backfaceVisibility: "hidden" | "visible"

value.backgroundColor?​

optional value.backgroundColor: ColorValue

value.borderBlockColor?​

optional value.borderBlockColor: ColorValue

value.borderBlockEndColor?​

optional value.borderBlockEndColor: ColorValue

value.borderBlockStartColor?​

optional value.borderBlockStartColor: ColorValue

value.borderBottomColor?​

optional value.borderBottomColor: ColorValue

value.borderBottomEndRadius?​

optional value.borderBottomEndRadius: string | AnimatableNumericValue

value.borderBottomLeftRadius?​

optional value.borderBottomLeftRadius: string | AnimatableNumericValue

value.borderBottomRightRadius?​

optional value.borderBottomRightRadius: string | AnimatableNumericValue

value.borderBottomStartRadius?​

optional value.borderBottomStartRadius: string | AnimatableNumericValue

value.borderBottomWidth?​

optional value.borderBottomWidth: number

value.borderColor?​

optional value.borderColor: ColorValue

value.borderCurve?​

optional value.borderCurve: "circular" | "continuous"

On iOS 13+, it is possible to change the corner curve of borders.

Platform​

ios

value.borderEndColor?​

optional value.borderEndColor: ColorValue

value.borderEndEndRadius?​

optional value.borderEndEndRadius: string | AnimatableNumericValue

value.borderEndStartRadius?​

optional value.borderEndStartRadius: string | AnimatableNumericValue

value.borderEndWidth?​

optional value.borderEndWidth: number

value.borderLeftColor?​

optional value.borderLeftColor: ColorValue

value.borderLeftWidth?​

optional value.borderLeftWidth: number

value.borderRadius?​

optional value.borderRadius: string | AnimatableNumericValue

value.borderRightColor?​

optional value.borderRightColor: ColorValue

value.borderRightWidth?​

optional value.borderRightWidth: number

value.borderStartColor?​

optional value.borderStartColor: ColorValue

value.borderStartEndRadius?​

optional value.borderStartEndRadius: string | AnimatableNumericValue

value.borderStartStartRadius?​

optional value.borderStartStartRadius: string | AnimatableNumericValue

value.borderStartWidth?​

optional value.borderStartWidth: number

value.borderStyle?​

optional value.borderStyle: "solid" | "dotted" | "dashed"

value.borderTopColor?​

optional value.borderTopColor: ColorValue

value.borderTopEndRadius?​

optional value.borderTopEndRadius: string | AnimatableNumericValue

value.borderTopLeftRadius?​

optional value.borderTopLeftRadius: string | AnimatableNumericValue

value.borderTopRightRadius?​

optional value.borderTopRightRadius: string | AnimatableNumericValue

value.borderTopStartRadius?​

optional value.borderTopStartRadius: string | AnimatableNumericValue

value.borderTopWidth?​

optional value.borderTopWidth: number

value.borderWidth?​

optional value.borderWidth: number

value.bottom?​

optional value.bottom: DimensionValue

value.color?​

optional value.color: ColorValue

value.columnGap?​

optional value.columnGap: string | number

value.cursor?​

optional value.cursor: CursorValue

value.direction?​

optional value.direction: "ltr" | "rtl" | "inherit"

Platform​

ios

value.display?​

optional value.display: "none" | "flex"

value.elevation?​

optional value.elevation: number

Sets the elevation of a view, using Android's underlying elevation API. This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions.

Platform​

android

value.end?​

optional value.end: DimensionValue

value.flex?​

optional value.flex: number

value.flexBasis?​

optional value.flexBasis: DimensionValue

value.flexDirection?​

optional value.flexDirection: "row" | "column" | "row-reverse" | "column-reverse"

value.flexGrow?​

optional value.flexGrow: number

value.flexShrink?​

optional value.flexShrink: number

value.flexWrap?​

optional value.flexWrap: "wrap" | "nowrap" | "wrap-reverse"

value.fontFamily?​

optional value.fontFamily: string

value.fontSize?​

optional value.fontSize: number

value.fontStyle?​

optional value.fontStyle: "normal" | "italic"

value.fontVariant?​

optional value.fontVariant: FontVariant[]

value.fontWeight?​

optional value.fontWeight: 100 | "100" | "bold" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "light" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | "black"

Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.

value.gap?​

optional value.gap: string | number

value.height?​

optional value.height: DimensionValue

value.includeFontPadding?​

optional value.includeFontPadding: boolean

value.justifyContent?​

optional value.justifyContent: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly"

value.left?​

optional value.left: DimensionValue

value.letterSpacing?​

optional value.letterSpacing: number

value.lineHeight?​

optional value.lineHeight: number

value.margin?​

optional value.margin: DimensionValue

value.marginBottom?​

optional value.marginBottom: DimensionValue

value.marginEnd?​

optional value.marginEnd: DimensionValue

value.marginHorizontal?​

optional value.marginHorizontal: DimensionValue

value.marginLeft?​

optional value.marginLeft: DimensionValue

value.marginRight?​

optional value.marginRight: DimensionValue

value.marginStart?​

optional value.marginStart: DimensionValue

value.marginTop?​

optional value.marginTop: DimensionValue

value.marginVertical?​

optional value.marginVertical: DimensionValue

value.maxHeight?​

optional value.maxHeight: DimensionValue

value.maxWidth?​

optional value.maxWidth: DimensionValue

value.minHeight?​

optional value.minHeight: DimensionValue

value.minWidth?​

optional value.minWidth: DimensionValue

value.opacity?​

optional value.opacity: AnimatableNumericValue

value.overflow?​

optional value.overflow: "hidden" | "visible" | "scroll"

value.padding?​

optional value.padding: DimensionValue

value.paddingBottom?​

optional value.paddingBottom: DimensionValue

value.paddingEnd?​

optional value.paddingEnd: DimensionValue

value.paddingHorizontal?​

optional value.paddingHorizontal: DimensionValue

value.paddingLeft?​

optional value.paddingLeft: DimensionValue

value.paddingRight?​

optional value.paddingRight: DimensionValue

value.paddingStart?​

optional value.paddingStart: DimensionValue

value.paddingTop?​

optional value.paddingTop: DimensionValue

value.paddingVertical?​

optional value.paddingVertical: DimensionValue

value.pointerEvents?​

optional value.pointerEvents: "none" | "auto" | "box-none" | "box-only"

Controls whether the View can be the target of touch events.

value.position?​

optional value.position: "absolute" | "relative" | "static"

value.right?​

optional value.right: DimensionValue

value.rotation?​

optional value.rotation: AnimatableNumericValue

Deprecated​

Use rotate in transform prop instead.

value.rowGap?​

optional value.rowGap: string | number

value.scaleX?​

optional value.scaleX: AnimatableNumericValue

Deprecated​

Use scaleX in transform prop instead.

value.scaleY?​

optional value.scaleY: AnimatableNumericValue

Deprecated​

Use scaleY in transform prop instead.

value.shadowColor?​

optional value.shadowColor: ColorValue

value.shadowOffset?​

optional value.shadowOffset: Readonly<object>

Type declaration​

height​

height: number

width​

width: number

value.shadowOpacity?​

optional value.shadowOpacity: AnimatableNumericValue

value.shadowRadius?​

optional value.shadowRadius: number

value.start?​

optional value.start: DimensionValue

value.textAlign?​

optional value.textAlign: "center" | "auto" | "left" | "right" | "justify"

value.textAlignVertical?​

optional value.textAlignVertical: "center" | "auto" | "top" | "bottom"

value.textDecorationColor?​

optional value.textDecorationColor: ColorValue

value.textDecorationLine?​

optional value.textDecorationLine: "none" | "underline" | "line-through" | "underline line-through"

value.textDecorationStyle?​

optional value.textDecorationStyle: "solid" | "double" | "dotted" | "dashed"

value.textShadowColor?​

optional value.textShadowColor: ColorValue

value.textShadowOffset?​

optional value.textShadowOffset: object

value.textShadowOffset.height​

value.textShadowOffset.height: number

value.textShadowOffset.width​

value.textShadowOffset.width: number

value.textShadowRadius?​

optional value.textShadowRadius: number

value.textTransform?​

optional value.textTransform: "none" | "capitalize" | "uppercase" | "lowercase"

value.top?​

optional value.top: DimensionValue

value.transform?​

optional value.transform: string | (object & object | object & object | object & object | object & object | object & object | object & object | object & object | object & object | object & object | object & object | object & object | object & object | object & object)[]

value.transformMatrix?​

optional value.transformMatrix: number[]

Deprecated​

Use matrix in transform prop instead.

value.transformOrigin?​

optional value.transformOrigin: string | (string | number)[]

value.translateX?​

optional value.translateX: AnimatableNumericValue

Deprecated​

Use translateX in transform prop instead.

value.translateY?​

optional value.translateY: AnimatableNumericValue

Deprecated​

Use translateY in transform prop instead.

value.userSelect?​

optional value.userSelect: "text" | "all" | "none" | "auto" | "contain"

value.verticalAlign?​

optional value.verticalAlign: "auto" | "top" | "bottom" | "middle"

value.width​

value.width: number = 150

value.writingDirection?​

optional value.writingDirection: "auto" | "ltr" | "rtl"

value.zIndex?​

optional value.zIndex: number

valueEditorOption​

valueEditorOption: TextStyle = defaultNativeSelectStyles.option

valueEditorSelector​

valueEditorSelector: TextStyle = defaultNativeSelectStyles.selector

valueEditorSwitch​

valueEditorSwitch: object = {}

valueList​

valueList: object

valueList.flexDirection​

valueList.flexDirection: "row" = 'row'

valueSourceOption​

valueSourceOption: TextStyle = defaultNativeSelectStyles.option

valueSourceSelector​

valueSourceSelector: TextStyle = defaultNativeSelectStyles.selector

Defined in​

packages/native/src/styles.ts:63

caution

API documentation is generated from the latest commit on the main branch. It may be somewhat inconsistent with official releases of React Query Builder.