-
-);
-
-// ❌ Bad - One large component with everything
-```
-
-### 2. Use Meaningful Names
-
-Choose descriptive names that convey purpose.
-
-```jsx
-// ✅ Good
-{/* Complex rendering logic */}
;
-});
-```
-
-### 5. Follow Accessibility Guidelines
-
-Ensure your UI is accessible to all users.
-
-```jsx
-// Use semantic HTML
-
-
-// Add ARIA labels
-
-
-// Ensure keyboard navigation
-
- Interactive Element
-
-```
-
-## Modern UI Development Tools
-
-### Build Tools
-
-- **Vite**: Fast build tool and dev server
-- **Webpack**: Module bundler
-- **Parcel**: Zero-config bundler
-
-### Component Libraries
-
-- **Material-UI**: React components following Material Design
-- **Ant Design**: Enterprise-level UI design system
-- **Chakra UI**: Accessible component library
-
-### State Management
-
-- **Redux**: Predictable state container
-- **MobX**: Simple, scalable state management
-- **Zustand**: Lightweight state management
-
-### Styling Libraries
-
-- **Tailwind CSS**: Utility-first CSS framework
-- **Styled Components**: CSS-in-JS library
-- **Emotion**: Performant CSS-in-JS library
-
-## Getting Started
-
-To begin building user interfaces:
-
-1. **Learn the Fundamentals**: Understand HTML, CSS, and JavaScript
-2. **Choose a Framework**: React, Vue, Angular, or Svelte
-3. **Study Design Principles**: Learn about UX and visual design
-4. **Practice Component Thinking**: Break UIs into reusable components
-5. **Build Projects**: Apply concepts by building real applications
-6. **Focus on Accessibility**: Ensure your UIs work for everyone
-7. **Optimize Performance**: Learn to build fast, efficient UIs
-
-## Related Documentation
-
-- [TechStack](./tech-stack.md) - Technology stack for UI development
-- [Create Page, working with Layouts](#) - Page creation
-- [Styling with Design Tokens](#) - Design system tokens
-- [State Management](#) - Managing application state
-- [Responsive Design](#) - Building responsive interfaces
diff --git a/docs/user-interfaces/mobile/concepts/overview.mdx b/docs/user-interfaces/mobile/concepts/overview.mdx
new file mode 100644
index 0000000..92df30c
--- /dev/null
+++ b/docs/user-interfaces/mobile/concepts/overview.mdx
@@ -0,0 +1,142 @@
+---
+last_update: { author: "Praneeth Reddy" }
+---
+
+import MobileUiArchitecture from '../assets/mobile-ui-architecture.png'
+
+# Overview
+
+WaveMaker Platform provides
+
+- an open source React Native component library
+- a codegen pipeline that transforms WaveMaker Markup into native mobile code and
+- a design token system for consistent styling
+
+which enable mobile app developers to build cross-platform iOS and Android applications on the same WaveMaker platform. When you create an app in Studio, you choose **Web** or **Mobile** as the target device; each choice is a **separate project** with its own pages, services, and generated code. For a mobile project, you design pages visually in Studio and the platform generates a fully functional Expo-based React Native application.
+
+Platform uses component-based architecture and WaveMaker Markup Language (WML) to represent components within a page, which the codegen pipeline transforms into React Native code targeting Expo.
+
+## UI Concepts
+
+Mobile App UI is well separated into layers to define styling, layouts, components and client-side logic, similar to a WaveMaker web project. WaveMaker open source component library provides a comprehensive set of components for building enterprise-grade forms, dashboards, data-driven apps etc. with scalable, secure and modern experience needs. Generated code targets React Native (Expo) for native rendering instead of the browser DOM.
+
+
-
- );
-}
-
-export default App;
-```
-
-**When to Use:**
-- Large-scale applications
-- Need for extensive third-party libraries
-- Teams familiar with JavaScript
-- SEO-friendly apps (with Next.js)
-
-### Vue.js
-
-Progressive JavaScript framework for building user interfaces.
-
-**Key Features:**
-- Template syntax
-- Reactive data binding
-- Component composition
-- Easy learning curve
-- Single-file components
-
-**Installation:**
-```bash
-npm create vue@latest my-app
-cd my-app
-npm install
-npm run dev
-```
-
-**Basic Example:**
-```vue
-
- Count: {count}
- -
-
-
-
-
-```
-
-**When to Use:**
-- Projects needing gentle learning curve
-- Integration with existing projects
-- Teams preferring template syntax
-- Progressive enhancement
-
-### Angular
-
-Full-featured framework for building web applications.
-
-**Key Features:**
-- TypeScript-based
-- Two-way data binding
-- Dependency injection
-- Comprehensive tooling
-- RxJS for reactive programming
-
-**Installation:**
-```bash
-npm install -g @angular/cli
-ng new my-app
-cd my-app
-ng serve
-```
-
-**Basic Example:**
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-counter',
- template: `
- Count: {{ count }}
- -
-
- `
-})
-export class CounterComponent {
- count = 0;
-
- increment() {
- this.count++;
- }
-}
-```
-
-**When to Use:**
-- Enterprise applications
-- Teams using TypeScript
-- Need for built-in solutions
-- Large, complex projects
-
-## State Management
-
-### Redux
-
-Predictable state container for JavaScript applications.
-
-**Installation:**
-```bash
-npm install @reduxjs/toolkit react-redux
-```
-
-**Example:**
-```javascript
-import { createSlice, configureStore } from '@reduxjs/toolkit';
-
-const counterSlice = createSlice({
- name: 'counter',
- initialState: { value: 0 },
- reducers: {
- increment: state => {
- state.value += 1;
- },
- },
-});
-
-export const { increment } = counterSlice.actions;
-
-export const store = configureStore({
- reducer: {
- counter: counterSlice.reducer,
- },
-});
-```
-
-**Use Cases:**
-- Complex state logic
-- Multiple components sharing state
-- Need for time-travel debugging
-- Large applications
-
-### Zustand
-
-Lightweight state management solution.
-
-**Installation:**
-```bash
-npm install zustand
-```
-
-**Example:**
-```javascript
-import { create } from 'zustand';
-
-const useStore = create((set) => ({
- count: 0,
- increment: () => set((state) => ({ count: state.count + 1 })),
-}));
-
-// Usage in component
-function Counter() {
- const { count, increment } = useStore();
- return ;
-}
-```
-
-**Use Cases:**
-- Small to medium applications
-- Need for simplicity
-- Minimal boilerplate
-- Quick prototypes
-
-### MobX
-
-Simple, scalable state management through observables.
-
-**Installation:**
-```bash
-npm install mobx mobx-react-lite
-```
-
-**Example:**
-```javascript
-import { makeAutoObservable } from 'mobx';
-import { observer } from 'mobx-react-lite';
-
-class CounterStore {
- count = 0;
-
- constructor() {
- makeAutoObservable(this);
- }
-
- increment() {
- this.count++;
- }
-}
-
-const counterStore = new CounterStore();
-
-const Counter = observer(() => (
-
-));
-```
-
-**Use Cases:**
-- Object-oriented programming preference
-- Automatic reactivity needed
-- Complex domain models
-- Teams familiar with OOP
-
-## Styling Solutions
-
-### CSS-in-JS
-
-#### Styled Components
-
-```bash
-npm install styled-components
-```
-
-```javascript
-import styled from 'styled-components';
-
-const Button = styled.button`
- background-color: ${props => props.primary ? 'blue' : 'gray'};
- color: white;
- padding: 8px 16px;
- border-radius: 4px;
- border: none;
- cursor: pointer;
-
- &:hover {
- opacity: 0.8;
- }
-`;
-
-// Usage
-
-```
-
-#### Emotion
-
-```bash
-npm install @emotion/react @emotion/styled
-```
-
-```javascript
-import styled from '@emotion/styled';
-
-const Button = styled.button`
- background-color: blue;
- color: white;
- padding: 8px 16px;
-`;
-```
-
-### Utility-First CSS
-
-#### Tailwind CSS
-
-```bash
-npm install -D tailwindcss postcss autoprefixer
-npx tailwindcss init -p
-```
-
-```jsx
-const Button = ({ children, primary }) => (
-
-);
-```
-
-### CSS Modules
-
-```css
-/* Button.module.css */
-.button {
- background-color: blue;
- color: white;
- padding: 8px 16px;
- border-radius: 4px;
-}
-
-.button:hover {
- opacity: 0.8;
-}
-```
-
-```jsx
-import styles from './Button.module.css';
-
-const Button = ({ children }) => (
-
-);
-```
-
-## UI Component Libraries
-
-### Material-UI (MUI)
-
-React components implementing Material Design.
-
-```bash
-npm install @mui/material @emotion/react @emotion/styled
-```
-
-```jsx
-import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
-
-function Form() {
- return (
- Count: {{ count }}
- -
-
- );
-}
-```
-
-### Ant Design
-
-Enterprise-level UI design system.
-
-```bash
-npm install antd
-```
-
-```jsx
-import { Button, Input, Form } from 'antd';
-
-function LoginForm() {
- return (
-
- );
-}
-```
-
-### Chakra UI
-
-Accessible component library for React.
-
-```bash
-npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
-```
-
-```jsx
-import { Button, Input, Stack } from '@chakra-ui/react';
-
-function Form() {
- return (
-
-
- );
-};
-```
-
-## Testing Libraries
-
-### Jest
-
-JavaScript testing framework.
-
-```bash
-npm install --save-dev jest @testing-library/react @testing-library/jest-dom
-```
-
-```javascript
-import { render, screen } from '@testing-library/react';
-import Button from './Button';
-
-test('renders button with text', () => {
- render();
- expect(screen.getByText('Click me')).toBeInTheDocument();
-});
-```
-
-### React Testing Library
-
-Testing utilities for React components.
-
-```javascript
-import { render, screen, fireEvent } from '@testing-library/react';
-
-test('button increments counter', () => {
- render({user.name}
-{user.email}
- -Loading...
;
- return {data.map(user =>
;
-}
-```
-
-## Performance Tools
-
-### React Developer Tools
-
-Browser extension for debugging React applications.
-
-### Lighthouse
-
-Automated tool for improving web page quality.
-
-### Web Vitals
-
-Library for measuring performance metrics.
-
-```bash
-npm install web-vitals
-```
-
-```javascript
-import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';
-
-getCLS(console.log);
-getFID(console.log);
-getFCP(console.log);
-getLCP(console.log);
-getTTFB(console.log);
-```
-
-## Recommended Stack Combinations
-
-### Modern React Stack
-- **Framework:** React 18+
-- **Build Tool:** Vite
-- **State Management:** Zustand or Redux Toolkit
-- **Styling:** Tailwind CSS
-- **Component Library:** Material-UI or Chakra UI
-- **Data Fetching:** React Query
-- **Forms:** React Hook Form
-- **Testing:** Jest + React Testing Library
-
-### Enterprise Stack
-- **Framework:** Angular
-- **Build Tool:** Angular CLI
-- **State Management:** NgRx
-- **Styling:** Angular Material
-- **Forms:** Reactive Forms
-- **Testing:** Jasmine + Karma
-
-### Lightweight Stack
-- **Framework:** Vue 3
-- **Build Tool:** Vite
-- **State Management:** Pinia
-- **Styling:** CSS Modules + SCSS
-- **Component Library:** Naive UI
-- **Data Fetching:** Axios
-- **Testing:** Vitest
-
-## Development Tools
-
-### Package Managers
-- **npm:** Default Node.js package manager
-- **yarn:** Fast, reliable package manager
-- **pnpm:** Efficient disk space usage
-
-### Version Control
-- **Git:** Distributed version control
-- **GitHub/GitLab/Bitbucket:** Code hosting platforms
-
-### Code Editors
-- **VS Code:** Most popular code editor
-- **WebStorm:** JetBrains IDE for JavaScript
-
-### Browser DevTools
-- Chrome DevTools
-- Firefox Developer Tools
-- React DevTools
-- Redux DevTools
-
-## Best Practices
-
-### 1. Choose the Right Tool
-
-Select tools based on:
-- Project requirements
-- Team expertise
-- Performance needs
-- Scalability requirements
-- Community support
-
-### 2. Keep Dependencies Updated
-
-```bash
-npm outdated
-npm update
-```
-
-### 3. Use TypeScript for Large Projects
-
-TypeScript provides type safety and better developer experience for large codebases.
-
-### 4. Implement Proper Testing
-
-Use a combination of unit, integration, and e2e tests.
-
-### 5. Optimize Bundle Size
-
-Use code splitting and lazy loading:
-
-```javascript
-import { lazy, Suspense } from 'react';
-
-const Dashboard = lazy(() => import('./Dashboard'));
-
-function App() {
- return (
- {user.name}
)}
+ 
+
+
+For more details about the technology stack, please refer to [Technology Stack](/tech-stack).
+
+| Artifact | Design time programming language | Code generation approach | Generated artifact |
+| ------------------------------ | ------------------------------------------------------------------------------------------- | ------------------------------------------- | -------------------------------------------------------------------------------------------- |
+| Page Markup | HTML-like syntax (WML) | React Native JSX compliant with Expo | Angular
React"] - MobileUI["Mobile UI
React Native
Expo 54"] + MobileUI["Mobile UI
React Native
Expo"] end %% Binding Layer @@ -91,4 +90,3 @@ flowchart TB BackendServices --> JavaServices ``` - diff --git a/docs/user-interfaces/mobile/develop/create-reactnative-app-project/reactnative-project-structure.mdx b/docs/user-interfaces/mobile/develop/create-reactnative-app-project/reactnative-project-structure.mdx new file mode 100644 index 0000000..3faf400 --- /dev/null +++ b/docs/user-interfaces/mobile/develop/create-reactnative-app-project/reactnative-project-structure.mdx @@ -0,0 +1,132 @@ +--- +last_update: { author: 'Praneeth Reddy' } +--- + +# Working with Generated React Native Code + +WaveMaker generates an Expo-based React Native project from your **mobile** project's design-time source in Studio (pages, variables, and configuration)—not from a web project. The generated code follows React Native conventions while preserving WaveMaker's runtime engine, data bindings, and page composition model. The generated code is modular, readable and production ready. + +**Key characteristics of the generated React Native code include:** + +- **Component Based Page Architecture:** Each WaveMaker page is generated as a self-contained module under `src/pages/` with the following structure: + - A React Native component file (`PageName.component.js`) that defines the page UI layout + - A page-specific stylesheet (`PageName.style.js`) using React Native StyleSheet + - A script file (`PageName.script.js`) for page behavior and lifecycle hooks + - A variable definition file (`PageName.variables.js`) for page state, service bindings, and data flow + +- **WaveMaker Runtime Integration**: The generated React Native components are bound to the WaveMaker runtime. The runtime layer manages: + - Page lifecycle (initialization, ready state, teardown) + - Two-way data binding between UI components and variables + - Service invocation and response mapping + - Navigation and event wiring + +- **Expo Configuration**: The generated project uses Expo for native module management. `app.json` defines the Expo configuration and `wm_rn_config.json` provides WaveMaker-specific settings including plugin registrations and feature flags. + +### Generated Project Structure + +```text +project-expo-app/ +├── App.js # Application entry point +├── app.json # Expo configuration +├── app.style.js # Application-level styles +├── app.theme.js # Theme configuration +├── package.json # NPM dependencies and scripts +├── babel.config.js # Babel configuration +├── metro.config.js # Metro bundler configuration +├── bootstrap.js # Runtime bootstrap +├── wm_rn_config.json # WaveMaker plugin and feature configuration +├── font.config.js # Custom font configuration +│ +├── assets/ # Static assets (images, fonts, icons) +│ +├── src/ +│ ├── app.variables.js # Application-level variables and service bindings +│ ├── device-permission-service.js +│ ├── device-plugin-service.js +│ ├── pages/ # Generated page modules +│ │ ├── pages-config.js # Page routing configuration +│ │ ├── Main/ +│ │ │ ├── Main.component.js # Page UI layout +│ │ │ ├── Main.script.js # Page logic and event handlers +│ │ │ ├── Main.style.js # Page styles (React Native StyleSheet) +│ │ │ └── Main.variables.js # Page variables and data bindings +│ │ ├── Login/ +│ │ └── ... +│ ├── partials/ # Reusable partial page fragments +│ ├── prefabs/ # Prefab components +│ └── extensions/ # Custom extensions +│ +├── theme/ # Design token theme files +├── scripts/ # Build and utility scripts +└── android/ # Native Android project (generated by prebuild) +``` + +### Page Module Structure + +Each WaveMaker page is generated as a standalone module. UI, logic, state, and styles are split across separate files. + +```mermaid +flowchart TD + A[WaveMaker Page] --> B["PageName.component.js
Page UI Layout"] + A --> C["PageName.style.js
React Native StyleSheet"] + A --> D["PageName.variables.js
Page Variables & Data Bindings"] + A --> E["PageName.script.js
Custom Page Logic & Events"] +``` + +### Studio Markup to Generated Code + +WaveMaker Markup (WML) defined in Studio: + +```html +
Component Definition
Extends BasePageComponent] - - C --> D[Main.component.html
Page UI Layout] - C --> E[Main.component.css
Page Styling] - C --> F[Main.component.variable.ts
Page Variables & State] - C --> G[Main.component.expression.ts
Data Bindings & Expressions] - C --> H[Main.component.script.js
Custom Page Logic] -``` - - -#### Generated Angular Markup of WaveMaker Page -```html -
-
-
- @if (compilePageContent) {{{onPageContentReady()}}}
-
-
-
-```
-
-
-
-
diff --git a/docs/user-interfaces/mobile/develop/create-web-app-project/react-project-structure.mdx b/docs/user-interfaces/mobile/develop/create-web-app-project/react-project-structure.mdx
deleted file mode 100644
index fbabd01..0000000
--- a/docs/user-interfaces/mobile/develop/create-web-app-project/react-project-structure.mdx
+++ /dev/null
@@ -1,180 +0,0 @@
----
-last_update: { author: 'Raj Kumar Reddy Abbadi' }
----
-
-# Working with Generated React Code
-
-WaveMaker allows applications to be exported as a standard React (Next.js) project, producing a complete frontend codebase that follows modern React and Next.js conventions while preserving WaveMaker’s runtime engine, data bindings, and page composition model. The generated code aligns with React best practices and is structured to be modular, maintainable, and production ready, while accurately reflecting the UI, logic, and data bindings defined in WaveMaker Studio.
-
-The exported project includes a fully configured Next.js application with TypeScript support, environment configuration, static assets, page modules, and WaveMaker runtime wiring. This enables teams to work with a familiar React ecosystem while continuing to benefit from WaveMaker’s low-code page composition and service binding model.
-
-**Key characteristics of the generated React code include:**
- - **Component Based Page Architecture:** Each WaveMaker page is generated as a self-contained React page module, typically organized under react-pages/ with the following structure:
- - A routing entry (```page.tsx```) to integrate with Next.js navigation
- - A React component file (```[PageName].component.tsx```) that defines the page’s UI layout
- - A page-specific stylesheet (```[PageName].css```)
- - A script/controller file (```[PageName].script.js```) for page behavior and lifecycle hooks
- - A variable definition file (```[PageName].variable.ts```) for page state, service bindings, and data flow
-
- ```mermaid
- flowchart TD
- A["WaveMaker Studio"]
- A --> B["React Export (Next.js + TypeScript)"]
- B --> E["React Pages (Generated)"]
-
- %% Page Structure
- E --> E1["page.tsx (Route Entry)"]
- E --> E2["PageName.component.tsx (UI Layout)"]
- E --> E3["PageName.css (Page Styles)"]
- E --> E4["PageName.script.js (Page Logic)"]
- E --> E5["PageName.variable.ts (State and API Bindings)"]
-
- %% Runtime Integration
- E2 --> H["WaveMaker Runtime Layer"]
- ```
- This structure enforces a clear separation of concerns between UI layout, styling, behavior, and data, making individual pages easier to maintain, test, and evolve independently without impacting unrelated parts of the application.
-
- - **WaveMaker Runtime Integration with React**: The generated React components are not plain React components; they are bound to the WaveMaker runtime. The runtime layer manages:
- - Page lifecycle (initialization, ready state, teardown)
- - Two-way data binding between UI components and variables
- - Service invocation and response mapping
- - Navigation and event wiring
-
- This allows React to serve as the rendering framework while WaveMaker continues to control page composition, data flow, and interaction patterns defined in Studio.
-
- - **Security & Performance Optimizations**: The exported React application leverages Next.js production features and standard frontend optimizations.
- - Route-level rendering via Next.js for optimized page loading
- - Tree-shaking and code-splitting during production builds to reduce bundle size
- - Static asset optimization for images and public files
- - Environment-based configuration using .env for separating development and production settings
-
- These practices ensure the generated React app is secure, performant, and suitable for enterprise grade deployments.
-
- - **Deployment Ready Frontend Output**: The React project compiles into standard static and server-rendered assets (depending on Next.js configuration), making it suitable for:
- - Hosting on traditional web servers
- - Deployment on CDNs
- - Integration into CI/CD pipelines
- - Containerized deployment environments
-
- This allows the exported frontend to fit seamlessly into modern DevOps workflows and frontend deployment pipelines, similar to hand crafted React/Next.js applications.
-
-### Steps to Export a WaveMaker Project as React ZIP
-
-- **Open your project in WaveMaker Studio** Make sure the project you want to export is loaded and ready.
-- **Click on “Export Project”** This opens the export options menu.
-- **Select “Project as React ZIP”** Choose the option to export your application as an React source bundle.
-- **Confirm the Export Job** A dialog appears saying the export job has been created (Click OK to proceed)
-- **Open Project Notifications** Click the Project Notification icon to view background jobs.
-- **Navigate to the Jobs Tab** In the popup, go to the Jobs tab to see export progress.
-- **Find the Export Job** Locate the job related to “React ZIP export”.
-- **Download the React ZIP** Click the Download button for the completed job.
-
-### Understanding the WaveMaker React Project Structure
-
-When you export a WaveMaker application as a React ZIP, you get a standard React (Next.js + TypeScript) project with WaveMaker-specific runtime, page composition, and build layers on top.
-
-The exported project follows modern React and Next.js conventions while preserving WaveMaker’s low-code model for UI composition, event handling, and data binding. This allows teams to work in a familiar React ecosystem without losing the productivity benefits of WaveMaker Studio.
-
-```javascript
-Documentation-react-app/
-├─ .build/ // Used for internal build metadata.
-|
-├─ .env // Environment variables (API URLs, secrets, runtime configs)
-|
-├─ .npmignore // Files to exclude when publishing package (if used as lib)
-|
-├─ .prettierrc // Code formatting rules for consistent styling across the team
-|
-├─ README.md // Project documentation and setup instructions
-|
-├─ next-env.d.ts // Next.js TypeScript environment definitions (auto-generated)
-|
-├─ next.config.ts // Next.js configuration Controls routing, builds, environment variables, etc.
-|
-├─ package.json // Project metadata + dependencies + scripts (npm run dev/build)
-|
-├─ package-lock.json // Locked dependency versions (auto-generated)
-|
-├─ tsconfig.json // TypeScript compiler configuration
-|
-├─ app // Main application source code
-│ ├─ _app.tsx // Root React wrapper component.
-│ ├─ app.css // Global CSS styles for the entire application
-│ ├─ app.script.js // Wavemaker runtime bootstrap file
-│ ├─ (other generated folders/files) // Pages, Components, Services, Variables, Routes
-│ ├─ react-pages
-│ ├─ page.tsx // Page Router / Entry Wrapper (Registers the page with Next.js routing)
-│ ├─ [PageName].component.tsx // Main UI Layout (actual React component for your page UI)
-│ ├─ [PageName].css // Page Level Styling (CSS scoped to this page)
-│ ├─ [PageName].script.js // Page Logic & Events (page specific JavaScript logic)
-│ ├─ [PageName].variable.ts // Page State & Data Binding (page level state & variables)
-│
-├─ public
-│ └─ Static assets (served directly by the web server)
-│ ├─ Readme.txt // Static assets info
-│ ├─ files // Public downloadable files (PDFs, docs, exports)
-│ ├─ i18n // Localization files
-│ │ └─ en.json // English translations for UI labels and messages
-│ └─ images // UI branding assets
-│ ├─ imagelists // Default UI images
-│ └─ logos // App branding
-
-```
-
-### WaveMaker Page Component Structure
-
-In a WaveMaker React export, each WaveMaker page is generated as a standalone React component.
-All the UI, logic, state, and bindings for a page are split across multiple files to separate concerns and make customization safer.
-
-#### Files Generated for Each WaveMaker Page
-Each wavemaker page (for example: **Main/**) contains the following files:
- - **Main.component.html** Contains the HTML template for the page (All WaveMaker components and layout definitions are rendered here)
- - **Main.component.css** Holds page specific styles
- - **Main.component.script.js** Intended for developer written JavaScript logic
- - **Main.component.ts** Declares the React component for the page (Wires together template, styles, variables, and expressions)
- - **Main.component.variable.ts** Contains all WaveMaker generated page variables
- - **Main.component.expression.ts** Contains auto generated expression logic (🚫 Do not edit manually)
-
-This modular structure helps keep presentation, behavior, expressions, and state management cleanly organized.
-
-```mermaid
-flowchart TD
- B[WaveMaker Page] --> C[Main.component.tsComponent Definition
Extends BasePageComponent] - - C --> D[Main.component.html
Page UI Layout] - C --> E[Main.component.css
Page Styling] - C --> F[Main.component.variable.ts
Page Variables & State] - C --> G[Main.component.expression.ts
Data Bindings & Expressions] - C --> H[Main.component.script.js
Custom Page Logic] -``` - - -#### Generated React Markup of WaveMaker Page -```html -
-
- {error && {error}}
-
- );
-};
-```
-
-## Related Documentation
-
-- [UI Event handling](#)
diff --git a/docs/user-interfaces/mobile/develop/integrating-with-apis/bind-expressions.mdx b/docs/user-interfaces/mobile/develop/integrating-with-apis/bind-expressions.mdx
new file mode 100644
index 0000000..6bff786
--- /dev/null
+++ b/docs/user-interfaces/mobile/develop/integrating-with-apis/bind-expressions.mdx
@@ -0,0 +1,156 @@
+---
+last_update: { author: "Praneeth Reddy" }
+---
+
+# Bind expressions
+
+In a mobile app, widgets show data and capture input through **bindings**. In Studio you connect a widget property to a [variable](/docs/user-interfaces/mobile/develop/integrating-with-apis/variables), another widget, a project resource, a JavaScript expression, or a localized message. When you run or export the app, those bindings compile into the generated **React Native (Expo)** project and update the UI when the underlying data changes.
+
+Bindings serve two roles:
+
+- **Display and edit data**: connect variable fields (or expressions) to labels, lists, forms, and inputs
+- **Coordinate variables**: pass filters or parameters from one variable to another
+
+---
+
+## Bind widgets in Studio
+
+After you create variables on the page or at app scope, bind them to widgets so the running app can load and show data.
+
+1. Select a widget on the canvas.
+2. In the **Properties** panel, find a property that supports binding (marked with the bind chain icon).
+3. Click the bind icon to open the **Bind** dialog.
+4. Choose a source (variable, widget, resource, expression, or message), then click **Bind**.
+
+Studio shows whether the binding is valid before you save. You can edit or clear bindings from the same icon.
+
+From the Bind dialog you can:
+
+- Browse binding targets with field names and data types
+- Bind several fields in one pass when the dialog supports multi-field binding
+- Bind at object level (for example a whole `dataset` or `formdata` object) when appropriate
+
+---
+
+## Bind dialog sources
+
+| Source | Use for |
+| ---------------------- | ------------------------------------------------------------------------------------------ |
+| **Variable** | Page or app variables (`Variables.*`), including service and CRUD variables |
+| **Widgets** | Another widget on the same page (`Widgets.*`), such as form `formdata` or a list selection |
+| **Resource** | Imported assets (images, fonts, and other files under project resources) |
+| **Use Expression** | JavaScript expressions and formatter pipes for display logic |
+| **Localized Messages** | Keys from the application message repository (`appLocale.*`) |
+
+You can bind to variables and widgets defined on the **current page** or at **app** scope.
+
+---
+
+## Binding to variables
+
+Bind variable data to widget properties (for example `dataset` on a **List**, `datavalue` on a **Text** or form field, or `picturesource` on an **Image**).
+
+For **service variables** and other variables that fetch from the backend:
+
+- Enable **Request data on page load** (or the equivalent for app-scoped variables) so the widget has data when the page opens
+- Use **Update data on input change** when the variable should re-run after a filter field or input parameter changes
+
+See [Variables and types](/docs/user-interfaces/mobile/develop/integrating-with-apis/variables) for variable types, scope, and creation steps.
+
+---
+
+## Binding variables to each other
+
+Variables can bind to each other when one variable needs **filters** or **input parameters** from another. Configure filters and inputs on the variable **Data** tab in Studio.
+
+For example, a CRUD variable for `Employee` can filter on `departmentId` when a page variable or widget supplies that value. The dependent variable runs with the updated parameters when **Update data on input change** is enabled.
+
+---
+
+## Binding widget to widget
+
+Bind one widget property to another on the same page. Common patterns on mobile:
+
+- A **Text** or **Label** bound to the selected item from a **List**
+- A form field bound to `Widgets.myForm.formfields.status.datavalue`
+- A **Switch** or **Select** driving a filter on another widget through a bound variable
+
+Use the **Widgets** tab in the Bind dialog to pick the source widget and property.
+
+---
+
+## Binding to resources
+
+Bind image, icon, or other asset properties to files you **import** into the project (Resources in Studio). Import the resource first, then select it from the **Resource** tab in the Bind dialog.
+
+---
+
+## Binding with expressions
+
+On the **Use Expression** tab, write a **JavaScript** expression for display or computed values. Studio stores Angular-style bind expressions in the project; mobile codegen transpiles them into JavaScript watched in the generated app.
+
+Simple concatenation example:
+
+```javascript
+"User Name is: " + datavalue
+```
+
+Build richer expressions in the expression editor: pick variables and widgets from the left panel, use operators, and apply **formatters** (pipes) for dates, numbers, and currency.
+
+For complex logic, prefer a function in the page **Script** tab and call it from an expression or event handler.
+
+### Expression formatters (mobile)
+
+These formatters are available in bind expressions for mobile apps (implemented in the React Native runtime):
+
+| Formatter | Purpose |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| **numberToString** | Format a number as a localized string; **fraction size** sets decimal places (for example `12345.6789` with size `3` becomes `12,345.679`) |
+| **prefix** | Add text before the value |
+| **suffix** | Add text after the value |
+| **stringToNumber** | Parse a string to a number (for example `'123'` → `123`) |
+| **timeFromNow** | Relative time (for example `an hour ago`); uses **moment** with locale support in the app |
+| **toCurrency** | Format as currency with symbol and precision |
+| **toDate** | Format a date with a chosen pattern |
+
+You can add **custom formatters** under `src/extensions/formatters.js` in the generated project; they register as `custom.
-
-```mermaid
-%%{init: {'theme': 'default', 'flowchart': {'nodeSpacing': 20, 'rankSpacing': 25}}}%%
-flowchart TD
- A[Main Page]
- B[goToPage_UserDetails]
- C[#UserDetails?id=101]
- D[UserDetails Page]
- E[API Call]
- F[Data Rendered]
-
- A -->|id=101| B
- B --> C
- C --> D
- D --> E
- E --> F
-```
-
+ ```mermaid
+ %%{init: {'theme': 'default', 'flowchart': {'nodeSpacing': 20, 'rankSpacing': 25}}}%%
+ flowchart TD
+ A[Main Page]
+ B[goToPage_UserDetails]
+ C["#/UserDetails?id=101"]
+ D[UserDetails Page]
+ E[API Call]
+ F[Data Rendered]
+
+ A -->|id=101| B
+ B --> C
+ C --> D
+ D --> E
+ E --> F
+ ```
-
### Events
-WaveMaker provides lifecycle and system events at the page level, allowing you to execute custom logic when specific actions occur.
-
-- **On Attach**: This event handler is called when the page instance from cache is attached to dom.
- ```JavaScript
- Page.onAttach = function ($event, widget) {
- // Reset filter widgets to ensure a clean state
- Page.Widgets.orderFilter.reset();
-
- // Fetch the latest order data when the page becomes active again
- Page.Variables.GetOrders.invoke();
- };
- ```
-
-- **On Detach**: This event handler is called when the page instance is detached from dom and saved in cache.
- ```JavaScript
- Page.onDetach = function ($event, widget) {
- // ex-1: Stop auto-refresh
- if (Page.dashboardRefreshTimer) {
- clearInterval(Page.dashboardRefreshTimer);
- Page.dashboardRefreshTimer = null;
- }
-
- // Clear page-specific cached data
- Page.Variables.selectedEmployee.setData(null);
- Page.Variables.filterCriteria.setData({});
- };
- ```
-- **On Destroy**: This event handler is called when the page is destroyed.
- ```JavaScript
- Page.onDestroy = function ($event, widget) {
- // Remove custom event listeners
- window.removeEventListener("customEvent", Page.handleCustomEvent);
-
- // Clear local storage for page-specific entries
- localStorage.removeItem("tempOrderData");
- };
- ```
-- **On Orientation Change**: This event handler is called when the screen orientation is changed (mobile/tablet).
- ```JavaScript
- Page.onOrientationChange = function ($event, widget, data) {
- if (event.matches) {
- Page.Widgets.sideMenu.show(); // Portrait layout
- } else {
- Page.Widgets.sideMenu.hide(); // Landscape layout
- }
- };
- ```
-- **On Resize**: This event handler is called when the window is resized.
- ```JavaScript
- Page.onResize = function (event, widget, data) {
- if (data.width < 768) {
- Page.Widgets.orderGrid.setProperty("columnMode", "stack"); // Smaller screen adjustments
- } else {
- Page.Widgets.orderGrid.setProperty("columnMode", "grid"); // Larger screen layout
- }
- };
- ```
+WaveMaker exposes page-level lifecycle and viewport events (`onReady`, `onAttach`, `onDetach`, `onDestroy`, `onOrientationchange`, `onResize`) in the React Native runtime so you can run custom logic at the right time. **Cache** and **Refresh data on attach** above affect when **on Attach** and **on Detach** fire.
+For when each event runs, full sample handlers (including `onDetach` cleanup and orientation or resize `data`), and scripting patterns, see [Application and page events](../events/app-page-events#page-events).
diff --git a/docs/user-interfaces/mobile/develop/page/types.mdx b/docs/user-interfaces/mobile/develop/page/types.mdx
index 6542328..9e410c6 100644
--- a/docs/user-interfaces/mobile/develop/page/types.mdx
+++ b/docs/user-interfaces/mobile/develop/page/types.mdx
@@ -1,22 +1,50 @@
---
-last_update: { author: "Raj Kumar Reddy Abbadi" }
+last_update: { author: "Praneeth Reddy" }
---
+
# Types of pages
-There are two types of pages that can be created in an application:
+WaveMaker mobile apps use **pages** for routable screens and **partials** for reusable UI fragments you embed inside a page or layout region. You design each one in Studio using **Markup**, **Script**, and **Style** views with WML tags such as `wm-page` and `wm-partial`.
+
+## Page
+
+A **page** is a full screen the app can navigate to. Each page maps to a route in the generated React Native app when you connect it to a **Navigation** action or tab bar item.
+
+Typical uses:
+
+- Login, dashboard, or settings screens
+- List and detail flows opened from navigation actions
+- Any view that should appear as its own destination in the app stack
+
+See [Page elements](/docs/user-interfaces/mobile/develop/page) for the default mobile layout (mobile navbar, content, left panel, mobile tabbar).
+
+## Partial
+
+A **partial** is a reusable fragment. You do not navigate to a partial on its own. You reference it from a page or from a layout widget (for example `wm-left-panel` with `content="leftnav"`).
+
+Partials keep shared UI in one place so every page stays consistent. Common mobile partials include:
+
+| Partial role | Mobile layout | Typical content |
+| ---------------- | ---------------------------------------------------- | -------------------------------------------------------------------------- |
+| Left navigation | `wm-left-panel` drawer (`type="left-panel"`) | `wm-nav` links, section menus, profile shortcuts |
+| Embedded section | Inside `wm-page-content`, tabs, accordion, or wizard | Filters, shared form headers, repeated cards |
+| Popover overlay | `wm-popover` on a page (`content="partialName"`) | Menus, drill-down detail, contextual actions in a dropdown or action sheet |
+
+A partial can also supply content for the **`wm-popover`** widget. Set `content` to the partial name so the overlay opens on the current page without navigation.
-- Page
-- Partial
+The **mobile navbar** and **mobile tabbar** are usually defined on each **page** markup. The left navigation drawer is the partial teams reuse most often.
-### Page
-Which can be loaded independently in the application. These act as a route within the application when associated with navigation events.
+Example left-panel partial reference on a page:
-### Partial
-These are associated with a component within a page. Common sections of a page such as headers or left navigation are typically built as reusable partials. This allows the same component to be used consistently across multiple pages in the application.
-- **Header:** The header appears at the top of the page and usually contains key elements like the page title, logo, or important actions.
-- **Top Nav:** The top navigation sits below or within the header and is used to move between major sections of the application. It gives users a clear, consistent way to navigate high-level pages without losing context.
-- **Left Panel:** The left panel typically contains menus, links, or navigation options related to the main content. It’s often used for section-based navigation and helps users quickly switch between related views or features.
-- **Right Panel:** The right panel is usually used for secondary content such as filters, additional details, settings, or contextual actions. It supports the main content without taking focus away from it.
-- **Footer:** The footer appears at the bottom of the page and is used for supplementary information like links, legal text, version details, or secondary actions. It provides helpful information without cluttering the main page area.
+```html
+
-
-
-
-
-
-
-
- 00:00: This video provides a comprehensive overview of Auto layout in wave maker.
-00:04: We will explore its features approaches and controls to help you create efficient and consistent layouts.
-00:12: Auto layout in wave maker is a system designed to manage component layout and spacing without requiring direct CSS authoring.
-00:20: This feature provides developers with a visual layout workflow that closely aligns with how designers typically create and reason about layouts.
-00:29: By abstracting Common layout patterns into configurable properties within the editor Auto layout enables the efficient creation of both simple and complex UI structures.
-00:40: It can be applied at both the page and section levels ensuring consistent layout behavior across an application.
-00:47: The underlying layout model is loosely based on css3 flexbox principles.
-00:52: let's dive in
-00:54: Auto layout offers two primary approaches the first is the component first approach where you bring components into the canvas, and then visually group and align them.
-01:05: Multi-select sibling components right click and select add Auto layout to wrap them in an auto layout container then configure the layout.
-01:14: The second approach is layout first which requires prior planning.
-01:19: Create layout containers first then drop in child components like anchors labels and pictures to create your page or sections.
-01:28: Auto layout is provided in the wavemaker component called container.
-01:33: Selecting a container in the canvas shifts Focus to the properties panel revealing the layout section with various UI controls.
-01:42: The direction control dictates how child components are laid out within the container?
-01:47: Selecting row Alliance components from left to right.
-01:51: selecting column arranges them from top to bottom
-01:54: the wrap toggle when enabled allows children to move to the next row or column if the container runs out of space
-02:02: For the wrap property to function correctly. Make sure to define the relevant dimension such as width or height using a number or percentage.
-02:10: The Width control determines the container’s horizontal size.
-02:15: Fill stretches the container to occupy all available horizontal space.
-02:20: Hug adjusts the width based on the content inside the container.
-02:24: A custom number sets a fixed width.
-02:28: The Height control works similarly to Width but affects the vertical dimension of the container, allowing you to control how much vertical space it occupies.
-02:37: Fill stretches the container vertically to use available space.
-02:41: Hug adjusts the height based on the content.
-02:44: A custom number defines a fixed height.
-02:48: The Clip Content toggle controls how overflowing content is handled.
-02:52: When enabled, scrolling options become available if the content exceeds the container size.
-02:59: You can choose horizontal scrolling, vertical scrolling, or both, depending on how the content overflows.
-03:05: the alignment feature positions child components within the container
-03:10: it uses a 3i 3 grid system to define placement.
-03:14: This provides 9 alignment options such as top left top Center and bottom right?
-03:22: The Gap feature controls the spacing between child components
-03:26: when direction is set to Row the spacing is applied horizontally.
-03:31: When direction is set to Column the spacing is applied vertically.
-03:35: Gap values can be configured in two ways.
-03:39: Auto child components expand to fill the available space
-03:44: custom value
-03:45: spacing is defined explicitly using units.
-03:49: padding provides spacing around the content inside the container
-03:53: You can set padding for left right and top bottom.
-03:57: You can also assign padding independently for all four sides for finer control.
-04:02: in summary Auto layout in wave maker offers a powerful and flexible system for managing component layouts
-04:11: by understanding its approaches and controls developers can create efficient and consistent user interfaces.
-
+
+
+
+
+
+
+00:00: This video provides a comprehensive overview of Auto layout in wave maker.
+00:04: We will explore its features approaches and controls to help you create efficient and consistent layouts.
+00:12: Auto layout in wave maker is a system designed to manage component layout and spacing without requiring direct CSS authoring.
+00:20: This feature provides developers with a visual layout workflow that closely aligns with how designers typically create and reason about layouts.
+00:29: By abstracting Common layout patterns into configurable properties within the editor Auto layout enables the efficient creation of both simple and complex UI structures.
+00:40: It can be applied at both the page and section levels ensuring consistent layout behavior across an application.
+00:47: The underlying layout model is loosely based on css3 flexbox principles.
+00:52: let's dive in
+00:54: Auto layout offers two primary approaches the first is the component first approach where you bring components into the canvas, and then visually group and align them.
+01:05: Multi-select sibling components right click and select add Auto layout to wrap them in an auto layout container then configure the layout.
+01:14: The second approach is layout first which requires prior planning.
+01:19: Create layout containers first then drop in child components like anchors labels and pictures to create your page or sections.
+01:28: Auto layout is provided in the WaveMaker component called container.
+01:33: Selecting a container in the canvas shifts Focus to the properties panel revealing the layout section with various UI controls.
+01:42: The direction control dictates how child components are laid out within the container?
+01:47: Selecting row Alliance components from left to right.
+01:51: selecting column arranges them from top to bottom
+01:54: the wrap toggle when enabled allows children to move to the next row or column if the container runs out of space
+02:02: For the wrap property to function correctly. Make sure to define the relevant dimension such as width or height using a number or percentage.
+02:10: The Width control determines the container’s horizontal size.
+02:15: Fill stretches the container to occupy all available horizontal space.
+02:20: Hug adjusts the width based on the content inside the container.
+02:24: A custom number sets a fixed width.
+02:28: The Height control works similarly to Width but affects the vertical dimension of the container, allowing you to control how much vertical space it occupies.
+02:37: Fill stretches the container vertically to use available space.
+02:41: Hug adjusts the height based on the content.
+02:44: A custom number defines a fixed height.
+02:48: The Clip Content toggle controls how overflowing content is handled.
+02:52: When enabled, scrolling options become available if the content exceeds the container size.
+02:59: You can choose horizontal scrolling, vertical scrolling, or both, depending on how the content overflows.
+03:05: the alignment feature positions child components within the container
+03:10: it uses a 3i 3 grid system to define placement.
+03:14: This provides 9 alignment options such as top left top Center and bottom right?
+03:22: The Gap feature controls the spacing between child components
+03:26: when direction is set to Row the spacing is applied horizontally.
+03:31: When direction is set to Column the spacing is applied vertically.
+03:35: Gap values can be configured in two ways.
+03:39: Auto child components expand to fill the available space
+03:44: custom value
+03:45: spacing is defined explicitly using units.
+03:49: padding provides spacing around the content inside the container
+03:53: You can set padding for left right and top bottom.
+03:57: You can also assign padding independently for all four sides for finer control.
+04:02: in summary Auto layout in wave maker offers a powerful and flexible system for managing component layouts
+04:11: by understanding its approaches and controls developers can create efficient and consistent user interfaces.
+
-
-
- {photo && 
}
-
- );
-};
-```
-
-### Geolocation Plugin
-
-Get device location coordinates.
-
-**Installation:**
-```bash
-npm install @capacitor/geolocation
-npx cap sync
-```
-
-**Usage:**
-```javascript
-import { Geolocation } from '@capacitor/geolocation';
-
-const LocationComponent = () => {
- const [position, setPosition] = useState(null);
- const [watching, setWatching] = useState(false);
- const [watchId, setWatchId] = useState(null);
-
- const getCurrentPosition = async () => {
- try {
- const coordinates = await Geolocation.getCurrentPosition({
- enableHighAccuracy: true,
- timeout: 10000,
- });
-
- setPosition({
- latitude: coordinates.coords.latitude,
- longitude: coordinates.coords.longitude,
- accuracy: coordinates.coords.accuracy,
- });
- } catch (error) {
- console.error('Location error:', error);
- }
- };
-
- const startWatching = async () => {
- const id = await Geolocation.watchPosition(
- { enableHighAccuracy: true },
- (position, err) => {
- if (err) {
- console.error('Watch error:', err);
- return;
- }
- setPosition({
- latitude: position.coords.latitude,
- longitude: position.coords.longitude,
- });
- }
- );
-
- setWatchId(id);
- setWatching(true);
- };
-
- const stopWatching = () => {
- if (watchId) {
- Geolocation.clearWatch({ id: watchId });
- setWatching(false);
- }
- };
-
- return (
-
-
-
- {position && (
-
- );
-};
-```
-
-### Push Notifications Plugin
-
-Send and receive push notifications.
-
-**Installation:**
-```bash
-npm install @capacitor/push-notifications
-npx cap sync
-```
-
-**Usage:**
-```javascript
-import { PushNotifications } from '@capacitor/push-notifications';
-
-const NotificationSetup = () => {
- useEffect(() => {
- // Request permission
- PushNotifications.requestPermissions().then(result => {
- if (result.receive === 'granted') {
- PushNotifications.register();
- }
- });
-
- // Register with FCM/APNS
- PushNotifications.addListener('registration', token => {
- console.log('Push registration success, token: ' + token.value);
- // Send token to your server
- sendTokenToServer(token.value);
- });
-
- // Handle errors
- PushNotifications.addListener('registrationError', err => {
- console.error('Registration error: ', err.error);
- });
-
- // Handle received notifications
- PushNotifications.addListener('pushNotificationReceived', notification => {
- console.log('Push received: ' + JSON.stringify(notification));
- showNotification(notification);
- });
-
- // Handle notification tap
- PushNotifications.addListener('pushNotificationActionPerformed', notification => {
- console.log('Push action performed: ' + JSON.stringify(notification));
- handleNotificationClick(notification.notification.data);
- });
-
- return () => {
- PushNotifications.removeAllListeners();
- };
- }, []);
-
- return
-
- )}
- Latitude: {position.latitude}
-Longitude: {position.longitude}
-Accuracy: {position.accuracy}m
-Push notifications enabled
;
-};
-```
-
-### Device Information Plugin
-
-Get device hardware and software information.
-
-**Installation:**
-```bash
-npm install @capacitor/device
-npx cap sync
-```
-
-**Usage:**
-```javascript
-import { Device } from '@capacitor/device';
-
-const DeviceInfo = () => {
- const [deviceInfo, setDeviceInfo] = useState(null);
-
- useEffect(() => {
- const getDeviceInfo = async () => {
- const info = await Device.getInfo();
- const batteryInfo = await Device.getBatteryInfo();
- const languageCode = await Device.getLanguageCode();
-
- setDeviceInfo({
- model: info.model,
- platform: info.platform,
- operatingSystem: info.operatingSystem,
- osVersion: info.osVersion,
- manufacturer: info.manufacturer,
- isVirtual: info.isVirtual,
- batteryLevel: batteryInfo.batteryLevel,
- isCharging: batteryInfo.isCharging,
- language: languageCode.value,
- });
- };
-
- getDeviceInfo();
- }, []);
-
- if (!deviceInfo) return Loading...
;
-
- return (
-
-
- );
-};
-```
-
-### File System Plugin
-
-Read and write files on the device.
-
-**Installation:**
-```bash
-npm install @capacitor/filesystem
-npx cap sync
-```
-
-**Usage:**
-```javascript
-import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
-
-const FileManager = () => {
- const writeFile = async () => {
- try {
- await Filesystem.writeFile({
- path: 'myfile.txt',
- data: 'Hello, World!',
- directory: Directory.Documents,
- encoding: Encoding.UTF8,
- });
- console.log('File written successfully');
- } catch (error) {
- console.error('Write error:', error);
- }
- };
-
- const readFile = async () => {
- try {
- const contents = await Filesystem.readFile({
- path: 'myfile.txt',
- directory: Directory.Documents,
- encoding: Encoding.UTF8,
- });
- console.log('File contents:', contents.data);
- return contents.data;
- } catch (error) {
- console.error('Read error:', error);
- }
- };
-
- const deleteFile = async () => {
- try {
- await Filesystem.deleteFile({
- path: 'myfile.txt',
- directory: Directory.Documents,
- });
- console.log('File deleted');
- } catch (error) {
- console.error('Delete error:', error);
- }
- };
-
- const listFiles = async () => {
- try {
- const result = await Filesystem.readdir({
- path: '',
- directory: Directory.Documents,
- });
- console.log('Files:', result.files);
- return result.files;
- } catch (error) {
- console.error('List error:', error);
- }
- };
-
- return (
- Device Information
-Model: {deviceInfo.model}
-Platform: {deviceInfo.platform}
-OS: {deviceInfo.operatingSystem} {deviceInfo.osVersion}
-Manufacturer: {deviceInfo.manufacturer}
-Battery: {deviceInfo.batteryLevel * 100}%
-Charging: {deviceInfo.isCharging ? 'Yes' : 'No'}
-
-
-
-
-
-
- );
-};
-```
-
-### Network Plugin
-
-Monitor network connectivity status.
-
-**Installation:**
-```bash
-npm install @capacitor/network
-npx cap sync
-```
-
-**Usage:**
-```javascript
-import { Network } from '@capacitor/network';
-
-const NetworkStatus = () => {
- const [status, setStatus] = useState(null);
-
- useEffect(() => {
- // Get current status
- Network.getStatus().then(status => {
- setStatus(status);
- });
-
- // Listen for network changes
- const listener = Network.addListener('networkStatusChange', status => {
- console.log('Network status changed', status);
- setStatus(status);
- });
-
- return () => {
- listener.remove();
- };
- }, []);
-
- if (!status) return Checking network...
;
-
- return (
-
-
- );
-};
-```
-
-### Haptics Plugin
-
-Provide haptic feedback.
-
-**Installation:**
-```bash
-npm install @capacitor/haptics
-npx cap sync
-```
-
-**Usage:**
-```javascript
-import { Haptics, ImpactStyle, NotificationType } from '@capacitor/haptics';
-
-const HapticButtons = () => {
- const lightImpact = async () => {
- await Haptics.impact({ style: ImpactStyle.Light });
- };
-
- const mediumImpact = async () => {
- await Haptics.impact({ style: ImpactStyle.Medium });
- };
-
- const heavyImpact = async () => {
- await Haptics.impact({ style: ImpactStyle.Heavy });
- };
-
- const successNotification = async () => {
- await Haptics.notification({ type: NotificationType.Success });
- };
-
- const errorNotification = async () => {
- await Haptics.notification({ type: NotificationType.Error });
- };
-
- const vibrate = async () => {
- await Haptics.vibrate({ duration: 300 });
- };
-
- return (
- Network Status
-Connected: {status.connected ? 'Yes' : 'No'}
-Connection Type: {status.connectionType}
- {!status.connected && ( -
- You are currently offline
-
- )}
-
-
-
-
-
-
-
-
- );
-};
-```
-
-## Third-Party Plugins
-
-### Social Sharing Plugin
-
-Share content to social media and other apps.
-
-**Installation:**
-```bash
-npm install @capacitor/share
-npx cap sync
-```
-
-**Usage:**
-```javascript
-import { Share } from '@capacitor/share';
-
-const ShareButton = ({ title, text, url }) => {
- const handleShare = async () => {
- try {
- await Share.share({
- title: title,
- text: text,
- url: url,
- dialogTitle: 'Share with friends',
- });
- } catch (error) {
- console.error('Share error:', error);
- }
- };
-
- return ;
-};
-```
-
-### Barcode Scanner Plugin
-
-Scan QR codes and barcodes.
-
-**Installation:**
-```bash
-npm install @capacitor-community/barcode-scanner
-npx cap sync
-```
-
-**Usage:**
-```javascript
-import { BarcodeScanner } from '@capacitor-community/barcode-scanner';
-
-const Scanner = () => {
- const [result, setResult] = useState('');
-
- const startScan = async () => {
- // Check permission
- const status = await BarcodeScanner.checkPermission({ force: true });
-
- if (status.granted) {
- // Make background transparent
- BarcodeScanner.hideBackground();
-
- const result = await BarcodeScanner.startScan();
-
- if (result.hasContent) {
- setResult(result.content);
- }
- }
- };
-
- const stopScan = () => {
- BarcodeScanner.showBackground();
- BarcodeScanner.stopScan();
- };
-
- return (
-
-
-
- {result &&
- );
-};
-```
-
-## Creating Custom Plugins
-
-### Plugin Structure
-
-```javascript
-// MyCustomPlugin.swift (iOS)
-import Foundation
-import Capacitor
-
-@objc(MyCustomPlugin)
-public class MyCustomPlugin: CAPPlugin {
- @objc func echo(_ call: CAPPluginCall) {
- let value = call.getString("value") ?? ""
- call.resolve([
- "value": value
- ])
- }
-}
-
-// MyCustomPlugin.java (Android)
-@NativePlugin()
-public class MyCustomPlugin extends Plugin {
- @PluginMethod()
- public void echo(PluginCall call) {
- String value = call.getString("value");
- JSObject ret = new JSObject();
- ret.put("value", value);
- call.resolve(ret);
- }
-}
-```
-
-### TypeScript Interface
-
-```typescript
-// definitions.ts
-export interface MyCustomPlugin {
- echo(options: { value: string }): Promise<{ value: string }>;
-}
-```
-
-### Plugin Registration
-
-```typescript
-// index.ts
-import { registerPlugin } from '@capacitor/core';
-import type { MyCustomPlugin } from './definitions';
-
-const MyPlugin = registerPluginScanned: {result}
} -
-
- );
-};
-```
-
-#### Double Tap Gesture
-
-```jsx
-const DoubleTapComponent = () => {
- const [lastTap, setLastTap] = useState(0);
- const [likes, setLikes] = useState(0);
-
- const handleTouch = () => {
- const now = Date.now();
- const DOUBLE_TAP_DELAY = 300;
-
- if (lastTap && now - lastTap < DOUBLE_TAP_DELAY) {
- handleDoubleTap();
- setLastTap(0);
- } else {
- setLastTap(now);
- }
- };
-
- const handleDoubleTap = () => {
- setLikes(prev => prev + 1);
- };
-
- return (
- Taps: {tapCount}
-
-
- );
-};
-```
-
-#### Long Press Gesture
-
-```jsx
-const LongPressComponent = () => {
- const [isPressed, setIsPressed] = useState(false);
- const pressTimer = useRef(null);
-
- const handleTouchStart = () => {
- pressTimer.current = setTimeout(() => {
- setIsPressed(true);
- handleLongPress();
- }, 500); // 500ms long press threshold
- };
-
- const handleTouchEnd = () => {
- if (pressTimer.current) {
- clearTimeout(pressTimer.current);
- }
- setIsPressed(false);
- };
-
- const handleLongPress = () => {
- console.log('Long press detected!');
- // Show context menu, enable delete mode, etc.
- };
-
- return (
- ❤️ {likes}
-Double tap to like
-
-
- );
-};
-```
-
-### Swipe Gestures
-
-#### Horizontal Swipe
-
-```jsx
-const SwipeComponent = () => {
- const [currentIndex, setCurrentIndex] = useState(0);
- const [touchStart, setTouchStart] = useState(0);
- const [touchEnd, setTouchEnd] = useState(0);
-
- const minSwipeDistance = 50;
-
- const onTouchStart = (e) => {
- setTouchEnd(0);
- setTouchStart(e.targetTouches[0].clientX);
- };
-
- const onTouchMove = (e) => {
- setTouchEnd(e.targetTouches[0].clientX);
- };
-
- const onTouchEnd = () => {
- if (!touchStart || !touchEnd) return;
-
- const distance = touchStart - touchEnd;
- const isLeftSwipe = distance > minSwipeDistance;
- const isRightSwipe = distance < -minSwipeDistance;
-
- if (isLeftSwipe) {
- handleSwipeLeft();
- } else if (isRightSwipe) {
- handleSwipeRight();
- }
- };
-
- const handleSwipeLeft = () => {
- setCurrentIndex(prev => Math.min(prev + 1, items.length - 1));
- };
-
- const handleSwipeRight = () => {
- setCurrentIndex(prev => Math.max(prev - 1, 0));
- };
-
- return (
- Long press me
-
-
- );
-};
-```
-
-#### Swipeable List Item
-
-```jsx
-const SwipeableListItem = ({ children, onDelete, onArchive }) => {
- const [offsetX, setOffsetX] = useState(0);
- const [startX, setStartX] = useState(0);
- const [isSwiping, setIsSwiping] = useState(false);
-
- const handleTouchStart = (e) => {
- setStartX(e.touches[0].clientX);
- setIsSwiping(true);
- };
-
- const handleTouchMove = (e) => {
- if (!isSwiping) return;
-
- const currentX = e.touches[0].clientX;
- const diff = currentX - startX;
-
- // Limit swipe distance
- if (diff < -150) {
- setOffsetX(-150);
- } else if (diff > 150) {
- setOffsetX(150);
- } else {
- setOffsetX(diff);
- }
- };
-
- const handleTouchEnd = () => {
- setIsSwiping(false);
-
- if (offsetX < -100) {
- // Swipe left - delete
- onDelete();
- } else if (offsetX > 100) {
- // Swipe right - archive
- onArchive();
- } else {
- // Snap back
- setOffsetX(0);
- }
- };
-
- return (
-
- {items.map((item, index) => (
-
-
- {item}
-
- ))}
-
- {/* Left action */}
-
- );
-};
-```
-
-### Pan Gesture
-
-Drag and move elements.
-
-```jsx
-const DraggableComponent = () => {
- const [position, setPosition] = useState({ x: 0, y: 0 });
- const [isDragging, setIsDragging] = useState(false);
- const [startPos, setStartPos] = useState({ x: 0, y: 0 });
-
- const handleTouchStart = (e) => {
- setIsDragging(true);
- const touch = e.touches[0];
- setStartPos({
- x: touch.clientX - position.x,
- y: touch.clientY - position.y,
- });
- };
-
- const handleTouchMove = (e) => {
- if (!isDragging) return;
-
- const touch = e.touches[0];
- setPosition({
- x: touch.clientX - startPos.x,
- y: touch.clientY - startPos.y,
- });
- };
-
- const handleTouchEnd = () => {
- setIsDragging(false);
- };
-
- return (
-
- Archive
-
-
- {/* Right action */}
-
- Delete
-
-
- {/* Main content */}
-
- {children}
-
-
-
- );
-};
-```
-
-### Pinch to Zoom
-
-```jsx
-const PinchZoomComponent = ({ children }) => {
- const [scale, setScale] = useState(1);
- const [initialDistance, setInitialDistance] = useState(0);
- const [isPinching, setIsPinching] = useState(false);
-
- const getDistance = (touches) => {
- const dx = touches[0].clientX - touches[1].clientX;
- const dy = touches[0].clientY - touches[1].clientY;
- return Math.sqrt(dx * dx + dy * dy);
- };
-
- const handleTouchStart = (e) => {
- if (e.touches.length === 2) {
- setIsPinching(true);
- setInitialDistance(getDistance(e.touches));
- }
- };
-
- const handleTouchMove = (e) => {
- if (!isPinching || e.touches.length !== 2) return;
-
- const currentDistance = getDistance(e.touches);
- const newScale = (currentDistance / initialDistance) * scale;
-
- // Limit zoom level
- if (newScale >= 0.5 && newScale <= 3) {
- setScale(newScale);
- }
- };
-
- const handleTouchEnd = () => {
- setIsPinching(false);
- };
-
- return (
- Drag me
-
-
- );
-};
-```
-
-### Rotation Gesture
-
-```jsx
-const RotatableComponent = ({ children }) => {
- const [rotation, setRotation] = useState(0);
- const [initialAngle, setInitialAngle] = useState(0);
- const [isRotating, setIsRotating] = useState(false);
-
- const getAngle = (touches) => {
- const dx = touches[1].clientX - touches[0].clientX;
- const dy = touches[1].clientY - touches[0].clientY;
- return Math.atan2(dy, dx) * 180 / Math.PI;
- };
-
- const handleTouchStart = (e) => {
- if (e.touches.length === 2) {
- setIsRotating(true);
- setInitialAngle(getAngle(e.touches) - rotation);
- }
- };
-
- const handleTouchMove = (e) => {
- if (!isRotating || e.touches.length !== 2) return;
-
- const currentAngle = getAngle(e.touches);
- setRotation(currentAngle - initialAngle);
- };
-
- const handleTouchEnd = () => {
- setIsRotating(false);
- };
-
- return (
-
- {children}
-
-
-
- );
-};
-```
-
-## Using Gesture Libraries
-
-### Hammer.js
-
-Popular gesture recognition library.
-
-**Installation:**
-```bash
-npm install hammerjs
-```
-
-**Usage:**
-```jsx
-import { useEffect, useRef } from 'react';
-import Hammer from 'hammerjs';
-
-const HammerComponent = () => {
- const elementRef = useRef(null);
-
- useEffect(() => {
- if (!elementRef.current) return;
-
- const hammer = new Hammer(elementRef.current);
-
- // Enable all gestures
- hammer.get('pinch').set({ enable: true });
- hammer.get('rotate').set({ enable: true });
-
- // Tap
- hammer.on('tap', (e) => {
- console.log('Tap detected', e);
- });
-
- // Double tap
- hammer.on('doubletap', (e) => {
- console.log('Double tap detected', e);
- });
-
- // Press (long tap)
- hammer.on('press', (e) => {
- console.log('Press detected', e);
- });
-
- // Swipe
- hammer.on('swipeleft swiperight swipeup swipedown', (e) => {
- console.log('Swipe detected', e.type, e);
- });
-
- // Pan
- hammer.on('panstart panmove panend', (e) => {
- console.log('Pan event', e.type, e);
- });
-
- // Pinch
- hammer.on('pinchstart pinchmove pinchend', (e) => {
- console.log('Pinch event', e.type, e.scale);
- });
-
- // Rotate
- hammer.on('rotatestart rotatemove rotateend', (e) => {
- console.log('Rotate event', e.type, e.rotation);
- });
-
- return () => {
- hammer.destroy();
- };
- }, []);
-
- return (
-
- {children}
-
-
-
- );
-};
-```
-
-### React Use Gesture
-
-React hooks for gesture handling.
-
-**Installation:**
-```bash
-npm install @use-gesture/react
-```
-
-**Usage:**
-```jsx
-import { useGesture } from '@use-gesture/react';
-import { useSpring, animated } from '@react-spring/web';
-
-const GestureComponent = () => {
- const [{ x, y, scale, rotate }, api] = useSpring(() => ({
- x: 0,
- y: 0,
- scale: 1,
- rotate: 0,
- }));
-
- const bind = useGesture({
- onDrag: ({ offset: [ox, oy] }) => {
- api.start({ x: ox, y: oy });
- },
- onPinch: ({ offset: [scale] }) => {
- api.start({ scale });
- },
- onRotate: ({ offset: [rotate] }) => {
- api.start({ rotate });
- },
- });
-
- return (
- Try different gestures
-
-
- );
-};
-```
-
-## Best Practices
-
-### 1. Prevent Default Behavior
-
-```jsx
-// Prevent page scroll/zoom during gestures
-
- {/* Refresh indicator */}
-
-
- {isRefreshing ? (
- Refreshing...
- ) : pullDistance >= threshold ? (
- Release to refresh
- ) : pullDistance > 0 ? (
- Pull down to refresh
- ) : null}
-
-
- {children}
- e.preventDefault()}
- style={{ touchAction: 'none' }}
->
- {/* Content */}
-
-```
-
-### 2. Provide Visual Feedback
-
-```jsx
-const [isPressed, setIsPressed] = useState(false);
-
-return (
-
-);
-```
-
-### 3. Add Haptic Feedback
-
-```jsx
-import { Haptics, ImpactStyle } from '@capacitor/haptics';
-
-const handleSwipe = async () => {
- await Haptics.impact({ style: ImpactStyle.Light });
- // Handle swipe
-};
-```
-
-### 4. Set Gesture Thresholds
-
-```jsx
-const minSwipeDistance = 50; // Minimum pixels to trigger swipe
-const longPressDelay = 500; // Milliseconds for long press
-const doubleTapDelay = 300; // Maximum time between taps
-```
-
-### 5. Handle Multiple Touch Points
-
-```jsx
-const handleTouchStart = (e) => {
- if (e.touches.length === 1) {
- // Single touch - pan
- } else if (e.touches.length === 2) {
- // Two touches - pinch/rotate
- }
-};
-```
-
-## Testing Gestures
-
-```javascript
-import { render, fireEvent } from '@testing-library/react';
-
-test('handles swipe gesture', () => {
- const onSwipe = jest.fn();
- const { container } = render(
- {/* Content */}
-
-);
-```
-
-### Screen Reader Support
-
-```jsx
-
- {/* Content */}
-
-```
-
-## Related Documentation
-
-- [Adding Plugins](./adding-plugins.md)
-- [Offline Support](./offline-support.md)
-- [WMX Components- Mobile](../enterprise-capabilities/prefabs/wmx-components-mobile.md)
-- [Accessibility](../enterprise-capabilities/accessibility.md)
diff --git a/docs/user-interfaces/mobile/device-capabilities-mobile/offline-support.md b/docs/user-interfaces/mobile/device-capabilities-mobile/offline-support.md
index 9c1e062..8a17061 100644
--- a/docs/user-interfaces/mobile/device-capabilities-mobile/offline-support.md
+++ b/docs/user-interfaces/mobile/device-capabilities-mobile/offline-support.md
@@ -827,7 +827,6 @@ const isCacheExpired = (timestamp, maxAge = 3600000) => {
## Related Documentation
-- [Adding Plugins](./adding-plugins.md)
-- [Enabling Gestures](./enabling-gestures.md)
-- [WMX Components- Mobile](../enterprise-capabilities/prefabs/wmx-components-mobile.md)
+- [Third-party Expo plugins](./third-party-expo-plugins.md)
+- [WMX components](/docs/user-interfaces/mobile/enterprise-capabilities/wmx/)
- [State Management](#)
diff --git a/docs/user-interfaces/mobile/device-capabilities-mobile/third-party-expo-plugins.md b/docs/user-interfaces/mobile/device-capabilities-mobile/third-party-expo-plugins.md
new file mode 100644
index 0000000..a1e90a2
--- /dev/null
+++ b/docs/user-interfaces/mobile/device-capabilities-mobile/third-party-expo-plugins.md
@@ -0,0 +1,163 @@
+---
+title: Third-party Expo plugins
+sidebar_label: Third-party Expo plugins
+last_update: { author: "Praneeth Reddy" }
+---
+
+# Third-party Expo plugins
+
+WaveMaker mobile apps are **React Native (Expo)** projects. Native capabilities come from **Expo modules** and compatible npm packages that you register in Studio. WaveMaker does **not** use Cordova or Capacitor for this stack.
+
+Use this guide when you need APIs beyond built-in widgets and device variables (for example `expo-battery`, `expo-haptics`, or a community Expo module).
+
+## Configuration files
+
+| File | What it does | Where it exists |
+| ----------------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **`wm_rn_config.json`** | **Plugins** you add in Studio (package names and versions). | `src/main/webapp/wm_rn_config.json` — edited through **Build Preferences → Plugins**. |
+| **`app.json`** | Expo settings such as native permission messages and `expo.plugins`. | **Studio:** optional — upload under `webapp` if you need extra settings. **Not** in the default project tree. **Local project:** `app.json` at the root of **`generated-expo-app`** when you work with the generated Expo app. |
+
+**When to use which**
+
+- Add or remove a package → **Build Preferences → Plugins** (updates **`wm_rn_config.json`**).
+- Custom native permission text or an Expo config plugin (for example Face ID message) → upload **`app.json`** in Studio, or edit **`app.json`** in **`generated-expo-app`**.
+- Use the package in UI logic → page or partial **Script** with `require('package-name')`.
+
+Built-in device features (camera, location, contacts, calendar, barcode scan, file upload, and similar) work through the matching **widgets** or **device variables** without adding them under **More Plugins**.
+
+---
+
+## Add plugins in Studio
+
+In the left navigation, open **Project Configuration**, select **Build Preferences**, then open the **Plugins** tab.
+
+
+
+The **Plugins** tab sits alongside **Application Properties**, **SSL Pinning**, **App Icon**, and **Splash Screen** under **Build Preferences**.
+
+### Standard plugins
+
+Under **Standard Plugins**, toggle the built-in options WaveMaker tests with the mobile stack, including:
+
+- Barcode Scanner
+- Camera
+- Geolocation
+- Network
+- Calendar
+- Contacts
+- Vibrate
+
+These are Expo packages WaveMaker already supports for common device features.
+
+### More plugins (four sources)
+
+Under **More Plugins**, choose a source from the dropdown (for example **expo**), then add package details. You can also search the npm registry from the link on that screen.
+
+| Source | Use for | What you provide |
+| --------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------- |
+| **Expo** | Modules from the [Expo SDK](https://docs.expo.dev/versions/latest/) | Pick from the typeahead; Studio adds `name` and `spec` (version). |
+| **npm** | Any package on the npm registry | Package **name** and **version** (for example `expo-battery` and `9.0.1`). |
+| **Git** | A package installed from a Git repository | Package **name** and the **GitHub repository URL** (see below). |
+| **Local** | A package as a compressed `.tgz` archive of its source | Package **name** and upload the **`.tgz` file** in Studio. |
+
+**Git example:** Use the repository URL with a `.git` suffix (not a `/tarball/` link):
+
+`https://github.com/react-native-webview/react-native-webview.git`
+
+**Local example:** A `.tgz` file is a compressed archive of a package’s source code. Upload that file in the **Local** row after you enter the package name.
+
+Save **Build Preferences** so `wm_rn_config.json` includes your plugins:
+
+```json
+{
+ "plugins": [
+ { "name": "expo-battery", "spec": "9.0.1", "variable": [] }
+ ]
+}
+```
+
+---
+
+## Use a plugin in page script
+
+Call the module from a page or partial **Script** tab. WaveMaker page scripts use CommonJS `require`.
+
+### Example: `expo-battery`
+
+**Markup** (labels to show the value):
+
+```html
+{product.name}
-{product.description}
- ${product.price} - - )} - onCardClick={handleProductClick} - /> - ); -}; -``` - -#### List View Prefab - -Flexible list component with various layouts. - -```jsx -import { ListViewPrefab } from '@wavemaker/prefabs'; - -const NotificationList = () => { - return ( -
-
- )}
- emptyMessage="No notifications"
- />
- );
-};
-```
-
-### 2. Form Prefabs
-
-#### Login Form Prefab
-
-Pre-configured login form with validation.
-
-```jsx
-import { LoginFormPrefab } from '@wavemaker/prefabs';
-
-const LoginPage = () => {
- return (
-
-
-
-
- {notification.title}
-{notification.message}
- {notification.timestamp} -
-
- );
-};
-```
-
-### 7. Media Prefabs
-
-#### Image Gallery Prefab
-
-Image gallery with lightbox.
-
-```jsx
-import { ImageGalleryPrefab } from '@wavemaker/prefabs';
-
-const Gallery = () => {
- return (
- {title}
- {loading ? ( -
- {data.map(item => (
-
- )}
- onItemClick(item)}>
- {item.name}
-
- ))}
-
- {/* Content */}
-
- );
-};
-```
-
-## Testing Prefabs
-
-```javascript
-import { render, screen, fireEvent } from '@testing-library/react';
-import { DataTablePrefab } from './DataTablePrefab';
-
-describe('DataTablePrefab', () => {
- test('renders with data', () => {
- const data = [
- { id: 1, name: 'John' },
- { id: 2, name: 'Jane' },
- ];
-
- render(
-
- {data.map(item => (
-
-
-
- {message.subject}
-{message.preview}
-
- {/* Chat content */}
-
-
- );
-};
-```
-
-### Mobile Drawer
-
-Slide-in navigation drawer for mobile apps.
-
-```jsx
-import { Drawer } from '@wavemaker/mobile-components';
-
-const AppWithDrawer = () => {
- const [isOpen, setIsOpen] = useState(false);
-
- return (
- <>
- My App
-
-
- Submit
-
-
-
- Cancel
-
-
- );
-};
-```
-
-### Touch Slider
-
-Touch-friendly slider for mobile inputs.
-
-```jsx
-import { TouchSlider } from '@wavemaker/mobile-components';
-
-const VolumeControl = () => {
- const [volume, setVolume] = useState(50);
-
- return (
-
-
-
- );
-};
-```
-
-### Mobile Toggle Switch
-
-Large, easy-to-tap toggle switches.
-
-```jsx
-import { MobileSwitch } from '@wavemaker/mobile-components';
-
-const SettingsScreen = () => {
- const [notifications, setNotifications] = useState(true);
- const [darkMode, setDarkMode] = useState(false);
-
- return (
-
-
- );
-};
-```
-
-## Form Components
-
-### Mobile Input
-
-Mobile-optimized text input with proper keyboard types.
-
-```jsx
-import { MobileInput } from '@wavemaker/mobile-components';
-
-const MobileForm = () => {
- return (
-
- );
-};
-```
-
-### Mobile Select
-
-Mobile-friendly dropdown with native picker support.
-
-```jsx
-import { MobileSelect } from '@wavemaker/mobile-components';
-
-const CountrySelector = () => {
- const [country, setCountry] = useState('');
-
- const countries = [
- { value: 'us', label: 'United States' },
- { value: 'ca', label: 'Canada' },
- { value: 'mx', label: 'Mexico' },
- { value: 'uk', label: 'United Kingdom' },
- ];
-
- return (
-
- Enable Notifications
-
-
-
- Dark Mode
-
-
- 
-
- );
-
- return (
-
-
- {contact.name}
-{contact.email}
-{product.name}
-{product.description}
-
- ${product.price}
-
-
- {answer}
-
- {photos.map((photo, index) => (
- 
setSelectedIndex(index)}
- />
- ))}
-
-
-
-
- );
-};
-```
-
-### Mobile Skeleton
-
-Skeleton screens for better loading experience.
-
-```jsx
-import { Skeleton } from '@wavemaker/mobile-components';
-
-const ProductCardSkeleton = () => {
- return (
-
-
- );
-};
-```
-
-## Gesture Components
-
-### Swipeable View
-
-Swipeable container for mobile gestures.
-
-```jsx
-import { SwipeableView } from '@wavemaker/mobile-components';
-
-const OnboardingSlides = ({ slides }) => {
- const [currentSlide, setCurrentSlide] = useState(0);
-
- return (
-
-
-
- 
-
- ))}
- {slide.title}
-{slide.description}
-
- Long press me for options
-
- );
-};
-```
-
-## Best Practices
-
-### 1. Touch Target Size
-
-Ensure all interactive elements are at least 44x44 pixels.
-
-```css
-.mobile-button {
- min-width: 44px;
- min-height: 44px;
- padding: 12px 24px;
-}
-```
-
-### 2. Use Native Input Types
-
-Use appropriate input types for mobile keyboards.
-
-```jsx
-// ✅ Good - Proper input modes
-
-
-
-
-// ❌ Bad - Generic text input
-
-```
-
-### 3. Optimize for Thumb Zone
-
-Place primary actions within easy thumb reach.
-
-```jsx
-// Place primary actions at bottom
-
- {/* Secondary actions */}
- {/* Content */}
-
-
-```
-
-### 4. Handle Orientation Changes
-
-Support both portrait and landscape modes.
-
-```jsx
-import { useOrientation } from '@wavemaker/mobile-components';
-
-const ResponsiveLayout = () => {
- const orientation = useOrientation();
-
- return (
-
- {orientation === 'portrait' ? (
-
- );
-};
-```
-
-### 5. Provide Haptic Feedback
-
-Use vibration for important interactions.
-
-```jsx
-const handleImportantAction = () => {
- // Trigger haptic feedback
- if (navigator.vibrate) {
- navigator.vibrate(10); // Short vibration
- }
-
- // Perform action
- performAction();
-};
-```
-
-## Performance Optimization
-
-### Lazy Loading Components
-
-```jsx
-import { lazy, Suspense } from 'react';
-
-const HeavyComponent = lazy(() => import('./HeavyComponent'));
-
-const App = () => {
- return (
-
-
- );
-});
-```
-
-## Accessibility on Mobile
-
-### Voice Control Support
-
-```jsx
-
-```
-
-### Screen Reader Announcements
-
-```jsx
-import { announce } from '@wavemaker/mobile-components';
-
-const handleSubmit = async () => {
- const success = await submitForm();
- if (success) {
- announce('Form submitted successfully');
- } else {
- announce('Form submission failed', 'assertive');
- }
-};
-```
-
-## Testing Mobile Components
-
-```javascript
-import { render, fireEvent } from '@testing-library/react';
-import { simulateTouch } from '@wavemaker/mobile-testing';
-
-test('swipeable item responds to swipe', () => {
- const onSwipe = jest.fn();
- const { container } = render(
- {item.title}
-{item.description}
-
-
- );
-};
-```
-
-## Route Protection
-
-### Protected Route Component
-
-```javascript
-import { Navigate } from 'react-router-dom';
-import { useAuth } from './AuthContext';
-
-const ProtectedRoute = ({ permission, children }) => {
- const { user, hasPermission } = useAuth();
-
- if (!user) {
- return User Management
- - {hasPermission('user:read') &&
- {hasPermission('user:update') && (
-
- )}
-
- {hasPermission('user:delete') && (
-
- )}
-
- {hasPermission('user:read') && (
-
- )}
-
- );
-};
-```
-
-### Disable Elements Based on Permissions
-
-```javascript
-const EditForm = () => {
- const canEdit = usePermission('content:update');
-
- return (
-
- );
-};
-```
-
-## API Request Authorization
-
-### Adding Authorization Headers
-
-```javascript
-const apiClient = {
- get: async (url, options = {}) => {
- const token = localStorage.getItem('authToken');
- const response = await fetch(url, {
- ...options,
- headers: {
- 'Authorization': `Bearer ${token}`,
- 'Content-Type': 'application/json',
- ...options.headers,
- },
- });
-
- if (response.status === 403) {
- throw new Error('You do not have permission to perform this action');
- }
-
- return response.json();
- },
-
- post: async (url, data, options = {}) => {
- const token = localStorage.getItem('authToken');
- const response = await fetch(url, {
- method: 'POST',
- ...options,
- headers: {
- 'Authorization': `Bearer ${token}`,
- 'Content-Type': 'application/json',
- ...options.headers,
- },
- body: JSON.stringify(data),
- });
-
- if (response.status === 403) {
- throw new Error('You do not have permission to perform this action');
- }
-
- return response.json();
- },
-};
-```
-
-### Permission-Based API Calls
-
-```javascript
-const useUserActions = () => {
- const { hasPermission } = useAuth();
-
- const deleteUser = async (userId) => {
- if (!hasPermission('user:delete')) {
- throw new Error('You do not have permission to delete users');
- }
-
- return apiClient.delete(`/api/users/${userId}`);
- };
-
- const updateUser = async (userId, data) => {
- if (!hasPermission('user:update')) {
- throw new Error('You do not have permission to update users');
- }
-
- return apiClient.put(`/api/users/${userId}`, data);
- };
-
- return { deleteUser, updateUser };
-};
-```
-
-## Dynamic Navigation Based on Roles
-
-### Navigation Menu with RBAC
-
-```javascript
-const Navigation = () => {
- const { user, hasPermission, hasAnyRole } = useAuth();
-
- const menuItems = [
- {
- label: 'Dashboard',
- path: '/dashboard',
- show: true,
- },
- {
- label: 'Users',
- path: '/users',
- show: hasPermission('user:read'),
- },
- {
- label: 'Content',
- path: '/content',
- show: hasPermission('content:read'),
- },
- {
- label: 'Settings',
- path: '/settings',
- show: hasPermission('settings:view'),
- },
- {
- label: 'Admin Panel',
- path: '/admin',
- show: hasAnyRole(['admin']),
- },
- ];
-
- return (
-
- );
-};
-```
-
-## Advanced RBAC Patterns
-
-### Resource-Based Permissions
-
-```javascript
-const canAccessResource = (user, resource, action) => {
- // Check if user owns the resource
- if (resource.ownerId === user.id) {
- return true;
- }
-
- // Check role-based permission
- const permission = `${resource.type}:${action}`;
- return user.permissions.includes(permission);
-};
-
-// Usage
-const EditButton = ({ post }) => {
- const { user } = useAuth();
- const canEdit = canAccessResource(user, post, 'update');
-
- if (!canEdit) return null;
-
- return ;
-};
-```
-
-### Context-Based Permissions
-
-```javascript
-const hasContextualPermission = (user, action, context) => {
- // Check if user has permission in specific context
- if (context.department === user.department) {
- return user.permissions.includes(action);
- }
-
- // Check if user has global permission
- return user.permissions.includes(`global:${action}`);
-};
-```
-
-### Permission Inheritance
-
-```javascript
-const getInheritedPermissions = (role) => {
- const roleHierarchy = {
- admin: ['admin', 'manager', 'user', 'guest'],
- manager: ['manager', 'user', 'guest'],
- user: ['user', 'guest'],
- guest: ['guest'],
- };
-
- const inheritedRoles = roleHierarchy[role] || [role];
- const allPermissions = new Set();
-
- inheritedRoles.forEach(inheritedRole => {
- const permissions = rolePermissions[inheritedRole] || [];
- permissions.forEach(permission => allPermissions.add(permission));
- });
-
- return Array.from(allPermissions);
-};
-```
-
-## Permission Caching
-
-```javascript
-import { useState, useEffect } from 'react';
-
-const usePermissionCache = () => {
- const [permissionCache, setPermissionCache] = useState({});
-
- const checkPermission = (permission) => {
- if (permission in permissionCache) {
- return permissionCache[permission];
- }
-
- // Check permission from user context
- const hasPermission = checkUserPermission(permission);
-
- // Cache the result
- setPermissionCache(prev => ({
- ...prev,
- [permission]: hasPermission,
- }));
-
- return hasPermission;
- };
-
- return { checkPermission };
-};
-```
-
-## Error Handling
-
-### Unauthorized Access Handler
-
-```javascript
-const UnauthorizedPage = () => {
- return (
-
- );
-};
-```
-
-### Permission Error Boundary
-
-```javascript
-import { Component } from 'react';
-
-class PermissionErrorBoundary extends Component {
- constructor(props) {
- super(props);
- this.state = { hasError: false, error: null };
- }
-
- static getDerivedStateFromError(error) {
- if (error.message.includes('permission')) {
- return { hasError: true, error };
- }
- return null;
- }
-
- render() {
- if (this.state.hasError) {
- return (
-
-
- );
- }
-
- return this.props.children;
- }
-}
-```
-
-## Best Practices
-
-### 1. Principle of Least Privilege
-
-Grant users only the permissions they need to perform their job.
-
-```javascript
-// ✅ Good - Specific permissions
-const editorPermissions = ['content:create', 'content:update', 'content:read'];
-
-// ❌ Bad - Too broad
-const editorPermissions = ['content:*'];
-```
-
-### 2. Server-Side Validation
-
-Always validate permissions on the server, not just the client.
-
-```javascript
-// Client-side (UI hiding)
-{hasPermission('user:delete') && Permission Error
-{this.state.error.message}
-