React Primitives

Tyson Cadenhead

React Primitives

"Learn Once. Build Anywhere."

React Web

React Native

React Sketch

...

React Primitives

<View>

<Text>

<Touchable>

import * as React from 'react';
import { Touchable, View, Text } from 'react-primitives';

const Button = (props) => (
    <Touchable onPress={props.onPress}>
        <View>
            <Text>{props.children}</Text>
        </View>
    </Touchable>
); 

<Image>

import * as React from 'react';
import { Image } from 'react-primitives';

const MyImage = () => (
    <Image source={{
        uri: 'http://facetheforce.today/random/400?r=1'
    }} />
);

<StyleSheet>

import * as React from 'react';
import { StyleSheet, View } from 'react-primitives';

const MyImage = () => (
    <View style={styles.blueSquare} />
);

const styles = StyleSheet.create({
    blueSquare: {
        backgroundColor: 'blue',
        width: 400,
        height: 400
    }
});

<Animated>

class MyClass {
    constructor (props) {
        super(props);

        this.state = {
            anim: new Animated.Value(0);
        };
    }

    componentDidMount () {
        Animated.timing(this.state.anim, {
            toValue: 100
        }).start();
    }
    
    render () {
        return (
            <Animated.View style={{ 
                left: this.state.anim,
                width: 200,
                height: 200,
                backgroundColor: '#CCCCCC'
            }}>
            </Animated.View>
        );
    }
} 

<End>

@tysoncadenhead

React Primitives

By tysoncadenhead

React Primitives

Create sharable components.

  • 1,051