lintonye

Solutions:

1. Because the “name” style contains “flex: 1”, the name text is flexible. This means it may grow or shrink depending on how much space is available in its container. Now this is important: the description text is really tall -- so tall that it uses up all the space in the container and it still sticks out. Therefore, the flexible items in the same container are shrunk to make room for the description text. Because the description is too tall, the name text is compressed to 0 height. That’s why it’s invisible. Phew…

2. Now when the hat image is made flexible, it gets shrunk too. This time, because the image can be shrunk down quite a bit -- to the point that the container has enough room for all its children, including the tall description text that used to stick out. Now, everybody is happy. The name, hat image, description text are all displayed correctly. Notice the last line of the description “<= The end”. It was not visible before since the description stuck outside of its container.

3

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, { 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

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

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

> time $ANDROID_HOME/build-tools/android-4.4/aapt p -v -M AndroidManifest.xml \
     -S res/ \
     -F resources.ap_ \
     -I $ANDROID_HOME/platforms/android-19/android.jar

...
real	0m15.602s
user	0m49.074s
sys	0m1.695s