lintonye

import React, { Component } from "react";
import {
  Text,
  View,
  StyleSheet,
  Picker,
  Image,
  TouchableOpacity
} from "react-native";

lintonye

There's a different way to loop through an array. I think it's pretty cool. For example:

['🍌', '🍒', '🥑'].map(function(fruit) { return 'I like ' + fruit; })

Do you know what's going on here?

• First of all, ['🍌', '🍒', '🥑'] is an array of strings.
• Second, .map() means it'll call the function map() but with the specific data in the array of fruits.

lintonye

import React, { PureComponent } from 'react';

const IS_BROWSER = typeof window !== "undefined";

export default class Form extends PureComponent {
  componentWillMount() {
    const { formId, version = 6 } = this.props;
    if (IS_BROWSER) {
      this.script = document.createElement("script");
      this.script.id = `_ck_${formId}`;

lintonye

Render svg on Sketch, Web and React Native

What?

Use a single codebase to render svg on Sketch, Web and React Native, but react-primitives doesn't support svg yet. One suggestion is to use react-primitives-svg, but there's an issue when trying to render it on the web, as described in airbnb/react-sketchapp#265.

Solution

We could directly use the core.web.js file as below. Also there might be a way to pick up the .web.js extension just as .android.js and .ios.js.

// Svg.js
import { Platform } from "react-primitives";

lintonye

import React, { Component } from "react";
import { Text, View, StyleSheet, Picker, Image } from "react-native";
//import { Constants } from 'expo';

const Hat = ({ type }) => {
  let url = "";
  switch (type) {
    case "cap":
      url =
        "https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Fcap.png?1518712935783";

lintonye

class PhotoDetail extends React.Component {
  _getTransitions() {
    const sharedImages = new Transitions.SharedElement(`image-${this.props.photo.url}`);
    const crossFadeScene = new Transitions.Opacity();
    const slideTitle = new Slide();
    const slideDescription = new Slide();
    const scaleFab = new Transitions.Scale();
    // sharedImages(0.7) => crossFadeScene(0.1) => [slideTitle, slideDescription, scaleFab]
    const sharedImageFirst = sequence(
      { sharedImages, duration: 0.7 },

lintonye

// The 'navigation' prop passed to PhotoGrid
navigation: {
  ...
  state: {
    routeName: 'PhotoGrid',
    ...
    transition: {  // transition is only present if it's current in transition
      toRoute: 'PhotoDetail'
    }
  }

lintonye

class PhotoDetail extends React.Component {
  _getTransitions() {
    const sharedImages = new Transitions.SharedElement(`image-${this.props.photo.url}`);
    const crossFadeScenes = new Transitions.CrossFade();
    const slideTitle = new Slide();
    const slideDescription = new Slide();
    const scaleFab = new Transitions.Scale();
    // sharedImages(0.7) => crossFadeScene(0.1) => [slideTitle, slideDescription, scaleFab]
    return sequence(
      { sharedImages, duration: 0.7 },

lintonye

Kicking off my diary about React Native

It's hard to ignore the success that React Native has achieved in a short year. With the neck-breaking development in its ecosystem, React Native is looking increasingly promising. Is it mature enough for production use? How does its mantra "learn once, write everywhere" affect developer productivity? How does it compare with other solutions (such as Xamarin)? To answer questions like these, I decided to try it with my own hands and share whatever I'll learn in the journey.

I'll try to build a new app with React Native every one or two months (~ 1-2 hours per day), and write a post every week: silly mistakes, road blocks, gotchas and pitfalls, tips and tricks, cool tools, third-party components, useful resources and of course the full source code.

My background is primarily in Android (built a tool, wrote a Treehouse course) b

lintonye

import rx.Observable;
import rx.schedulers.Schedulers;

import java.io.*;
import java.net.ServerSocket;
import java.net.Socket;
import java.net.UnknownHostException;
import java.util.concurrent.CountDownLatch;

/**