✌️

NativeBaseはいいぞって話

2022/04/26に公開

UI/UX

tech

株式会社FUNEEでCONCRUを開発中のどんちゃんです。

ReactNative(Expo)を1から学習して1年数ヶ月。

プロダクトの開発が落ち着いてきたので、スキマ時間を使って、CONCRU開発で学んだノウハウや、テクニックを小出しにしていこうと思います。

今回はCONCRUで使っているUIライブラリ、NativeBase　を紹介します。

歴史

元々あったライブラリですが、昨年v3系にメジャーアップデートし、大変身を遂げました。
下記記事でも取り上げられてます。

使ってみた所感

独自のオレオレStyleをかなり減らした
テーマの切り替えがカンタン！
Utility Firstなので、TailwindとかBootStrap(僕は4系しか知りませんが)みたいな感覚で使える
コミュニティが活発、海外では流行りつつあるが日本語の情報が少ない
ドキュメントがわかりやすい(だから記事が少ない？)
Figmaのデザインキットもある(弊社での大きな採用理由)

使用例

例えば、stateの変更により、アプリ全体のテーマを変更するコード。テーマ変更機能ですね。

import React from 'react'
import Navigator from '@/MainApp/RootNavigator'
import { NativeBaseProvider } from 'native-base'
import { useTheme } from '@/hooks/useTheme'
import { themes } from '@/theme'

export const MainApp = () => {
  const theme = useTheme()

  return (
    <NativeBaseProvider theme={themes[theme]}>
      <Navigator />
    </NativeBaseProvider>
  )
}

テーマはこんな感じで定義してます。デフォルトのテーマをExtendする感じですね。

import { extendTheme, theme } from 'native-base'

const themeA = extendTheme({
  colors: {
    primary: theme.colors.purple,
  },
  config: {
    initialColorMode: 'light',
  },
})

const themeB = extendTheme({
  colors: {
    primary: theme.colors.blue,
  },
  config: {
    initialColorMode: 'light',
  },
})

const themeC = extendTheme({
  colors: {
    primary: theme.colors.green,
  },
  config: {
    initialColorMode: 'light',
  },
})

/** テーマセット */
export const themes = {
  themeA,
  themeB,
  themeC,
}

使っていきたいコンポーネントがたくさん！

いま絶賛NativeBaseにリプレイスを進めているので、StyleSheet APIを使ったスパゲッティStyleを撲滅中です。

現場からは以上です。
是非ドキュメントを読んでみてください。

歴史

使ってみた所感

使用例

使っていきたいコンポーネントがたくさん！

Discussion