React Native components for react-querybuilder
npm install @react-querybuilder/nativeOfficial react-querybuilder compatibility package for React Native.
- Full documentation
- CodeSandbox / StackBlitz example projects
``bash`
npm i react-querybuilder @react-querybuilder/nativeOR yarn add / pnpm add / bun add
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
return (
);
}
`
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` |