For https://github.com/styled-components/vim-styled-components/pull/30#issuecomment-332134976

vim-styled-components-syntax-weirdness

// @flow
//
// This is a mininmal example, much of the real component is stripped out.
//
import React, { PureComponent } from 'react'
import { Image, Alert } from 'react-native'
import autobind from 'autobind-decorator'
import styled from 'styled-components/native'

import Form from '../../components/Form/Form.component'
import { getStatusBarHeight } from '../../lib/dimensions'

const ContactContainer = styled.View`
  align-items: flex-end;
  padding-top: ${getStatusBarHeight()}
`

const SecondaryButtonsContainer = styled.View`
  flex-direction: row;
  justify-content: space-between;
  align-content: space-between;
`

const FormContainer = styled.View`
  flex: 2;
`

const ImageContainer = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
`

const NewAccountContainer = styled.View`
  flex-shrink: 1;
  flex-grow: 0;
`

export default class Login extends PureComponent {
  props: Props

  state: State = {
    formFields: {},
  }

  componentWillReceiveProps(nextProps: Props): void {
    const oldProps = this.props
    const {
      loginLoading,
      loginSuccess,
      forgottenPasswordLoading,
      forgottenPasswordError,
      isConnected,
    } = nextProps
    const wasLoginLoading = oldProps.loginLoading && !loginLoading
    const wasForgottenPasswordLoading =
      oldProps.forgottenPasswordLoading
      && !forgottenPasswordLoading
    const isNowLoggedIn =
      oldProps.loginSuccess !== loginSuccess
      && loginSuccess

    if (wasLoginLoading && isNowLoggedIn) {
      this.props.navigate()
    }

    if (forgottenPasswordError && !oldProps.forgottenPasswordError) {
      Alert.alert()
    }

    if (
      wasForgottenPasswordLoading
      && !forgottenPasswordError
      && this.state.formFields.email
    ) {
      Alert.alert()
    }
  }

  componentWillUnmount() {
    this.props.clearError()
  }

  valid(): boolean {
    return !!this.state.formFields.email && !!this.state.formFields.password
  }

  @autobind
  updateFormFields(field: string): (string) => void {
    return (value: string) => {
      const formFields = { ...this.state.formFields }
      formFields[field] = value
      this.setState({ formFields })
    }
  }

  @autobind
  onPressCreateNewAccount() {
    this.props.navigate()
  }

  render() {
    return (
      <Form />
    )
  }
}