@react-querybuilder/native

@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

Changelog

[v8.0.0] - 2024-11-08

Changed

• [#805] @react-querybuilder/chakra now supports Chakra UI version 3 and no longer supports version 2. For Chakra UI version 2 support, use @react-querybuilder/chakra2.
• [#805] ChakraDragHandle has been removed. In Chakra UI version 3 environments, the default DragHandle component works without augmentation.

Added

• [#814] Debug build which registers the internal Redux store with Redux DevTools (more "debug" functionality may be added in the future). To use the debug build, update all "react-querybuilder" imports to "react-querybuilder/debug".

Fixed

• [#814] The internal Redux store is no longer registered with Redux DevTools by default.
• bootstrapClassnames no longer includes value: "form-control form-control-sm". The classes are added by BootstrapValueEditor only when necessary.
• [#812] @react-querybuilder/bulma properly indicates compatibility with Bulma v1 in its peerDependencies, and the website demo now uses Bulma v1.