Emilios1995

import React, { Component } from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
const { width } = Dimensions.get("window");

export default class App extends Component {
  render() {
    const tileDimensions = calcTileDimensions(width, 2)  // -> change this number and see!
    const tiles = 'Lorem Ipsum Dolor Sit Amet'.split(' ')
    return (
      <View style={styles.container}>

Emilios1995

// tpr = tiles per row
const calcTileDimensions = (deviceWidth, tpr) => {
  const margin = deviceWidth / (tpr * 10);
  const size = (deviceWidth - margin * (tpr * 2)) / tpr;
  return { size, margin };
};

Emilios1995

// Recursive funcion with Tail Call Optimization

flatten = ([first, ...rest], work = []) => {
  if (first === undefined) {
    return work;
  }
  else if (!Array.isArray(first)) {
    return flatten(rest, [...work, first]);
  }
  else {

Emilios1995

// -- BEFORE --
// In this first exmaple, the action dispatching and flow would be hard to test, because its highly coupled with 
// the component and the way it interacts with the Linking API.

// login.js
import {Linking} from 'react-native'
export default class Login extends Component {
  constructor(props) {
    super(props);
    this.handleDeepLink = this.handleDeepLink.bind(this);