@triniwiz/nativescript-yogalayout
by Osei Fortune | v0.4.1
NativeScript Layout powered by YogaLayout
npm i --save @triniwiz/nativescript-yogalayout

Nativescript nativescript-yogalayout

ns plugin add @triniwiz/nativescript-yogalayout

Usage

Documentation for the latest stable release

In React NativeScript

First, register the component before any of your React NativeScript app renders. A good place to put this code is in your entrypoint file (which may be called src/app.ts or similar), before the ReactNativeScript.start function is called. Here's how to install it:

import { registerYogaLayout } from "@triniwiz/nativescript-yogalayout/react";

registerYogaLayout();

Example usage

import * as React from "react";

export function YogaLayoutExample() {
return (
<yoga>
<yoga backgroundColor="aqua" margin={50} padding={30} borderRadius={10} borderWidth={5} borderColor="purple">
<yoga backgroundColor="red" padding={2}>
<yoga flex={.3} backgroundColor="green">
<label alignSelf="center" color="black" text="First"/>
</yoga>
<yoga flex={.5} backgroundColor="white">
<label alignSelf="center" color="black" text="Second"/>
</yoga>
<yoga backgroundColor="pink">
<label alignSelf="center" color="black" text="Third"/>
</yoga>
<label alignSelf="center" color="blue" text="Something"/>
</yoga>
<yoga position="absolute" bottom="10" right="10" width="100" height="100" backgroundColor="yellow" padding="10">
<label color="black" text="Absolute"/>
</yoga>
</yoga>
</yoga>
);
}

Troubleshooting

If you see an error like this when writing e.g. <yoga> into your JSX:

Property 'yoga' does not exist on type 'JSX.IntrinsicElements'.ts(2339)

Make sure that you have:

  1. Installed the react-nativescript npm module.
  2. Installed the @types/react npm module, strictly with the exact version provided in the React NativeScript starter template.
  3. Run the postinstall script that comes with the React NativeScript template – npm run postinstall – to patch @types/react.
  4. Registered the component as described above (i.e. import and run the registerYogaLayout() method).
  5. If using Visual Studio Code, option-click the import @triniwiz/nativescript-yogalayout/react to jump to the file; opening the file will force it to load its provided typings.

License

Apache License Version 2.0