Layout docs

learn/react-native/responsive-layout.md

@@ -0,0 +1,130 @@
+---
+title: "Creating Responsive Layout"
+id: "responsive-layout"
+sidebar_label: "Responsive Layout"
+---
+---
+
+Responsive design ensures your app looks and works great on any phone or tablet by adapting layouts and styles to different screen sizes and orientations.
+
+Responsive design can be implemented using media queries, allowing you to define conditional styles for different device sizes directly in your app's style tab. This makes it easy to build mobile apps that are visually consistent and functional across devices. Media queries in WaveMaker React Native works very similarly to media queries present web CSS, making it easier to understand and implement.
+
+### Syntax and Usage
+
+Media queries start with `@media`, followed by conditions inside parentheses. You can use conditions like `min-width` or `max-width` to target specific screen sizes. Any styles defined inside a media query block will only be applied when the condition is met.
+
+- **Basic Media Query Syntax**
+  ```css
+  @media (condition) {
+    /* styles here */
+  }
+  ```
+
+- **Using min-width**
+  ```css
+  @media (min-width: 600px) {
+    .app-label-text {
+      font-size: 20px;
+    }
+  }
+  ```
+  This increases the font size of `.app-label-text` when the screen is at least 600px wide.
+
+- **Using max-width**
+  ```css
+  @media (max-width: 400px) {
+    .app-button {
+      background-color: orange;
+    }
+    .app-label-text {
+      font-size: 14px;
+    }
+  }
+  ```
+  This changes the button color and label font size for screens up to 400px wide.
+
+- **Combining Conditions with 'and'**
+  ```css
+  @media (min-width: 200px) and (max-width: 400px) {
+    .app-button {
+      background-color: red;
+    }
+    .app-label-text {
+      font-size: 12px;
+    }
+  }
+  ```
+  This applies styles only when the screen width is between 200px and 400px.
+
+### Merge Behavior
+**1. Media query styles override base styles.**
+For example:
+```css
+.app-button {
+  background-color: blue;
+}
+
+@media (min-width: 600px) {
+  .app-button {
+    background-color: green;
+  }
+}
+```
+On screens 600px and wider, the button will be green instead of blue.
+
+**2. Later rules override earlier ones if there's a conflict.**
+For example:
+```css
+@media (min-width: 400px) {
+  .app-button {
+    background-color: orange;
+  }
+}
+
+@media (min-width: 400px) {
+  .app-button {
+    background-color: purple;
+  }
+}
+```
+Here, `.app-button` will be purple for screens 400px and wider, because the second rule overrides the first.
+
+**3. If multiple media conditions match, all matching styles are merged.**
+For example:
+```css
+@media (min-width: 400px) {
+  .app-label-text {
+    font-size: 32px;
+    color: blue;
+  }
+}
+
+@media (min-width: 600px) {
+  .app-label-text {
+    color: purple;
+  }
+}
+```
+On a screen wider than 400px, `.app-label-text` will be 32px and blue. On screens 600px and above, both media queries match, so the font size remains 32px (from the first rule), but the color becomes purple (from the second rule, which overrides the earlier color property).
+
+
+### Suggested Break Points
+
+| Device Type | Screen Size Range |
+|-------------|------------------|
+| Phones      | 0 - 479px        |
+| Phones (landscape), Small Tablets | 480px - 767px |
+| Tablets     | 768px - 1023px   |
+| Tablets (landscape) | 1024px+   |
+
+Adjust layouts, font sizes, and touch targets based on these ranges for optimal usability.
+
+### Best Practices
+- Start with a mobile-first approach, define base styles for small screens, then add media queries for larger devices.
+- Test on multiple devices and orientations.
+- Keep media queries organized and avoid overly complex conditions.
+
+### How to Test Responsiveness
+- Use device simulators/emulators in your development environment.
+- Test on real devices when possible.
+- In web preview, resize browser windows to check layout changes.

learn/react-native/sticky-header.md

@@ -0,0 +1,69 @@
+---
+title: "Creating Sticky Header"
+id: "sticky-header"
+sidebar_label: "Sticky Header"
+---
+---
+
+import stickyHeaderExample from '/learn/assets/release-notes/stickyHeaderExample.mp4';
+
+A sticky header is a UI element that remains _pinned_ at the top of the screen while the rest of the content scrolls beneath it. It allows widgets to stay visible and accessible as users scrolls, ensuring easy access to important sections and actions without the need to scroll back.
+
+In below example, **Profiles** is configured to be _sticky_.
+
+<video
+  src={stickyHeaderExample}
+  style={{ width: '100%', maxWidth: 320, height: 'auto' }}
+  autoPlay
+  loop
+  muted
+  playsInline
+/>
+
+### Configuring Sticky Header
+
+Sticky header can be created by enabling the **Sticky** property on a Container widget. When enabled, all [supported widgets](#supported-widgets) inside that container become sticky:
+
+- They stick below the top navigation bar (by default).
+- If the top navigation bar is set to hide on scroll, sticky widgets will pin to the very top of the screen.
+
+### Steps
+
+1. **Add a Container:** Drag and drop a Container widget onto your page.
+2. **Enable Sticky:** In the Properties panel, go to the _Behavior_ section and enable the `sticky` property for the container.
+3. **Insert Widgets:** Place the widgets you want to be sticky inside this container.
+
+<div style={{ position: "relative", paddingBottom: "56.25%" }}>
+  <iframe
+    style={{
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      left: 0,
+      top: 0,
+      borderRadius: 10
+    }}
+    src="https://embed.app.guidde.com/playbooks/bH9KnVTTfwoYju7HimPYPm?mode=videoOnly"
+    title="Navigate and Manage Sticky Header in Admin Dashboard"
+    frameBorder={0}
+    referrerPolicy="unsafe-url"
+    allowFullScreen="true"
+    allow="clipboard-write"
+    sandbox="allow-popups allow-popups-to-escape-sandbox allow-scripts allow-forms allow-same-origin allow-presentation"
+  />
+</div>
+
+### Recommended Usage for Best Experience
+
+- Sticky widgets are position calculated and move as you scroll, staying pinned at the top. For accurate positioning, avoid adding dynamic content (which takes time to load) above the sticky widget.
+- Use a non-transparent background color for the sticky container to improve visibility and prevent content overlap.
+
+### Limitations
+
+- You can only create one sticky container per page.
+
+### Supported Widgets
+
+The following widgets are supported as sticky widgets:
+
+Anchor, Button, Button Group, Icon, Lottie, Label, Picture, Progress Bar, Search, Spinner, Progress Circle, Video, Camera, Calendar, Checkbox, Chips, Menu, Checkboxset, Tile, Currency, Date, Datetime, Time, Number, Radioset, Rating, Select, Slider, Switch, Text, Textarea, Toggle, Audio, Partial

website/sidebars.json

@@ -912,6 +912,14 @@
 				"label": "Design and Theming",
 				"items": [
 				  "react-native/styles",
+					{
+						"type": "category",
+						"label": "Layout",
+						"items": [
+							"react-native/responsive-layout",
+							"react-native/sticky-header"
+						]
+					},
 				  "react-native/theme",
 				  "react-native/custom-icon-fonts",
 				  "react-native/splash-screen",

website/src/components/widgets.js

@@ -85,7 +85,7 @@ const WidgetTabItems = ({ activePlatformsSet, links }) => {
                 "darkIcon": "/learn/img/containerDark.svg",
                 "label": "Container",
                 "body": " Container is an enclosing element that wraps the widgets placed within, mostly used for embedding partial pages ",
-                "overview": "/learn/app-development/widgets/container/container/",
+                "overview": "/learn/app-development/widgets/container/",
                 "api": "https://www.wavemakeronline.com/app-runtime/latest/docs/classes/Container.html",
                 "supportedPlatforms": ["web", "mobile"],
                 "mobileStoryBook": "https://rn-components.onwavemaker.com/?path=/docs/containers-container--docs"