Works by

Ren's blog

アプリケーションバックエンド中心に書いていきます

【React Native】react-native-textinput-affectsを使ってリッチなTextInputを実装する

react-native-textinput-affects

github.com

react-native-textinput-effectsはReact Nativeアプリ上で使用できるTextInput UIコンポーネントです。
豊富な種類の入力フォームが用意されており、デモを見るだけでも楽しめます。

普通のTextInputと同様のプロパティ設定が可能なので、
今までのTextInputを置き換える形で使用することが可能です。

Usage

下の記事に従い、create-react-native-appでプロジェクトを作成します。

rennnosukesann.hatenablog.com

$ create-react-native-app react-native-textinput-affect-app
$ cd react-native-textinput-affect-app

react-native-textinput-affectsをインストール。

$ npm install react-native-textinput-effects --save

今回はアイコン用に使うreact-native-vector-iconsもインストールします。

$ npm install --save react-native-vector-icons

これで完了です。

Source

試しにUIコンポーネントSaeを使ってみました。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { Sae } from 'react-native-textinput-effects';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Sae
          label={'Email Address'}
          iconName={'pencil'}
          iconColor={'white'}
          iconClass={FontAwesomeIcon}
          // TextInput props
          autoCapitalize={'none'}
          autoCorrect={false}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#cc0',
    justifyContent: 'center',
    padding: 44
  },
});

ちなみにreact-native-vector-icons/FontAwesomeはcreate-react-native-appプロジェクトで特にインストールしなくても使えました。

Demo

f:id:rennnosukesann:20180604220456g:plain:w250

TextInputが一気に華やかになりました!
他にもたくさん種類があるみたいなので、アプリのデザインに合わせて使っていきたいですね。

参考

github.com