Skip to content
Primitive React Interfaces Across Targets
JavaScript Objective-C Shell Starlark Java HTML
Branch: master
Clone or download

Latest commit

Latest commit e2da26e Apr 3, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example fix animation test Jun 17, 2018
scripts Refactor tests and CI process Dec 28, 2016
src add react-figma platform resolver Apr 1, 2020
.babelrc Move to injection API May 12, 2017
.eslintignore Refactor tests and CI process Dec 28, 2016
.eslintrc fix lint Jun 24, 2018
.gitignore update dependencies Jun 11, 2018
.happo.js Add happo and stories Dec 22, 2016
.npmignore Add happo and stories Dec 22, 2016
.travis.yml Update .travis.yml Feb 3, 2018
LICENSE Initial commit Mar 23, 2016
README.md update react-figma install in readme Apr 2, 2020
index.js Move to injection API May 12, 2017
package.json v0.8.1 Apr 3, 2020
webpack.config.js update dependencies Jun 11, 2018

README.md

react-primitives

Primitive React Interfaces Across Targets

npm

Installation

npm install --save react-primitives

You will also need to install the targets you want to support:

  • web:
    npm install --save react-dom react-native-web react-art
  • native iOS and Android:
    npm install --save react-native
  • sketch:
    npm install --save react-sketchapp react-test-renderer
  • figma:
    npm install --save react-figma yoga-layout-prebuilt
  • vr:
    npm install --save react-360
  • Windows:
    npm install --save react-native-windows

Usage

import React from "react";
import { View, Text, Image, StyleSheet } from "react-primitives";

class Foo extends React.Component {
  render() {
    return <View style={styles.foo}>{this.props.children}</View>;
  }
}

const styles = StyleSheet.create({
  foo: {
    width: 100,
    height: 100,
    backgroundColor: "#ff00ff"
  }
});

What is this?

This library attempts to propose an ideal set of primitives around building React applications, regardless of Platform. In the future, this could be used as a shared interface among React and React Native components that don't use platform-specific APIs.

Importantly, this includes StyleSheet for declaring styles, as well as Animated for doing declarative Animations.

The exported APIs thus far are:

  1. Animated: Pulled from the animated project.
  2. StyleSheet: Follows React Native's StyleSheet API.
  3. View: A base component for Layout.
  4. Text: A base component for Text rendering.
  5. Image: A base component for Image rendering.
  6. Touchable: A base component for interaction.
  7. Easing: A base set of easing functions.
  8. Dimensions: Get the devices dimensions.
  9. PixelRatio: Get the devices pixel density.
  10. Platform: Get information about the platform. (iOS, Android, Web, Sketch, VR,...)

In the future, a TextInput component may also be added.

Props where props are due

This library was largely inspired from the work done by Nicolas Gallager and his great work on the react-native-web library. A few of the files in this repo are even copied directly from his project.

You can’t perform that action at this time.