React Native / NativeBase 3

NativeBase v3.0

NativeBase の中の人は v3 の開発に忙しく、v2 はあまりメンテされてない印象。まだ alpha だが、活発にコミットされているようなので、今のうちに移行しておくのが良さそう（パッと見、v2 とは相当違うっぽい）

• TypeScript で開発されているので、TypeScript ユーザーは安心
• テーマのカスタマイズも簡単そう
• Avatar など最近のアプリでよく見る UI がある

https://twitter.com/greedy_reader/status/1320992409241567232

Versions native-base - npm

• alpha と next がある
• alpha が出たのは 8 ヶ月前なので、next を追うのが良さそう。

情報源

• 開発ブランチ https://github.com/GeekyAnts/NativeBase/tree/v3-dev
• ドキュメント https://nativebase.github.io/

関連ライブラリ

• styled-components
• Styled System

Install

$ npm i native-base@next react-native-svg react-native-vector-icons styled-components styled-system

Theme を有効にするために NativeBaseProvider が必要。

import { NativeBaseProvider, Button, Icon, Text, Thumbnail } from 'native-base';
...
export default function App() {
  return (
    <NativeBaseProvider>
      ...
    </NativeBaseProvider>
  );
}

AvatarGroup

<AvatarGroup size="md" max={3}>
  {_.shuffle(CoWorkers).map((coworker, i) => (
    <Avatar name={coworker.name} source={coworker.picture}></Avatar>
  ))}
</AvatarGroup>

いつもの警告。Avatar に key を設定しても発生するので、NativeBase 側で修正が必要？ (3.0.0-next.14)

Warning: Each child in a list should have a unique "key" prop.%s%s See https://fb.me/react-warning-keys for more information.%s, 

Check the render method of `AvatarGroup`., , 
    in Avatar (at Group.tsx:27)
    in AvatarGroup (at App.tsx:295)
    in RCTView (at View.js:34)

v2 の Thumbnail の代わりに、v3 の Avatar を使う。

• Photo by Omid Armin on Unsplash
• Photo by Jonny Neuenhagen on Unsplash
• Photo by David Suarez on Unsplash

Button

• https://nativebase.github.io/docs/Button
• colorScheme - ここに載ってるものが使えそう
  • danger とかも使える。この辺
• ボタンのラベルを <Text> で囲む必要がない。

Styled System が採用されてるので、できるだけ Tailwind CSS をやめておかないと Theme をいじるときに困る。

Styled System 使うと fontSize とかをリテラルで指定しないといけないのが Tailwind CSS と比較して気持ち悪いなあ。やっぱり、Tailwind CSS を採用して .text-lg みたいに指定した方が変更にも強くなるような

List

• Ol, Ul, Li は ListItem, List のエイリアスっぽい

Divider

• ソースコード
• View に width, height, border を指定することで実装されている
• なので、色は borderColor