ボタンに動きをつける

# ボタンに動きをつける
ボタンを押したら、押されたよっていう動きをつける。

## 現在のコード
親コンポーネント
MemoEditScreen.jsx

```jsx
import React from 'react';
import {
  View, TextInput, StyleSheet,
} from 'react-native';

import AppBar from '../components/AppBar';
import CircleButton from '../components/CircleButton';
import KeyboardSafeView from '../components/KeybordSafeView';

// eslint-disable-next-line react/function-component-definition
export default function MemoEditScreen() {
  return (
    <KeyboardSafeView style={styles.container}>
      <AppBar />

      <View style={styles.inputContainer}>
        <TextInput value="買い物" multiline style={styles.input} />
      </View>

      <CircleButton name="check" />
    </KeyboardSafeView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  inputContainer: {
    paddingVertical: 30,
    paddingHorizontal: 24,
    flex: 1,
  },
  input: {
    fontSize: 20,
    lineHeight: 24,
    flex: 1,
    textAlignVertical: 'top',
  },
});
```

ボタンのコンポーネント
CircleButton.jsx

```jsx
import React from 'react';
import { View, StyleSheet } from 'react-native';
// eslint-disable-next-line import/no-extraneous-dependencies
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',
  },
});
```

スマホ画面
![図1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2284107/c978e8b9-9e65-385c-c12e-4a2a92174275.jpeg)

右下のボタンを押しても何も動きがない。

## TouchableOpacityを使う
CircleButton.jsx

```jsx
import React from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';
// eslint-disable-next-line import/no-extraneous-dependencies
import { string, shape, func } 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, onPress } = props;
  return (
    <TouchableOpacity style={[styles.circleButton, style]} onPress={onPress}>
      <Feather name={name} size={30} color="white" />
    </TouchableOpacity>
  );
}

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

CircleButton.defaultProps = {
  style: null,
  onPress: 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',
  },
});
```

スマホ画面でボタンを押すと半透明になり、押された感が出る。

![図10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2284107/620fdf2c-3f0f-55fa-fbbf-b87e2a53fbbd.jpeg)