Yoga

https://www.yogalayout.dev
Admin
Yoga is a portable layout engine targeting web standards, providing a cross-platform layout...
Tokens:19,807
Snippets:213
Trust Score:8.5
Update:9 months ago
Show doc for...
Tokens:
Raw
### Yoga Layout Example: Margin, Padding, and Border Configuration

Source: https://www.yogalayout.dev/docs/styling/margin-padding-border

This snippet demonstrates the application of margin, padding, and border properties within a Yoga layout configuration. It shows how these properties influence the sizing and spacing of nested nodes. The example uses a React-like JSX syntax.

```jsx
<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 200,
      height: 200,
      padding: 10,
    }}>
    <Node
      style={{
        margin: 5,
        padding: 20,
        borderWidth: 20,
        height: 50,
      }}
    />
    <Node style={{height: 50}} />
  </Node>
</Layout>
```

--------------------------------

### React Native Layout Example

Source: https://www.yogalayout.dev/docs/styling/insets

Illustrates how to use insets within a React Native component's style to position child nodes. This example demonstrates setting width, height, top, and left properties.

```APIDOC
## React Native Layout with Insets

### Description
This example shows a React Native component structure using `Layout` and `Node` components. The `style` prop of the inner `Node` utilizes inset properties (`top`, `left`) to position it relative to its parent.

### Method
N/A (React Native component structure)

### Endpoint
N/A

### Parameters
N/A

### Request Example
```jsx
<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 200,
      height: 200,
    }}>
    <Node
      style={{
        height: 50,
        width: 50,
        top: 50,
        left: 50,
      }}
    />
  </Node>
</Layout>
```

### Response
#### Success Response
N/A

#### Response Example
N/A
```

--------------------------------

### Layout Example with Insets (React JSX)

Source: https://www.yogalayout.dev/docs/styling/insets

A React JSX example demonstrating the use of nested Nodes with specific width, height, top, and left styles, illustrating how insets can be applied visually within a layout structure.

```jsx
<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 200,
      height: 200,
    }}>
    <Node
      style={{
        height: 50,
        width: 50,
        top: 50,
        left: 50,
      }}
    />
  </Node>
</Layout>
```

--------------------------------

### Yoga box-sizing: border-box Example

Source: https://www.yogalayout.dev/blog/announcing-yoga-3

Demonstrates how to use `box-sizing: border-box` in Yoga, where sizing values include padding and border. This is the default behavior for compatibility.

```javascript
<Layout config={{useWebDefaults: true}}>
  <Node
    style={{
      width: 100,
      height: 100,
      padding: 50,
      boxSizing: "border-box",
    }}>
  </Node>
</Layout>
```

--------------------------------

### Core Styles for Absolute Positioning Examples (JavaScript)

Source: https://www.yogalayout.dev/blog

Defines the core styles used in the examples for demonstrating absolute positioning behavior changes in Yoga. This includes parent and child element dimensions and positioning.

```javascript
const parentStyles = {
  backgroundColor: 'green',
  height: 200,
  width: 200,
};

const childStyles = {
  position: 'absolute',
  backgroundColor: 'blue',
  height: 50,
  width: 50,
};
```

--------------------------------

### Logical Edges in Row-Reverse Containers with Yoga

Source: https://www.yogalayout.dev/blog

Demonstrates the corrected handling of logical edges (`marginStart`, `marginEnd`, etc.) within `flexDirection: 'row-reverse'` containers in Yoga. This example shows a nested structure where the inner container uses `row-reverse` and `marginStart`, illustrating how Yoga now correctly interprets these edges, preventing previous issues with swapped `start` and `end` values.

```javascript
<Node 
  style={{
    flexDirection: 'row',
    backgroundColor: 'red',
    margin: 10,
    width: 200,
    height: 100,
  }}
>
  <Node 
    style={{
      flexDirection: 'row-reverse',
      backgroundColor: 'blue',
      flex: 1,
      marginStart: 50,
    }}
  >
    <Node 
      style={{
        backgroundColor: 'green',
        height: '50%',
        flex: 1,
        marginStart: 50,
      }}
    />
  </Node>
</Node>
```

--------------------------------

### Install yoga-layout via npm

Source: https://www.yogalayout.dev/blog

This snippet shows how to add the yoga-layout package as a dependency in a Node.js project using npm.

```json
// package.json  
{
  "dependencies": {
    "yoga-layout": "^3.0.0"
   }
}

```

--------------------------------

### Use Public C API for Yoga Configuration (C++)

Source: https://www.yogalayout.dev/blog/announcing-yoga-2

Demonstrates the correct way to interact with Yoga's C API for configuration. This example shows how to create a configuration object and set a property using the public interface, which is stable and recommended for use.

```c++
// Public API (GOOD)  
#include <yoga/Yoga.h>  
  
YGConfigRef config = YGConfigNew();  
YGConfigSetPointScaleFactor(config, 1.0f);  

```

--------------------------------

### Yoga: Percentage Gap Property Example

Source: https://www.yogalayout.dev/blog

Demonstrates the support for percentage values in the `gap` property in Yoga. This allows for responsive spacing between elements based on the container's size.

```jsx
<Layout config={{useWebDefaults: true}}>
  <Node
    style={{
      columnGap: "10%",
      width: 200,
      height: 100,
    }}>
    <Node style={{flexGrow: 1}} />
    <Node style={{flexGrow: 1}} />
    <Node style={{flexGrow: 1}} />
  </Node>
</Layout>
```

--------------------------------

### Yoga box-sizing: content-box Example

Source: https://www.yogalayout.dev/blog/announcing-yoga-3

Illustrates `box-sizing: content-box` in Yoga, where sizing values only apply to the content area, excluding padding and border. This behavior is useful for precise content dimension control.

```javascript
<Layout config={{useWebDefaults: true}}>
    <Node
    style={{
      width: 100,
      height: 100,
      padding: 50,
      boxSizing: "content-box",
    }}>
  </Node>
</Layout>
```

--------------------------------

### Absolute Positioning Example with Padding/Borders (JavaScript)

Source: https://www.yogalayout.dev/blog

Provides JavaScript code for the 'Before' and 'After' states of absolute positioning with complex padding, margins, and borders. This highlights differences in how Yoga handles these properties.

```javascript
// Example for 'Before' state (illustrative, actual values depend on context)
const beforeChildStyles = {
  // core styles
  paddingLeft: 10,
  paddingRight: 20,
  marginLeft: 10,
  marginRight: 20,
  borderLeftWidth: 10,
  borderRightWidth: 20,
};

// Example for 'After' state (illustrative, actual values depend on context)
const afterChildStyles = {
  // core styles
  paddingLeft: 10,
  paddingRight: 20,
  marginLeft: 10,
  marginRight: 20,
  borderLeftWidth: 10,
  borderRightWidth: 20,
};
```

--------------------------------

### Yoga display: contents Example

Source: https://www.yogalayout.dev/blog/announcing-yoga-3

Shows how to use `display: contents` in Yoga to remove a node from the layout flow while preserving its children. This is useful for composing wrapper components without affecting child layout.

```javascript
<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 100,
      height: 100,
      gap: 10,
    }}
  >
    <Node style={{display: "contents"}}>
      <Node style={{flexGrow: 1}} />
      <Node style={{flexGrow: 1}} />
      <Node style={{flexGrow: 1}} />
    </Node>
  </Node>
</Layout>
```

--------------------------------

### Justify Content Example - Yoga Layout (JSX)

Source: https://www.yogalayout.dev/docs/styling/justify-content

This snippet demonstrates how to use the 'justifyContent' property in Yoga Layout to align child nodes within a container. It shows a basic setup with a parent 'Node' and two child 'Node' elements, applying 'flex-start' justification.

```jsx
<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 200,
      height: 200,
      padding: 10,
      justifyContent: 'flex-start',
    }}>
    <Node style={{margin: 5, height: 50, width: 50}} />
    <Node style={{margin: 5, height: 50, width: 50}} />
  </Node>
</Layout>
```

--------------------------------

### Install Yoga Layout via Maven

Source: https://www.yogalayout.dev/blog

This snippet demonstrates how to include the Yoga layout library in your Android or Java project using Gradle. This requires a Gradle build system.

```gradle
// build.gradle  
implementation("com.facebook.yoga:yoga:2.0.0")

```

--------------------------------

### Avoiding Private C++ APIs for Yoga Configuration

Source: https://www.yogalayout.dev/blog

Highlights an example of using private C++ APIs for Yoga configuration, which is discouraged. This approach directly accesses internal structures and is prone to breaking changes.

```cpp
// Private API (BAD)  
#include <yoga/YGConfig.h>  

YGConfig config{yogaLogger_};  
config.pointScaleFactor = 1.0f;  

```

--------------------------------

### Min-Height Support for Multiline Containers in Yoga

Source: https://www.yogalayout.dev/blog

Illustrates Yoga's correct support for `min-height` applied to a multiline container. This example shows a row-direction container with `flexWrap: 'wrap'` and a `minHeight` property, demonstrating how Yoga now handles this scenario accurately, especially with padding and gaps.

```javascript
<Node 
  style={{
    flexDirection: 'row',
    width: 150,
    minHeight: 200,
    backgroundColor: 'blue',
    flexWrap: 'wrap',
    justifyContent: 'center',
    padding: 10,
    gap: 10,
  }}
>
  <Node 
    style={{
      backgroundColor: 'red',
      height: 100,
      width: 100,
    }}
  />
  <Node 
    style={{
      backgroundColor: 'red',
      height: 100,
      width: 100,
    }}
  />
</Node>
```

--------------------------------

### Set Row Gap in Java

Source: https://www.yogalayout.dev/blog

This Java code example shows how to set the row gap for a Yoga node using the setGap method.

```java
// Example.java  
node.setGap(YogaGutter.ROW, 2.0f);

```

--------------------------------

### Align Self Example in Yoga Layout (JSX)

Source: https://www.yogalayout.dev/docs/styling/align-items-self

This snippet demonstrates the usage of 'alignSelf' property within a Yoga Layout structure using JSX. It shows how a child 'Node' can be centered along the cross axis, overriding the parent's 'alignItems' setting. This requires the Yoga Layout library to be installed and configured.

```jsx
<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 200,
      height: 250,
      padding: 10,
      alignItems: 'flex-start',
    }}>
    <Node
      style={{
        margin: 5,
        height: 50,
        width: 50,
        alignSelf: 'center',
      }}
    />
    <Node style={{margin: 5, height: 50, width: 50}} />
  </Node>
</Layout>
```

--------------------------------

### Avoid Private C++ APIs for Yoga Configuration (C++)

Source: https://www.yogalayout.dev/blog/announcing-yoga-2

Highlights an example of using private C++ APIs, which is discouraged and may break in future updates. This code directly accesses internal structures, making it fragile and prone to issues when Yoga evolves.

```c++
// Private API (BAD)  
#include <yoga/YGConfig.h>  
  
YGConfig config{yogaLogger_};  
config.pointScaleFactor = 1.0f;  

```

--------------------------------

### Yoga Layout Aspect Ratio Example (JSX)

Source: https://www.yogalayout.dev/docs/styling/aspect-ratio

This snippet demonstrates the usage of the aspectRatio style property within Yoga Layout using JSX. It shows how to apply different aspect ratios to child nodes, affecting their rendered dimensions based on the defined ratio.

```jsx
<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 200,
      height: 200,
      padding: 10,
    }}>
    <Node style={{margin: 5, height: 50, aspectRatio: 1.0}} />
    <Node style={{margin: 5, height: 50, aspectRatio: 1.5}} />
  </Node>
</Layout>
```

--------------------------------

### Add Yoga Pod to Podfile (CocoaPods)

Source: https://www.yogalayout.dev/blog/announcing-yoga-2

Illustrates how to add the Yoga library as a dependency in a CocoaPods Podfile for iOS or macOS projects. This line ensures that the Yoga framework is included in the project during the pod installation process.

```ruby
# Podfile  
pod 'Yoga', '~> 2.0.0'  

```

--------------------------------

### Yoga: Alignment with Overflowed Containers Example

Source: https://www.yogalayout.dev/blog

Illustrates fixes in Yoga for aligning flex children within overflowed containers using `justify-content`, `align-content`, or `margin: "auto"`. This addresses issues like overlapping items and removed padding.

```jsx
<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 100,
      height: 100,
      padding: 10,
      justifyContent: 'space-evenly',
    }}
  >
    <Node style={{height: 100, width: 100}} />
  </Node>
</Layout>
```

--------------------------------

### Set Row Gap in C++

Source: https://www.yogalayout.dev/blog

This C++ code example demonstrates how to set the row gap for a Yoga node using the YGNodeStyleSetGap function.

```cpp
// Example.cpp  
YGNodeStyleSetGap(node, YGGutterRow, 2.0f);

```

--------------------------------

### Configuring a Node to Always Form a Containing Block

Source: https://www.yogalayout.dev/docs/advanced/containing-block

Provides code examples for setting a node to always form a containing block in C/C++, Java, and JavaScript.

```APIDOC
## Configuring a Node to Always Form a Containing Block

### Description
Demonstrates how to programmatically set a node to always establish a containing block, which is useful for mimicking web browser behavior with transforms or filters.

### Method
API Calls (Language Specific)

### Endpoint
N/A

### Parameters
- **node**: The Yoga node object.
- **alwaysFormsContainingBlock** (boolean): Set to `true` to make the node always form a containing block.

### Request Example

#### C/C++
```c
YGNodeSetAlwaysFormsContainingBlock(node, true);
```

#### Java
```java
node.setAlwaysFormsContainingBlock(true);
```

#### JavaScript
```javascript
node.setAlwaysFormsContainingBlock(true);
```

### Response
N/A (Configuration change)

#### Success Response
N/A

#### Response Example
N/A
```

--------------------------------

### Configure Yoga Errata API (TypeScript)

Source: https://www.yogalayout.dev/blog

Provides an example of configuring Yoga's Errata API using TypeScript. This involves initializing a Config object and specifying the errata level, such as Errata.Classic.

```typescript
// Example.ts
const config = Config.create();
config.setErrata(Errata.Classic);

const node = Node.create(config);

```

--------------------------------

### Yoga Layout: Relative Positioning Example (React)

Source: https://www.yogalayout.dev/docs/styling/position

Demonstrates how to apply relative positioning to a node within a Yoga Layout structure. Relative positioning allows a node to be offset from its normal position without affecting the layout of other elements.

```jsx
<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 200,
      height: 200,
      padding: 10,
    }}>
    <Node
      style={{
        margin: 5,
        height: 50,
        top: 20,
        position: 'relative',
      }}
    />
  </Node>
</Layout>
```

--------------------------------

### Set Row Gap in TypeScript

Source: https://www.yogalayout.dev/blog

This TypeScript code example illustrates how to set the row gap for a Yoga node using the setGap function.

```typescript
// Example.ts  
node.setGap(Gutter.Row, 2);

```

--------------------------------

### Main-Axis Size Calculation for Indefinite Containers in Yoga

Source: https://www.yogalayout.dev/blog

Shows the corrected main-axis size calculation in Yoga for containers with indefinite main-axis dimensions and `justify-content` set to `space-between`. This example features a row-direction container with `minWidth`, `gap`, `padding`, and `justifyContent: 'space-between'`, demonstrating the accurate sizing after Yoga's improvements.

```javascript
<Node 
  style={{
    flexDirection: 'row',
    backgroundColor: 'red',
    height: 75,
    minWidth: 200,
    gap: 10,
    padding: 10,
    justifyContent: 'space-between',
    alignItems: 'center',
  }}
>
  <Node 
    style={{
      backgroundColor: 'blue',
      width: 50,
      height: 50,
    }}
  />
  <Node 
    style={{
      backgroundColor: 'blue',
      width: 50,
      height: 50,
    }}
  />
</Node>
```

--------------------------------

### JavaScript Inset API

Source: https://www.yogalayout.dev/docs/styling/insets

This section describes the JavaScript API for setting the position property of a node's style. It covers how insets function with different position types and provides a React Native example.

```APIDOC
## JavaScript node.setPosition

### Description
Sets the position property for a specific edge of a node's style using JavaScript. This method allows you to define offsets for a node's edges, which behave differently depending on whether the node is static, relative, or absolute.

### Method
`node.setPosition(edge, position)`

### Endpoint
N/A (JavaScript method)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **edge** (*YogaValue | YogaUnit | number*) - Required - The edge to apply the inset to (e.g., `YogaEdge.RIGHT`, `YogaEdge.LEFT`, `YogaEdge.TOP`, `YogaEdge.BOTTOM`, `YogaEdge.ALL`). Can be a number representing the edge or a `YogaValue` object.
- **position** (*number*) - Required - The inset value for the specified edge.

### Request Example
```javascript
node.setPosition(YogaEdge.RIGHT, 10.0);
```

### Response
#### Success Response (void)
This method does not return a value.

#### Response Example
N/A
```

--------------------------------

### React Native Yoga Layout Example

Source: https://www.yogalayout.dev/docs/advanced/containing-block

This React Native code snippet illustrates a basic layout structure using Yoga. It showcases nested nodes with defined styles, including percentage-based width and absolute positioning, demonstrating how Yoga calculates layout based on containing blocks.

```jsx
<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 200,
      height: 200,
      padding: 10
    }}>
    <Node
      style={{
        height: 100,
        width: 100,
        position: 'static'
      }}>
      <Node
        style={{
          height: 25,
          width: '50%',
          bottom: 10,
          position: 'absolute'
        }}
      />
    </Node>
  </Node>
</Layout>
```

--------------------------------

### Configure Yoga Errata for Conformance

Source: https://www.yogalayout.dev/blog/announcing-yoga-2

This snippet shows how to configure Yoga's Errata API to manage conformance levels, allowing for compatibility with web standards or older Yoga versions. Examples are provided for C++, Java, and TypeScript.

```cpp
// Example.cpp  
YGConfigRef config = YGConfigNew();  
YGConfigSetErrata(config, YGErrataClassic);  
  
YGNodeRef node = YGNodeNewWithConfig(config);

```

```java
// Example.java  
YogaConfig config = YogaConfigFactory.create();  
config.setErrata(YogaErrata.CLASSIC);  
  
YogaNode node = YogaNodeFactory.create(config);

```

```typescript
// Example.ts  
const config = Config.create();  
config.setErrata(Errata.Classic);  
  
const node = Node.create(config);

```

--------------------------------

### Add Flexbox Gap Support in Yoga

Source: https://www.yogalayout.dev/blog/announcing-yoga-2

This snippet demonstrates how to add Flexbox gap support using `gap`, `rowGap`, and `columnGap` properties in Yoga. It shows examples in C++, Java, and TypeScript, highlighting the API differences across languages.

```cpp
// Example.cpp  
YGNodeStyleSetGap(node, YGGutterRow, 2.0f);

```

```java
// Example.java  
node.setGap(YogaGutter.ROW, 2.0f);

```

```typescript
// Example.ts  
node.setGap(Gutter.Row, 2);

```

--------------------------------

### Multiline Container Alignment with align-content and align-items in Yoga

Source: https://www.yogalayout.dev/blog

Demonstrates the improved support for Flexbox containers that span multiple lines in Yoga. It showcases the use of `align-content: space-around` and `align-items: flex-end` to manage alignment of line boxes when both properties affect layout. This example uses React Native's Node component structure.

```javascript
<Node 
  style={{
    width: 300,
    height: 300,
    backgroundColor: 'red',
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignContent: 'space-around',
    alignItems: 'flex-end',
  }}
>
  <Node 
    style={{
      width: 150,
      height: 50,
      backgroundColor: 'powderblue',
    }}
  />
  <Node 
    style={{
      width: 120,
      height: 100,
      backgroundColor: 'skyblue',
    }}
  />
  <Node 
    style={{
      width: 120,
      height: 50,
      backgroundColor: 'steelblue',
    }}
  />
</Node>
```

--------------------------------

### Configure Flex Container Wrapping (React Native)

Source: https://www.yogalayout.dev/docs/styling/flex-wrap

Demonstrates how to set the flex-wrap property on a flex container in React Native. This example shows a layout where child nodes will wrap onto multiple lines if they exceed the container's width. It utilizes the Layout and Node components.

```javascript
<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 200,
      height: 250,
      padding: 10,
      flexWrap: 'wrap',
    }}>
    <Node style={{margin: 5, height: 50, width: 50}} />
    <Node style={{margin: 5, height: 50, width: 50}} />
    <Node style={{margin: 5, height: 50, width: 50}} />
    <Node style={{margin: 5, height: 50, width: 50}} />
  </Node>
</Layout>
```

--------------------------------

### Align Content with Flex Wrap in Yoga Layout (JSX)

Source: https://www.yogalayout.dev/docs/styling/align-content

Demonstrates how to use the 'alignContent' property in Yoga Layout to control the alignment of wrapped lines along the cross-axis. This example uses JSX syntax and requires the Yoga Layout library. The 'flexWrap' property must be set to 'wrap' for 'alignContent' to take effect.

```jsx
<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 200,
      height: 250,
      padding: 10,
      alignContent: 'flex-start',
      flexWrap: 'wrap',
    }}>
    <Node style={{margin: 5, height: 50, width: 50}} />
    <Node style={{margin: 5, height: 50, width: 50}} />
    <Node style={{margin: 5, height: 50, width: 50}} />
    <Node style={{margin: 5, height: 50, width: 50}} />
  </Node>
</Layout>
```

--------------------------------

### Load Yoga Layout Synchronously (JavaScript)

Source: https://www.yogalayout.dev/blog/announcing-yoga-2

Shows how to use the synchronous entry point 'yoga-layout/sync' for loading Yoga layout. This method is not recommended for new projects due to potential blocking behavior and limitations with WebAssembly on browsers. It provides a way to replicate previous blocking load behavior.

```javascript
import Yoga, {ALIGN_CENTER} from 'yoga-layout/sync';  
  
const node = Yoga.Node.create();  
node.setAlignContent(ALIGN_CENTER);  

```

--------------------------------

### Basic Layout with Yoga

Source: https://www.yogalayout.dev/index

This snippet demonstrates a basic layout structure using Yoga's Node component. It showcases nesting, flex properties, gap, margin, and absolute positioning. The configuration `useWebDefaults: false` is passed to the Layout component.

```javascript
<Layout config={{useWebDefaults: false}}>
  <Node style={{width: 250, height: 475, padding: 10}}>
    <Node style={{flex: 1, rowGap: 10}}>
      <Node style={{height: 60}} />
      <Node style={{flex: 1, marginInline: 10}} />
      <Node style={{flex: 2, marginInline: 10}} />
      <Node
        style={{
          position: "absolute",
          width: "100%",
          bottom: 0,
          height: 64,
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "space-around",
        }}
      >
        <Node style={{height: 40, width: 40}} />
        <Node style={{height: 40, width: 40}} />
        <Node style={{height: 40, width: 40}} />
        <Node style={{height: 40, width: 40}} />
      </Node>
    </Node>
  </Node>
</Layout>
```

--------------------------------

### Create and Attach Yoga Config

Source: https://www.yogalayout.dev/docs/getting-started/configuring-yoga

Demonstrates creating a Yoga Config and attaching it to a Yoga Node. This allows for customized layout behavior within different parts of the Yoga tree. Remember to free the config when no longer needed to prevent memory leaks.

```c
#include <yoga/Yoga.h>

YGConfigRef config = YGConfigNew();
// Setup config...

YGNodeRef root = YGNodeNewWithConfig(config);

```

```java
import com.facebook.yoga.YogaConfigFactory;
import com.facebook.yoga.YogaNodeFactory;

YogaConfig config = YogaConfigFactory.create();
// Setup config...

YogaNode root = YogaNodeFactory.create(config);

```

```javascript
import Yoga from 'yoga-layout';

const config = Yoga.Config.create();
// Setup config...

const root = Yoga.Node.create(config);

```

--------------------------------

### Build Yoga Tree with Styles (C/C++)

Source: https://www.yogalayout.dev/docs/getting-started/laying-out-a-tree

Creates a root Yoga Node, sets its dimensions and flex direction, and adds two child nodes with specified flex grow and margin properties. Yoga Nodes must be manually freed when no longer needed.

```c
#include <yoga/Yoga.h>
  
YGNodeRef root = YGNodeNew();
YGNodeStyleSetFlexDirection(root, YGFlexDirectionRow);
YGNodeStyleSetWidth(root, 100.0f);
YGNodeStyleSetHeight(root, 100.0f);
  
YGNodeRef child0 = YGNodeNew();
YGNodeStyleSetFlexGrow(child0, 1.0f);
YGNodeStyleSetMargin(child0, YGEdgeRight, 10.0f);
YGNodeInsertChild(root, child0, 0.0f);
  
YGNodeRef child1 = YGNodeNew();
YGNodeStyleSetFlexGrow(child1, 1.0f);
YGNodeInsertChild(root, child1, 1.0f);

```

--------------------------------

### Using Public C API for Yoga Configuration

Source: https://www.yogalayout.dev/blog

Demonstrates the correct way to interact with Yoga's configuration using the public C API. This involves including the main Yoga header and using functions like YGConfigNew and YGConfigSetPointScaleFactor.

```c
// Public API (GOOD)  
#include <yoga/Yoga.h>  

YGConfigRef config = YGConfigNew();  
YGConfigSetPointScaleFactor(config, 1.0f);  

```

--------------------------------

### Load Yoga Layout Asynchronously (JavaScript)

Source: https://www.yogalayout.dev/blog/announcing-yoga-2

Demonstrates how to asynchronously load the Yoga layout engine using the 'yoga-layout' package. This is the recommended approach for modern JavaScript environments, supporting WebAssembly for better performance. It requires explicit loading before use.

```javascript
import {loadYoga, Align} from 'yoga-layout';  
  
const Yoga = await loadYoga();  
const node = Yoga.Node.create();  
node.setAlignContent(Align.Center);  

```

--------------------------------

### Explicitly Load Yoga WebAssembly (Async)

Source: https://www.yogalayout.dev/blog

Illustrates how to explicitly load the asynchronous WebAssembly variant of yoga-layout. This is useful when you need to ensure the WebAssembly module is loaded before use.

```javascript
import {loadYoga} from 'yoga-layout/wasm-async';

```

--------------------------------

### Load and Use Yoga Layout (Async JavaScript)

Source: https://www.yogalayout.dev/blog

Shows how to asynchronously load and use the yoga-layout package in JavaScript. This is the recommended approach for modern bundlers and TypeScript, involving an await call to loadYoga.

```javascript
import {loadYoga, Align} from 'yoga-layout';

const Yoga = await loadYoga();
const node = Yoga.Node.create();
node.setAlignContent(Align.Center);

```

--------------------------------

### Set Node Size Constraints with Min/Max Width/Height (React)

Source: https://www.yogalayout.dev/docs/styling/min-max-width-height

Demonstrates how to apply min/max width and height constraints to nodes within a YogaLayout structure using React. These properties override other size-related styles to ensure nodes adhere to specified limits, which can be absolute pixel values or percentages.

```jsx
<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 200,
      height: 250,
      padding: 10,
    }}>
    <Node style={{margin: 5, height: 25}} />
    <Node
      style={{
        margin: 5,
        height: 100,
        maxHeight: 25,
      }}
    />
    <Node
      style={{
        margin: 5,
        height: 25,
        minHeight: 50,
      }}
    />
    <Node
      style={{
        margin: 5,
        height: 25,
        maxWidth: 25,
      }}
    />
    <Node
      style={{
        margin: 5,
        height: 25,
        width: 25,
        minWidth: 50,
      }}
    />
  </Node>
</Layout>
```

--------------------------------

### Build Yoga Tree with Styles (JavaScript)

Source: https://www.yogalayout.dev/docs/getting-started/laying-out-a-tree

Initializes a Yoga layout tree in JavaScript, setting the root node's properties like flex direction, width, and height. Child nodes are added with specified flex grow and margin. Manual freeing of nodes is required.

```javascript
import Yoga, {Edge, FlexDirection, PositionType} from 'yoga-layout';
  
const root = Yoga.Node.create();
root.setFlexDirection(FlexDirection.Row);
root.setWidth(100);
root.setHeight(100);
  
const child0 = Yoga.Node.create();
child0.setFlexGrow(1);
child0.setMargin(Edge.Right, 10);
root.insertChild(child0, 0);
  
const child1 = Yoga.Node.create();
child1.setFlexGrow(1);
root.insertChild(child1, 1);

```

--------------------------------

### Distribute Space with Flex Grow (Yoga Layout)

Source: https://www.yogalayout.dev/docs/styling/flex-basis-grow-shrink

Illustrates how to distribute remaining space within a container among its children using the 'flexGrow' property in Yoga layout. Higher 'flexGrow' values result in a larger share of the available space.

```javascript
<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 200,
      height: 200,
      padding: 10,
    }}>
    <Node style={{margin: 5, flexGrow: 0.25}} />
    <Node style={{margin: 5, flexGrow: 0.75}} />
  </Node>
</Layout>
```

--------------------------------

### Build Yoga Tree with Styles (Java)

Source: https://www.yogalayout.dev/docs/getting-started/laying-out-a-tree

Constructs a root Yoga Node in Java, defining its layout properties such as flex direction, width, and height. Child nodes are added with flex grow and margin. Java-backed nodes are garbage collected automatically.

```java
import com.facebook.yoga.YogaEdge;
import com.facebook.yoga.YogaFlexDirection;
import com.facebook.yoga.YogaNode;
import com.facebook.yoga.YogaNodeFactory;
import com.facebook.yoga.YogaPositionType;
  
YogaNode root = YogaNodeFactory.create();
root.setFlexDirection(YogaFlexDirection.ROW);
root.setWidth(100.0f);
root.setHeight(100.0f);
  
YogaNode child0 = YogaNodeFactory.create();
child0.setFlexGrow(1.0f);
child0.setMargin(YogaEdge.Right, 10.0f);
root.addChildAt(child0, 0.0f);
  
YogaNode child1 =  YogaNodeFactory.create();
child1.setFlexGrow(1.0f);
root.addChildAt(child1, 1.0f);

```

--------------------------------

### Explicitly Load WebAssembly Variant (JavaScript)

Source: https://www.yogalayout.dev/blog/announcing-yoga-2

Illustrates how to explicitly load the asynchronous WebAssembly variant of Yoga layout using 'yoga-layout/wasm-async'. This allows developers to choose the specific implementation if automatic detection by the bundler is not desired.

```javascript
import {loadYoga} from 'yoga-layout/wasm-async';  

```

--------------------------------

### Configure Yoga Layout Conformance with Errata

Source: https://www.yogalayout.dev/docs/getting-started/configuring-yoga

Explains how to set Yoga's errata to control layout conformance, balancing standards compliance with backward compatibility. Errata can be configured to match older Yoga versions or enable specific legacy behaviors.

```c
#include <yoga/Yoga.h>

YGConfigRef config = YGConfigNew();
YGConfigSetErrata(config, YGErrataClassic);

```

```java
import com.facebook.yoga.YogaConfigFactory;
import com.facebook.yoga.YogaErrata;

YogaConfig config = YogaConfigFactory.create();
config.setErrata(YogaErrata.CLASSIC);

```

```javascript
import Yoga, {Errata} from 'yoga-layout';

const config = Yoga.Config.create();
config.setErrata(Errata.Classic);

```

--------------------------------

### Add Yoga via Swift Package Manager

Source: https://www.yogalayout.dev/blog

This snippet illustrates how to add the Yoga library as a dependency in a Swift project using Swift Package Manager.

```swift
// Package.swift  
import PackageDescription  

let package = Package(
    dependencies: [
        .package(url: "https://github.com/facebook/yoga.git", from: "3.0.0")
    ],
)

```

--------------------------------

### Calculate Yoga Tree Layout (C/C++)

Source: https://www.yogalayout.dev/docs/getting-started/laying-out-a-tree

Calculates the layout for the entire Yoga node tree. The layout process can be constrained by available width and height, or allowed to expand infinitely by passing `YGUndefined`.

```c
YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionLTR);

```

--------------------------------

### Add Yoga via CocoaPods

Source: https://www.yogalayout.dev/blog

This snippet shows how to integrate the Yoga library into an iOS or macOS project using CocoaPods.

```ruby
# Podfile  
pod 'Yoga', '~> 3.0.0'

```

--------------------------------

### Read Layout Results (C/C++)

Source: https://www.yogalayout.dev/docs/getting-started/laying-out-a-tree

Retrieves computed layout information for a specific Yoga node, such as its position (left offset) and dimensions (height). These results are written to each node after layout calculation.

```c
float left = YGNodeLayoutGetLeft(child0);
float height = YGNodeLayoutGetHeight(child0);

```

--------------------------------

### Add yoga-layout to npm Dependencies (package.json)

Source: https://www.yogalayout.dev/blog/announcing-yoga-2

Shows how to include the 'yoga-layout' package as a dependency in a Node.js project's 'package.json' file. This is the standard method for managing JavaScript package versions in npm-based projects.

```json
// package.json  
dependencies: {  
  "yoga-layout": "^2.0.0"  
}  

```

--------------------------------

### Apply Incremental Layout (C/C++)

Source: https://www.yogalayout.dev/docs/advanced/incremental-layout

Applies layout to a Yoga node if it has new layout information. It first checks the `YGNodeHasNewLayout` flag, resets it if true, performs the layout work, and then recursively applies layout to its children.

```c
void applyLayout(YGNodeRef node) {
  if (!YGNodeHasNewLayout(node)) {
    return;
  }

  // Reset the flag
  YGNodeSetHasNewLayout(node, false);

  // Do the real work
  ...

  for (size_t i = 0; i < YGNodeGetChildCount(node); i++) {
    applyLayout(YGNodeGetChild(node, i));
  }
}
```

--------------------------------

### Absolute Positioning with Percentage Sizing (JavaScript)

Source: https://www.yogalayout.dev/blog

Shows the JavaScript code for parent and child styles used to demonstrate how Yoga now correctly accounts for padding when calculating the size of absolutely positioned nodes with percentage lengths.

```javascript
const parentStylesWithPadding = {
  backgroundColor: 'green',
  height: 200,
  width: 200,
  padding: 50,
};

const childStylesPercentage = {
  position: 'absolute',
  backgroundColor: 'blue',
  height: '25%',
  width: '25%',
};
```

--------------------------------

### Read Layout Results (JavaScript)

Source: https://www.yogalayout.dev/docs/getting-started/laying-out-a-tree

Fetches the computed layout dimensions and positions for a Yoga node in JavaScript, such as the computed left offset and height. These values represent the final layout after calculation.

```javascript
const left = child0.getComputedLeft();
const height = child0.getComputedHeight();

```

--------------------------------

### Configure Yoga Errata API (C++)

Source: https://www.yogalayout.dev/blog

Demonstrates how to configure Yoga's Errata API in C++ to manage conformance levels. This involves creating a configuration object and setting the desired errata level, such as YGErrataClassic.

```cpp
// Example.cpp
YGConfigRef config = YGConfigNew();
YGConfigSetErrata(config, YGErrataClassic);

YGNodeRef node = YGNodeNewWithConfig(config);

```

--------------------------------

### Read Layout Results (Java)

Source: https://www.yogalayout.dev/docs/getting-started/laying-out-a-tree

Accesses the calculated layout properties for a Yoga node in Java, including its position on the X-axis (layoutX) and its height (layoutHeight). These values are available after the `calculateLayout` method is called.

```java
float left = child0.getLayoutX();
float height = child0.getLayoutHeight();

```

--------------------------------

### Configure Yoga Absolute Percent Sizing Erratum (JavaScript)

Source: https://www.yogalayout.dev/blog

Shows how to configure the `AbsolutePercentAgainstInnerSize` erratum in JavaScript to preserve legacy behavior for percentage-based sizing of absolutely positioned elements. This addresses how padding affects size calculations.

```javascript
Yoga.setErrata(Yoga.Errata.AbsolutePercentAgainstInnerSize, true);
// Or to enable new behavior:
// Yoga.setErrata(Yoga.Errata.AbsolutePercentAgainstInnerSize, false);
```

--------------------------------

### Configure Layout Component with Yoga

Source: https://www.yogalayout.dev/playground

This snippet demonstrates how to configure a root layout component using Yoga. It sets default web behaviors to false and defines a nested node with specific styling and flex properties.

```javascript
<Layout config={{useWebDefaults: false}}>
  <Node style={{width: 350, height: 350, padding: 20}}>
    <Node style={{flex: 1}} />
  </Node>
</Layout>
```

--------------------------------

### Configure Yoga Errata API (Java)

Source: https://www.yogalayout.dev/blog

Illustrates setting Yoga's Errata API in Java to control rendering conformance. It shows the creation of a YogaConfig object and applying an errata setting like YogaErrata.CLASSIC.

```java
// Example.java
YogaConfig config = YogaConfigFactory.create();
config.setErrata(YogaErrata.CLASSIC);

YogaNode node = YogaNodeFactory.create(config);

```

--------------------------------

### Add Yoga Dependency in Gradle (build.gradle)

Source: https://www.yogalayout.dev/blog/announcing-yoga-2

Provides the Gradle dependency declaration for integrating the Yoga library into an Android or Java project. This snippet specifies the group, artifact, and version for the Yoga library.

```groovy
// build.gradle  
dependencies {  
  implementation("com.facebook.yoga:yoga:2.0.0")  
}  

```

--------------------------------

### Apply Incremental Layout (Java)

Source: https://www.yogalayout.dev/docs/advanced/incremental-layout

Applies layout to a Yoga node if it has new layout information. It checks the `hasNewLayout` method, marks the layout as seen, performs the layout work, and then recursively applies layout to its children.

```java
void applyLayout(YogaNode node) {
  if (!node.hasNewLayout()) {
    return;
  }

  // Reset the flag
  node.markLayoutSeen();

  // Do the real work
  ...

  for (int i = 0; i < node.getChildCount(); i++) {
    applyLayout(node.getChildAt(i));
  }
}
```

--------------------------------

### C/C++ Inset API

Source: https://www.yogalayout.dev/docs/styling/insets

This section details the C/C++ API for setting the position property of a node's style. It explains how insets affect nodes based on their position type (static, relative, absolute).

```APIDOC
## C/C++ YGNodeStyleSetPosition

### Description
Sets the position property for a specific edge of a node's style. Insets define offsets for a node's edges, influencing its placement within its parent container based on the node's position type.

### Method
`YGNodeStyleSetPosition`

### Endpoint
N/A (C/C++ function)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **node** (*YGNodeRef*) - Required - A reference to the Yoga node.
- **edge** (*YGEdge*) - Required - The edge to apply the inset to (e.g., `YGEdgeLeft`, `YGEdgeRight`, `YGEdgeTop`, `YGEdgeBottom`, `YGEdgeAll`).
- **position** (*float*) - Required - The inset value for the specified edge.

### Request Example
```c
YGNodeStyleSetPosition(node, YGEdgeRight, 10.0f);
```

### Response
#### Success Response (void)
This function does not return a value.

#### Response Example
N/A
```

--------------------------------

### Set Yoga Point Scale Factor for Pixel Grid Alignment

Source: https://www.yogalayout.dev/docs/getting-started/configuring-yoga

Details how to configure the `PointScaleFactor` to manage subpixel rendering and ensure layout edges align with the physical pixel grid. Setting this to 0 disables pixel grid rounding.

```c
#include <yoga/Yoga.h>

YGConfigRef config = YGConfigNew();
YGConfigSetPointScaleFactor(config, 2.0f);

```

```java
import com.facebook.yoga.YogaConfigFactory;

YogaConfig config = YogaConfigFactory.create();
config.setPointScaleFactor(2.0f);

```

```javascript
import Yoga from 'yoga-layout';

const config = Yoga.Config.create();
config.setPointScaleFactor(2);

```

--------------------------------

### Apply Incremental Layout (JavaScript)

Source: https://www.yogalayout.dev/docs/advanced/incremental-layout

Applies layout to a Yoga node if it has new layout information. It checks the `hasNewLayout` method, marks the layout as seen, performs the layout work, and then recursively applies layout to its children.

```javascript
void applyLayout(node) {
  if (!node.hasNewLayout()) {
    return;
  }

  // Reset the flag
  node.markLayoutSeen();

  // Do the real work
  ...

  for (let i = 0; i < node.getChildCount(); i++) {
    applyLayout(node.getChildAt(i));
  }
}
```

--------------------------------

### Add yoga dependency in Gradle (Kotlin)

Source: https://www.yogalayout.dev/blog

This snippet demonstrates how to include the Yoga library in an Android project using Gradle with Kotlin DSL.

```kotlin
// build.gradle.kts  
dependencies {
  implementation("com.facebook.yoga:yoga:3.0.0")
}

```

--------------------------------

### Setting Measure Function in C/C++ with Context

Source: https://www.yogalayout.dev/docs/advanced/external-layout-systems

Sets a measure function and context on a Yoga node in C/C++. The context is a void pointer that can be used to associate external data with the node, accessible during measure callbacks.

```c
Widget widget{};
YGNodeSetContext(node, &w);
YGNodeSetMeasureFunc(node, &measureWidget);
```

--------------------------------

### Set Default Item Size with Flex Basis (Yoga Layout)

Source: https://www.yogalayout.dev/docs/styling/flex-basis-grow-shrink

Demonstrates how to set the default size of a child item along the main axis using the 'flexBasis' property in Yoga layout. This property influences the item's size before any grow or shrink calculations are applied.

```javascript
<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 200,
      height: 200,
      padding: 10,
    }}>
    <Node style={{margin: 5, flexBasis: 50}} />
  </Node>
</Layout>
```

--------------------------------

### Shrink Overflowing Items with Flex Shrink (Yoga Layout)

Source: https://www.yogalayout.dev/docs/styling/flex-basis-grow-shrink

Shows how to manage overflowing children within a container using the 'flexShrink' property in Yoga layout. This property determines how much an item should shrink relative to others when the total size exceeds the container's main axis size.

```javascript
<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 200,
      height: 200,
      padding: 10,
    }}>
    <Node style={{margin: 5, flexShrink: 5, height: 150}} />
    <Node style={{margin: 5, flexShrink: 10, height: 150}} />
  </Node>
</Layout>
```

--------------------------------

### Configure Yoga Absolute Positioning Erratum (JavaScript)

Source: https://www.yogalayout.dev/blog

Demonstrates how to configure the `AbsolutePositioningIncorrect` erratum in JavaScript to prefer legacy behavior for absolute positioning. This is useful for maintaining compatibility during upgrades.

```javascript
Yoga.setErrata(Yoga.Errata.AbsolutePositioningIncorrect, true);
// Or to disable legacy behavior:
// Yoga.setErrata(Yoga.Errata.AbsolutePositioningIncorrect, false);
```

--------------------------------

### React Native Layout with Gap

Source: https://www.yogalayout.dev/docs/styling/gap

This React Native code demonstrates how to apply a gap of 10 units to a flex container using the `gap` style property. The `Layout` and `Node` components are used to structure the UI, with the `gap` property directly influencing the spacing between child nodes. Ensure Yoga is correctly configured in your React Native project.

```jsx
<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 200,
      height: 250,
      padding: 10,
      flexWrap: 'wrap',
      gap: 10,
    }}>
    <Node style={{height: 50, width: 50}} />
    <Node style={{height: 50, width: 50}} />
    <Node style={{height: 50, width: 50}} />
    <Node style={{height: 50, width: 50}} />
    <Node style={{height: 50, width: 50}} />
  </Node>
</Layout>
```

--------------------------------

### Setting Measure Function in Java with Data

Source: https://www.yogalayout.dev/docs/advanced/external-layout-systems

Sets a measure function on a Yoga node in Java, associating framework data with the node. This allows the measure function to access specific data related to the widget it represents.

```java
Widget widget = new Widget();
node.setData(widget);
node.setMeasureFunction(MEASURE_WIDGET);
```

--------------------------------

### Calculate Yoga Tree Layout (JavaScript)

Source: https://www.yogalayout.dev/docs/getting-started/laying-out-a-tree

Triggers the layout calculation for a Yoga node tree in JavaScript, allowing for undefined width and height for infinite expansion. Layout direction can be specified.

```javascript
root.calculateLayout(undefined, undefined, Direction.LTR);

```

--------------------------------

### Set Row Gap in C/C++ using Yoga

Source: https://www.yogalayout.dev/docs/styling/gap

This C/C++ code snippet demonstrates how to set the row gap for a Yoga layout node. It utilizes the `YGNodeStyleSetGap` function with `YGGutterRow` to specify the spacing amount between rows. Ensure the Yoga library is correctly linked.

```c
YGNodeStyleSetGap(node, YGGutterRow, amount);
```

--------------------------------

### Calculate Yoga Tree Layout (Java)

Source: https://www.yogalayout.dev/docs/getting-started/laying-out-a-tree

Computes the layout for a Yoga node tree in Java. Layout can be calculated with specific dimensions or allowed to be undefined. The directionality (e.g., RTL) can be set on the root node.

```java
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);

```

--------------------------------

### Set Gap in Java using Yoga

Source: https://www.yogalayout.dev/docs/styling/gap

This Java code snippet shows how to set the gap for a Yoga layout node. It uses the `setGap` method with `YogaGutter.ROW` to define the spacing amount for rows. This method is part of the Yoga layout library for Java.

```java
node.setGap(YogaGutter.ROW, amount);
```

--------------------------------

### Set Gap in JavaScript using Yoga

Source: https://www.yogalayout.dev/docs/styling/gap

This JavaScript code snippet illustrates how to set the gap for a Yoga layout node. It employs the `setGap` method with `Gutter.Row` to specify the spacing amount for rows. This functionality is available in JavaScript integrations of the Yoga layout system.

```javascript
node.setGap(Gutter.Row, amount);
```
Tokens:
Raw