React Native / expo vector icon

 

 

1. 먼저 import 하기

import { MaterialIcons } from '@expo/vector-icons';

 

 

2. MaterialIcons 컴포넌트 추가 후, size, color 지정 가능

 

<MaterialIcons name='delete' size={18} color='#333'></MaterialIcons>

 

3. 응용 

 

todoItem.js

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';

export default function TodoItem({ item, pressHandler }){

    return(
        <TouchableOpacity onPress={() => pressHandler(item.key)}>
            <View style={styles.item}>
                <MaterialIcons name='delete' size={18} color='#333'></MaterialIcons>
                <Text style={styles.itemText}>{item.text}</Text>
            </View>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    item:{
        padding:16,
        marginTop:16,
        borderColor:'#bbb',
        borderWidth:1,
        borderStyle:'dashed',
        borderRadius:10,
        flexDirection:'row',
    },
    itemText: {
        marginLeft:10,
    }
})

 

App.js

import { StatusBar } from 'expo-status-bar';
import React, {useState} from 'react';
import { StyleSheet, Text, View, FlatList, Alert, TouchableWithoutFeedback,Keyboard } from 'react-native';
import Header from './components/header';
import TodoItem from './components/todoItem';
import AddTodo from './components/addTodo';
import Sandbox from './components/sandbox';


export default function App() {

  const[todos, setTodos] = useState([
    {text: 'buy coffee', key: '1'},
    {text: 'create an app', key: '2'},
    {text: 'play on the switch', key: '3'},
  ]);

  const pressHandler = (key) => {
    setTodos((prevTodos) =>{
      return prevTodos.filter(todo => todo.key != key)
    })
  }

  const submitHandler = (text) => {

    if(text.length > 3){
      setTodos((prevTodos) => {
        return [
          { text: text, key: Math.random().toString() },
          ...prevTodos,

        ];
      });
    }else {
      Alert.alert('OOPS', 'Todos must be over 3 chars long', [
        {text: 'Understood', onPress: () => console.log('alert closed')},
      ]);
    }
  }

  return (
    // <Sandbox />
    <TouchableWithoutFeedback onPress={() => {
        Keyboard.dismiss();
        console.log('dismissed keyboard')
    }}>
      <View style={styles.container}>
        { /*header*/}
        <Header></Header>
        <View style={styles.content}>
          {/* to form*/ }
          <AddTodo submitHandler={submitHandler}></AddTodo>
          <View style={styles.list}> 
            <FlatList 
              data={todos}
              renderItem={({ item }) =>(
                <TodoItem item={item} pressHandler={pressHandler}/>
              )}
            />
          </View>
        </View>
      </View>
    </TouchableWithoutFeedback>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  content:{
    flex:1,
    padding:40,
  },
  list: {
    flex:1,
    marginTop:20,

  }
});

 

 

 

리액트는 fontawesome없이 사용가능하겠구만. 너무좋네.

 

 

 

참고사이트

 

https://docs.expo.io/guides/icons/

Icons - Expo Documentation

https://icons.expo.fyi/