jm90m

React lifecycle cheatsheet

Method	Side effects1	State updates2	Example uses
Mounting
componentWillMount		✓	Constructor equivalent for createClass
render			Create and return element(s)
componentDidMount	✓	✓	DOM manipulations, network requests, etc.
Updating
componentWillReceiveProps		✓	Update state based on changed props

jm90m

import React, { Component } from 'react';
import styled, { keyframes } from 'styled-components';
import { COLORS } from 'constants/styles';

const shift = keyframes`
  0%{
    left: -60px
    opacity: 0;
    background-color: ${COLORS.YELLOW.YELLOW};
  }

jm90m

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": [
        "transform-react-jsx-source",
        ["module-resolver", {
          "root": ["./src"]
        }]
      ]

jm90m

export const COLORS = {
  GREY: {
    BLACK_RUSSIAN: '#0A0A0B',
    BRIGHT_GREY: '#5A5B60',
  },
  RED: {
    FIRE_ENGINE_RED: '#D81120',
  },
  WHITE: {
    WHITE: '#FFFFFF',

jm90m

const DARE_DEVIL = require('../../assets/images/dare-devil.jpeg');
const HOUSE_OF_CARDS = require('../../assets/images/house-of-cards.jpeg');
const LUKE_CAGE = require('../../assets/images/luke-cage.jpeg');
const ORANGE_IS_THE_NEW_BLACK = require('../../assets/images/orange-is-the-new-black.jpeg');
const STRANGER_THINGS = require('../../assets/images/stranger-things.jpeg');

const SHOWS = [
  {
    title: 'Daredevil',
    summary: 'When a young boy vanishes, a small town uncovers a mystery involving a secret experiment, terrify supernatural forces, and one strange little girl',

jm90m

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components/native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { COLORS } from 'constants/styles';
import { TouchableWithoutFeedback } from 'react-native';
const NETFLIX_LOGO = require('../../../assets/icons/netflix-logo.png');

const Container = styled.View`
  display: flex;

jm90m

import React, { Component } from 'react';
import { TouchableOpacity } from 'react-native';
import styled from 'styled-components/native';
import { COLORS } from 'constants/styles';
import Icon from 'react-native-vector-icons/FontAwesome';

const Container = styled.View`
  background-color: ${COLORS.GREY.BLACK_RUSSIAN};
  height: 100%;
`;

jm90m

import React, { Component } from 'react';
import styled from 'styled-components/native';
import Header from 'components/common/header';
import { COLORS } from 'constants/styles';
import { TouchableWithoutFeedback, ScrollView, TouchableOpacity } from 'react-native';
import ShowData from 'data/data';
import Icon from 'react-native-vector-icons/FontAwesome';

const Container = styled.View`
  display: flex;

jm90m

import React from 'react';
import { StackNavigator } from 'react-navigation';
import HomeScreen from 'components/screens/home-screen';
import ShowDetailsScreen from 'components/screens/show-details-screen';

const HomeStackNavigator = StackNavigator(
  {
    Main: { screen: HomeScreen },
    ShowDetails: { screen: ShowDetailsScreen },
  },

jm90m

import React from 'react';
import { StatusBar } from 'react-native';
import { DrawerNavigator, DrawerItems } from 'react-navigation';
import HomeStackNavigator from 'components/navigation/home-stack-navigator';
import { COLORS } from 'constants/styles';
import styled from 'styled-components/native';

const DrawerContainer = styled.View`
  flex: 1;
  background-color: ${COLORS.GREY.BRIGHT_GREY};