Google API for Android

tools:replace=”appComponentFactory”

tl;dr

17 June 2019 – Dear Google release new update for Google Play service and Firebase. Out of sudden, react native application failed at compile time and keep complaining the following message.

Manifest merger failed : Attribute [email protected] value=(android.support.v4.app.CoreComponentFactory) from [com.android.support:support-compat:28.0.0] AndroidManifest.xml:22:18-91
    is also present at [androidx.core:core:1.0.0] AndroidManifest.xml:22:18-86 value=(androidx.core.app.CoreComponentFactory).
    Suggestion: add 'tools:replace="android:appComponentFactory"' to <application> element at AndroidManifest.xml:5:5-19:19 to override.

But, why ?

Why is it related to Google releasing new update for Google Play service and Firebase ?

Google API for Android

Here is why. The update will required you to update your app to use Jetpack (AndroidX). Hence, you need to migrate your app to AndroidX, if you haven’t migrate yet. Android official website do provide the guide to do so – Migrating to AndroidX.

Adding the following to your gradle.properties file in the root project folder.
For react-native project – rootProject/android/gradle.properties

android.useAndroidX=true
android.enableJetifier=true

How about React Native ?

React Native plan to support AndroidX in the next release RN 0.60. React Native June Update. So, most likely that third-party React Native library will follow afterward.

If your react native app facing any issue as describe above, I suggest a few to solve your problem.

#1 If your app use any Google API service

In your build.gradle,

dependencies {
  // Please do this
  implementation "com.google.android.gms:play-services-gcm:16.1.0"

  // Not this, as this line will always fetching the latest version 
  // implementation "com.google.android.gms:play-services-gcm:+"
}

Locked the version of Google API service, instead to taking the latest version can save you from the error. As long as your version is not the one in latest version, then you are good to go.

#2 Updating third-party React Native library

So far, what I know is that react-native-device-info is releasing a patch to fixes this issue. Maybe there is other library affected as well, that you may need to find it out.

#3 Migrating to AndroidX

But, this is not a reliable way for React Native, especially if your app depend on a huge amount of third-party library.

For more details, please refer to this github issue.

Thanks for reading. Have a nice day.

Resources to learn programming

Resources to learn Programming and Certifications

tl;dr

A list of resources to learn programming in 2019.

#1 MOOC
#2 Programming Challenges/Contest
#3 Certifications

#1 MOOC (Massive Open Online Course)

  • Coursera – this is the first MOOC that I know
    • Where I learn about data structure and algorithms
    • Where you can find a lot of famous university offered their course here, Stanford, NTU (National Taiwan University), University of Michigan and more
  • edX
  • Udacity – Offered nanodegree
  • Udemy – Where you can buy or sell course individually
    • Currently, I’m taking the aws solutions architect course from here [June 2019]
  • taiwanmooc – Mooc in Taiwan, All in Chinese
  • OpenCourse by NTU(National Taiwan University)
  • Mooc China – All in Chinese

Coursera, edX or Udemy offered a wide range of courses. While, Udacity offered courses that are mostly related to technology.

Why taking programming class through MOOC is better than conventional university ?

  1. Offered updated technology in the industry.
    • Courses from local colleges or universities often outdated or not practical
  2. Offered both free and paid course, paid for the course only if you want a certificate from the course (Where the cost may vary, but cheaper than local colleges or universities)
  3. Get practical advise/skills from industry expert.
  4. Anyone have the chances to communicate or share your idea with others around the world

#2 Programming Challenges/Contest

#3 Certifications

1. IT Certifications

2. Cloud Certifications

Functional and Class Component

ReactJS – Functional and Class Components

tl;dr

ReactJS是一个由脸书(Facebook)在2013年所发布的UI library. ReactJS鼓吹以零件式(component-based) 的架构, 创建网站的前端. 可以想象成建构前端就像玩乐高(Lego)一样, 你所见到的按键(buttons), 链接(links), 页面(page), 输入(input), 截面(section), 段落(paragraph)或图像(images)等等, 都可以变成一个个独立的小零件, 然后在把它们进行组装. 以达到界面重用(Reusable UI component).

接下来, 是给想入手ReactJS的一些个人看法. 基本要求:
* HTML, CSS, JavaScript (ES 6)

#1 Component

Class Component

import React, { Component } from "react"

Class Sample extends Component {
  constructor(props) {
    super(props)

    this.state = {
      isActive: false
    }

    // 重点, 如果,不bind.当你click那个button,就会有error.
    // 不信, 你可以试试 😂
    this.handleToggleStatus.bind(this)
  }

  handleToggleStatus() {
    this.setState({
      isActive: !this.state.isActive
    })
  }

  render() {
    return (
      <>
        <button 
          onClick={this.handleToggleStatus} 
          style={{ backgroundColor: this.props.buttonColor || "#ffffff" }}
         >
           {this.state.isActive ? "Activated" : "Deactivated" }
        </button>

        // 这会是同样的一个按键,不过backgroundColor是红色的
        <Sample buttonColor={this.state.isActive ? "#ff0000" : "#ffffff" } />
      </>
    )
  }
}

如上所示, 每按一下按键(button), 字眼Activated和Deactivated就会跳动更换.

class component 也可以叫stateful component. 在class component里头你可以通过setState, 以更改component的state(状态). 每一个setState都会重新执行render(). 界面(UI)就会更新.

除了state, props的更新也会刷新界面(UI). 在上面的示范, 按键的backgroundColor会因为this.props.buttonColor的不同而改变.

Class component可以运用ReactJS的component’s lifecycle

一个component的state, 可以是其他component的props.

Tips 1: 为什么要bind ?
Tips 2: ReactJS 的Class/Stateful component的概念与Flutter的Stateful Widget是一样的.
Tips 3: <>...</>这个syntax是React Fragment的shorthand

Functional Component

import React from "react";

function Sample(props) {
  return <button {...props}>...</button>
}

在ReactJS 16.8版本之前, functional component又称Stateless component. 因为你只能通过props刷新界面(UI). 没有statesetState.

在ReactJS 16.8版本之后, 就有了React Hooks. React Hooks缩小了class component和functional component之间的差别. 简而言之, 你可以在functional component里头, 使用setState的概念. 如下,

import React, { useState } from "react"

function Sample(props) {
  // 顺序很重要, [value, function]
  // 第一个, 是value
  // 第二个, 是function
  const [isActive, setIsActive] = useState(false);

  function handleToggleStatus() {
    setIsActive(prevState => !prevState)
  }

  return (
    <button onClick={handleToggleStatus} >
      {isActive ? "Activated" : "Deactivated"}
    </button>
  )
}

See the Pen Functional Component and Hooks by Yik Kok (@yikkok-yong) on CodePen.

Tips 4: Functional/Stateless component的概念和Flutter的Stateless Widget是一样的.
Tips 5: Functional component里面不会需要this, 自然也不需要bind
Tips 6: React Hooks目前还未能完全取代class component

结语

Functional component 和 class component都有各自的好. 没有绝对. 视情况而使用. (只有更好, 没有最好)