proton-native/docs/manual_install.md
Niklas Mischkulnig 06ee92d1f7 Add styled text (#141)
* Proof of concept fonts

* Inheirit font style

* Use style prop

* More font attributes

* Reset demo

* Fixes

* Font example

* Text transforms, integrate FontButton

* Add docs

* Add StyledText

* Update package lock

* Add StyledText to prop checking

* Update documentation for StyledText

* Add markdown prettier

* Change default font size
2018-06-09 14:04:49 -04:00

1.5 KiB

Manual

To install, simply download it from NPM: npm i -S proton-native

If you get an error about Python on Windows, install the build tools: npm install --global --production windows-build-tools

You also need to have babel-cli and these babel-presets prepared in devDependencies

npm install --save-dev babel-cli babel-preset-env babel-preset-stage-0 babel-preset-react

Then create .babelrc:

{
    "presets": [
      "env",
      "stage-0",
      "react"
    ]
}

And then add the following to your package.json:

  "scripts": {
    "start": "babel-node index.js"
  }

Now you can just run npm run start to run your script.

index.js

A usual example starts with the following, just like any other React Native app. Most props can be set to their defaults and not be mentioned, as shown above. The Window component actually accepts many props, but only 4 have to be specified.

import React, { Component } from 'react'; // import from react

import { render, Window, App } from 'proton-native'; // import the proton-native components

class Example extends Component {
  render() {
    // all Components must have a render method
    return (
      <App>
        // you must always include App around everything
        <Window title="Example" size={{ w: 300, h: 300 }} menuBar={false}>
          // all your other components go here
        </Window>
      </App>
    );
  }
}

render(<Example />); // and finally render your main component

Use all your usual state and component workflow.