Functional react

junction.js

import Junction from "react-junction";
import { View } from "react-native";
import { omit } from "ramda";
import { renderComponent } from "recompose";
import { graphql, gql } from "react-apollo";

// the primitive styling of the component
const Avatar = Junction(props => ({
  borderRadius: 50,
  borderSize: 2,
  width: 100,
}))
  // set primitive type
  .as(View)
  // hoc
  .with(graphql(gql`{ currentPerson { photo } }`))
  // select props
  .props(x => ({
    ...x,
    photo: x.loading ? "/default.png" : x.currentPerson.photo,
  }))
  // create styles based on props
  .add(props => ({ borderColor: props.loading ? "gray" : "transparent" }))
  // change existing style
  .change(style => ({ ...style, borderSize: style.borderSize * 2 }))
  // set a render function
  // default is (props) => <Is style/class={style} >{props.children}</Is>
  .render(props => <Image src={props.photo} />);

const SquareAvatar = Avatar
  .change(omit(["borderRadius", "borderColor", "borderSize"]))
  .change(style => ({ height: style.width }));

const UserCard = Junction
  .of({
    width: 300,
    height: 100,
  })
  .as(View)
  .with(graphql(gql`{ currentPerson { firstName, lastName } }`))
  .with(branch(props => props.loading, renderComponent(Loading)))
  .render(props => (
    <View>
      <Text>{props.firstName} {props.lastName}</Text>
      <SquareAvatar {...props} />
    </View>
  ));