samueljmurray

/* MyComponent.js */

import HeadingText from "HeadingText";

class MyComponent extends React.Component {
  render() {
    return (
      <View>
        <HeadingText>Article heading</HeadingText>
        <Text>Article body...</Text>

samueljmurray

/* Button.js */

import styles from "buttonStyles";

class Button extends React.Component {
  render() {
    const contextualStyles = styles(this.props);
    return (
      <View style={contextualStyles.button}>
        // ...

samueljmurray

/* buttonStyles.js */

export default (props) => StyleSheet.create({
  button: StyleSheet.flatten([
    {
      backgroundColor: "#DDD",
    },
    props.colour && {
      backgroundColor: props.colour,
    },

samueljmurray

/* Button.js */

import styles from "buttonStyles";

class Button extends React.Component {
  render() {
    return (
      <View style={[
        styles.button,
        this.props.colour && {

samueljmurray

/* buttonStyles.js */

export default StyleSheet.create({
  button: {
    backgroundColor: "#DDD",
  },
  button_disabled: {
    backgroundColor: "#999",
  },
});

samueljmurray

{
  marginHorizontal: screenSize({xs: 8, s: 12}, 16)
}

samueljmurray

import { Dimensions } from "react-native";

// Height
const screenSizes = [
  {
    name: "xs",
    height: 568
  },
  {
    name: "s",

samueljmurray

{
  marginHorizontal: extraSmallScreen ? 8 : (smallScreen ? 12 : 16);
}

samueljmurray

const extraSmallScreen = Dimensions.get("window").height < 568;
const smallScreen = Dimensions.get("window").height < 667;

{
  marginHorizontal: extraSmallScreen ? 8 : 16,
}

samueljmurray

/* MyComponent.js */

import s from "styles";

class MyComponent extends React.Component {
  render() {
    return (
      <View style={[s.flex1, s.ma1, s.bg_gray_blue]}>
        <Text style={[s.teal, s.o_90]}>
          Hi.