Files
yoga/website/contents/getting-started/standalone.md
Michael サイトー 中村 Bashurov 272eb940f1 Update standalone.md docs (#1110)
Summary:
Added set of row direction, otherwise it'll be column and numbers won't correspond to comments

https://codesandbox.io/s/yoga-standalone-docs-bug-izqwv?file=/src/index.js
![image](https://user-images.githubusercontent.com/1552189/142233513-8b21c77f-0a12-4c9d-9965-fe8c9e43c02f.png)

Pull Request resolved: https://github.com/facebook/yoga/pull/1110

Reviewed By: yungsters

Differential Revision: D40026417

Pulled By: yungsters

fbshipit-source-id: 7e26406909268f85ee9b1ccf73aad50bab042ff9
2022-10-03 21:13:20 -07:00

1.8 KiB

path, title, hasPlayground
path title hasPlayground
/getting-started/standalone Standalone false

Standalone

Adding Yoga to a project is as simple as adding the dependency to your package manager of choice.

Android

dependencies {
  compile 'com.facebook.yoga.android:yoga-layout:x.x.x'
}

Javascript

The JavaScript bindings for Yoga can be used from node.js and within the browser. When using Yoga from node.js the native library is used, in browsers a pure JS version is used (cross-compiled using emscripten).

$> yarn add yoga-layout

This is an example on how to use Yoga in JavaScript, for a full API reference, have a look at the flow-type definitions.

import yoga, {Node} from 'yoga-layout';

const root = Node.create();
root.setWidth(500);
root.setHeight(300);
root.setJustifyContent(yoga.JUSTIFY_CENTER);
root.setFlexDirection(yoga.FLEX_DIRECTION_ROW);

const node1 = Node.create();
node1.setWidth(100);
node1.setHeight(100);

const node2 = Node.create();
node2.setWidth(100);
node2.setHeight(100);

root.insertChild(node1, 0);
root.insertChild(node2, 1);

root.calculateLayout(500, 300, yoga.DIRECTION_LTR);
console.log(root.getComputedLayout());
// {left: 0, top: 0, width: 500, height: 300}
console.log(node1.getComputedLayout());
// {left: 150, top: 0, width: 100, height: 100}
console.log(node2.getComputedLayout());
// {left: 250, top: 0, width: 100, height: 100}

iOS

pod 'YogaKit', '~> 1.7'

Including Yoga From Source

If you plan to include Yoga from Source in a C++ project then all you have to do is inlude the top level yoga folder. Make sure to look at the top level BUCK file to ensure you build using the same compiler flags.