React-Native expo에서 FAB 버튼 만들기

FAB 버튼이란?

우측 하단에 있는 조그마한 버튼을 일반적으로 "Floating Action Button" (FAB) 이라고 칭한다.

추가 이동같은 간단한 작업할때 주로 사용.

FAB 버튼 코드

import { Alert, StyleSheet, Text, TouchableOpacity } from 'react-native';

const FAB: React.FC<Props> = () => {
  const AddLocationListAlert = () => {
    Alert.prompt(//제목 , // 내용 , [
      {
        text: 'Cancel',
        onPress: () => {
            // 취소시 작동하는것
        },
        style: 'cancel',
      },
      {
        text: 'OK',
        onPress: (text) => {
          // ok 누를시 작동하는 것!
        },
      },
    ]);
  };

  return (
    <TouchableOpacity style={styles.fab} onPress={AddLocationListAlert}>
      <Text style={styles.fabText}>+</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  fab: {
    position: 'absolute',
    bottom: 25,
    right: 25,
    backgroundColor: '#6200ee',
    width: 56,
    height: 56,
    borderRadius: 28,
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOpacity: 0.2,
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 2,
    elevation: 5,
  },
  fabText: {
    color: 'white',
    fontSize: 24,
    fontWeight: 'bold',
  },
});

export default FAB;

FAB 버튼에 Prompt를 이용해 구현해봤다.

구현 샘플