浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React Native】「React Native Elements」のInputコンポーネントの下線を消す

個人的にとても助かったので備忘録としてまとめ。
タイトルにある通り、React Native Elements ライブラリの入力欄コンポーネント <Input /> にデフォルトで追加されている下線を消す方法についてです。
正直これができなくて、React Native の <TextInput /> コンポーネントを使ったこともあったので……。

解決手段はこちらから。

javascript – React Native Elements Line underneath FormInput Component – Stack Overflow
https://stackoverflow.com/questions/50602486/react-native-elements-line-underneath-forminput-component

 

こちらの記事によると、inputContainerStyleborderBottomWidth: 0 を追加するだけとのこと!
サンプルコードは下記のとおりです。

import { Input } from 'react-native-elements';

<Input
  label='メールアドレス'
  keyboardType='email-address'
  inputContainerStyle={{ borderBottomWidth: 0 }} />

こちらを追加してアプリを実行したところ、無事に下線が消えていました…!

ずっと勘違いしていて inputStyle で何とかしようとしていましたが、inputContainerStyle だったんですね…。
解決できてよかったです!

 

以上、React Native Elements の <Input /> コンポーネントの下線を消す方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)