maciejmatu

import Video from 'react-native-video';

// From documentation
<Video source={{uri: "background"}}   // Can be a URL or a local file.
       ref={(ref) => {
         this.player = ref
       }}                                      // Store reference
       rate={1.0}                              // 0 is paused, 1 is normal.
       volume={1.0}                            // 0 is muted, 1 is normal.
       muted={false}                           // Mutes the audio entirely.

maciejmatu

import Sound from 'react-native-sound';

const sound = new Sound('http://sounds.com/some-sound', null, (error) => {
  if (error) {
    // do something
  }
  
  // play when loaded
  sound.play();
});

maciejmatu

// component props mock
const properties = {
  color: 'red',
  large: true
};

// curried function
const styled = (props) => (strings, ...args) => {
  return strings.map((string, i) => {
    const correspondingItem = args[i];

maciejmatu

'font-size: 12px; background-color: ' + 'red' + ';'

maciejmatu

(
  [ 'font-size: 12px ;background-color: ', ';' ], // first argument
  (props => props.solid ? 'red' : 'blue')
)

maciejmatu

const Button = styled.button`
  font-size: 12px;
  background-color: ${props => props.solid ? 'red' : 'blue' };
`;

maciejmatu

const log = (...args) => console.log(...args);

log('This', 'is', 'useless');
// 'This', 'is', 'useless'

const name = 'Bob';
log`Hi ${name}! How are you?`;
// ['Hi ', '! How are you?'], 'Bob'

maciejmatu

.header__text {
  font-size: 24px;
  color: wheat;
  text-transform: uppercase;
  
  &--large {
    font-size: 32px;
  }
}

maciejmatu

import './HeaderText.scss';

export default ({ 
  large,
  children,
  className,
  ...props
}) => {
  const classList = `header__text ${large && 'header__text--large'} ${className}`;
  

maciejmatu

import styled from 'styled-components';

const HeaderText = styled.h1`
  font-size: ${ props => props.large ? 32 : 24 }px;
  color: wheat;
  text-transform: uppercase;
`;

export default () => (
  <HeaderText large>Looks Cool</HeaderText>