Basic Working Example for styledComponents

index.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';

import { Title, Instructions, ContainerView } from './MainStyledComponents';

export default class styledcomponentsdemo extends Component {
  constructor() {
    super();
    this.state = { sizeClass: 'small' };
  }

  onLayout(event) {
    const sizeClass = event.nativeEvent.layout.width > 500 ? 'large' : 'small';
    console.log(sizeClass, event);
    this.setState({
      sizeClass,
    });
  }

  render() {
    const { sizeClass } = this.state;
    return (
      <ContainerView onLayout={event => this.onLayout(event)}>
        <Title sizeClass={sizeClass}>
          Welcome to React Native!
        </Title>
        <Instructions sizeClass={sizeClass}>
          To get started, edit index.ios.js
        </Instructions>
        <Instructions sizeClass={sizeClass}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Instructions>
      </ContainerView>
    );
  }
}

AppRegistry.registerComponent(
  'styledcomponentsdemo',
  () => styledcomponentsdemo
);

MainStyledComponents.js

import styled from 'styled-components/native';


const getTitleFontSize = ({sizeClass}) => {
  const sizes = {
    small: 20,
    large: 50,
  };
  return sizes[sizeClass] || sizes['small'];
};

export const Title = styled.Text`
  font-size: ${getTitleFontSize};
  text-align: center;
  margin: 10;
`;

const getInstructionsFontSize = ({sizeClass}) => {
  const sizes = {
    small: 14,
    large: 24,
  };
  return sizes[sizeClass] || sizes['small'];
};

export const Instructions = styled.Text`
  font-size: ${getInstructionsFontSize};
  text-align: center;
  color: #333333;
  margin-bottom: 5;
`;

export const ContainerView = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: #F5FCFF;
`;