@react-querybuilder/native

Official react-querybuilder compatibility package for React Native.

• Full documentation
• CodeSandbox / StackBlitz example projects

Installation

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.

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<RuleGroupType>({ combinator: 'and', rules: [] });

  return (
    <View style={styles.outer}>
      <QueryBuilderNative fields={fields} query={query} onQueryChange={setQuery} />
      <Text style={styles.code}>{formatQuery(query, 'sql')}</Text>
    </View>
  );
}

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