@react-querybuilder/native

Official react-querybuilder compatibility package for React Native.

- Full documentation
- CodeSandbox / StackBlitz example projects

Installation

``bash
npm i react-querybuilder @react-querybuilder/native


OR yarn add / pnpm add / bun add


`

Usage

To render a React Native-compatible query builder, use QueryBuilderNative.

`tsx
import { QueryBuilderNative } from '@react-querybuilder/native';
import { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { type Field, formatQuery, type RuleGroupType } from 'react-querybuilder';

const styles = StyleSheet.create({
outer: { padding: 10, gap: 20 },
code: { fontFamily: 'monospace' },
});

const fields: Field[] = [
{ name: 'firstName', label: 'First Name' },
{ name: 'lastName', label: 'Last Name' },
];

export function App() {
const [query, setQuery] = useState({ combinator: 'and', rules: [] });

return (


{formatQuery(query, 'sql')}

);
}
`

QueryBuilderNative accepts the same props QueryBuilder and assigns the following props by default.

| Export | QueryBuilder prop |
| ------------------------------ | ---------------------------------- |
| defaultNativeControlElements | controlElements |
| NativeActionElement | controlElements.actionElement |
| NativeInlineCombinator | controlElements.inlineCombinator |
| NativeNotToggle | controlElements.notToggle |
| NativeShiftActions | controlElements.shiftActions |
| NativeValueEditor | controlElements.valueEditor |
| NativeValueSelector | controlElements.valueSelector |
| RuleGroupNative | controlElements.ruleGroup |
| RuleNative | controlElements.rule |

For react-native-web, assign defaultNativeWebControlElements to controlElements as in the example above.

| Export | QueryBuilder prop |
| --------------------------------- | ------------------------------- |
| defaultNativeWebControlElements | controlElements |
| NativeValueEditorWeb | controlElements.valueEditor |
| NativeValueSelectorWeb | controlElements.valueSelector` |