アイコンの使い方

expoのアイコンを使ってみる

ライブラリをインストール

npm install @expo/vector-icons

どんなアイコンがあるかは、下記のページを参照する。

プラスアイコンを使ってみる

https://icons.expo.fyi/
ページの検索バーにplusと入れる。

好きなアイコンをクリックしてみると、下記のような画面になる。

この２行をコピーしてCircleButtonに適用してみる。
propsでiconを変更できるようにnameを親から受け取れるようにした。

CircleButton.jsx

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { string, shape } from 'prop-types';
import { Feather } from '@expo/vector-icons'; 

// eslint-disable-next-line react/function-component-definition
export default function CircleButton(props) {
  const { style, name } = props;
  return (
    <View style={[styles.circleButton, style]}>
      <Feather name={name} size={30} color="white" />
    </View>
  );
}

CircleButton.propTypes = {
  style: shape(),
  name: string.isRequired,
};

CircleButton.defaultProps = {
  style: null,
};

const styles = StyleSheet.create({
  circleButton: {
    backgroundColor: '#D81B60',
    width: 65,
    height: 65,
    borderRadius: 32,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    right: 40,
    bottom: 40,
    /* shadowはiphoneにしか効かないCSS */
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 8 },
    shadowOpacity: 0.35,
    shadowRadius: 5,
    /* elevationはAndroid用のCSS */
    elevation: 8,
  },
  circleButtonLabel: {
    color: '#fff',
    fontSize: 32,
    lineHeight: 32,
    fontWeight: 'bold',
  },
});

親コンポーネントで下記のように使える。

<CircleButton style={{ top: 170, bottm: 'auto' }} name="plus" />

注意点

今回はCircleButton.jsxのコンポーネント内にFeatherのアイコンを使用している。
なので、どんなアイコンが使えるかは、
https://icons.expo.fyi/
で、FiltersでFeatherを選択して検索する。