Primitive React Interfaces Across Targets
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
- vr:
npm install --save react-vr
- Windows:
npm install --save react-native-windows
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',
},
});
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:
Animated
: Pulled from the animated project.StyleSheet
: Follows React Native's StyleSheet API.View
: A base component for Layout.Text
: A base component for Text rendering.Image
: A base component for Image rendering.Touchable
: A base component for interaction.Easing
: A base set of easing functions.Dimensions
: Get the devices dimensions.PixelRatio
: Get the devices pixel density.Platform
: Get information about the platform. (iOS, Android, Web, Sketch, VR,...)
In the future, a TextInput
component may also be added.
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.