@wq/material provides a complete set of layout, navigation, and form components for use with the @wq/react renderer for @wq/app. All provided components work in React web environments (via Material UI), as well as in React Native and Expo (via React Native Paper). @wq/material provides a consistent API in all three environments, reducing the need for project-specific “.native.js” implementations.

Installation

wq.app for PyPI

python3 -m venv venv      # create virtual env (if needed)
. venv/bin/activate       # activate virtual env
python3 -m pip install wq # install wq framework (wq.app, wq.db, etc.)
# pip install wq.app      # install wq.app only

@wq/material for npm

npm install @wq/material # install @wq/material, @wq/react, and web deps

@wq/material specifies all required dependencies for web usage. For use with React Native or Expo, you will need to install the following additional libraries:

# Expo
expo install react-native-paper \
  @react-navigation/native \
  @react-navigation/stack \
  @react-native-community/masked-view \
  @react-native-community/netinfo \
  @react-native-community/datetimepicker \
  react-native-picker-select \
  react-native-modal-datetime-picker

# React Native
npm install react-native-paper \
  @react-navigation/native \
  @react-navigation/stack \
  @react-native-community/masked-view \
  @react-native-community/netinfo \
  @react-native-community/datetimepicker \
  react-native-picker-select \
  react-native-modal-datetime-picker

API

The wq.js build provided by wq.app includes @wq/material by default. So, you do not need to explicitly register @wq/material when using wq.app for PyPI.

When using @wq/app for npm, @wq/material should be registered with @wq/app as a plugin. It will automatically register @wq/react as well.

// src/index.js
import app from '@wq/app';
import material from '@wq/material';

app.use(material);  // Automatically registers @wq/react

app.init(...);

Components

Once installed and @wq/material registeres default implementations of the component types defined by @wq/react. The components are grouped into four categories:

@wq/material also provides named exports of all included components, to facilitate extending and overriding via a components plugin.

// src/inputs/custominput.js
import { Input } from '@wq/material';

export default function PercentInput(props) {
    return <Input min={0} max={100} {...props} />
}

// src/index.js
app.use({ inputs: { PercentInput });

See the components plugin documentation for information on how to override the default components.

Source

The source code for @wq/material is in the wq.app repository.