React Native で NativeBase を使ってテーマのカスタマイズを行おうとしたら hex is not a function と言われた

Programming

2017.06.282018.01.27

React Native で利用できる UI コンポーネントライブラリの1つに NativeBase というものがある。

以下のように npm でパッケージのインストールを行い、テーマを利用する為にドキュメントにあるように node コマンドを実行した。

$ npm install native-base --save
$ react-native link
$ node node_modules/native-base/ejectTheme.js

https://docs.nativebase.io/Customize.html#Customize

その後以下のような感じにサンプルコードを App.js に入力して

import React, { Component } from 'react';
import { Container, Content, Button, Text, StyleProvider } from 'native-base';
import getTheme from './native-base-theme/components';
import material from './native-base-theme/variables/material';
export default class App extends Component {
  render() {
    return (
      <StyleProvider style={getTheme(material)}>
        <Container style={{alignItems:'center'}}>
          <Button style={{alignSelf:'center'}}>
            <Text>Button</Text>
          </Button>
        </Container>
      </StyleProvider>
    );
  }
}

npm run ios としたところ、以下のようにエラーメッセージが表示された。