https://velog.io/@minkyeong-ko/React-Native-%EC%9D%B8%EC%8A%A4%ED%83%80%EA%B7%B8%EB%9E%A8-%EA%B0%99%EC%9D%80-Like-%ED%9A%A8%EA%B3%BC-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-Double-tap-Animated [React Native] 인스타그램 같은 좋아요 효과 구현하기 (Double tap, Animated) 최근 개인 프로젝트에서 좋아요 기능이 필요했다. 그래서 인스타그램처럼 사진을 두번 클릭하거나 하트 아이콘을 누르면 하트가 떴다가 사라지는 효과를 구현했고, 이를 정리해보려 한다. 간단 velog.io * 할일 수정하기 할일목록은 탭을 한번만 하면 할일의 상태가 토글되..

* 페이지 확장을 위한 코드 리팩토링하기 import React, { useState, useEffect } from 'react' import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import Icon from 'react-native-vector-icons/MaterialIcons' import HomeScreen from './screens/HomeScreen'; imp..

https://iamthejiheee.tistory.com/246 Firebase Realtime, Cloud Firestore [의미, 공통점, 차이점, 앱 기능에 따라 데이터베이스 추천] 우선 Firebase에 대해 먼저 알아보자! Firebase란 구글이 소유하고 있는 모바일 애플리케이션 개발 플랫폼이다. 앱을 개발하고 개선할 수 있는 도구 모음을 제공한다. 사실 처음에 Firebase는 단순히 데 iamthejiheee.tistory.com https://rnfirebase.io/database/usage Realtime Database | React Native Firebase Copyright © 2017-2020 Invertase Limited. Except as otherwise noted..

https://firebase.google.com/?hl=ko Firebase | Google’s Mobile and Web App Development Platform Discover Firebase, Google’s mobile and web app development platform that helps developers build apps and games that users will love. firebase.google.com https://velog.io/@ddowoo/react-native-firebase-%EC%97%B0%EB%8F%99 react native firebase 연동 react native firebase 연동하기 velog.io https://velog.io/@chloe..

* 오늘 날짜 보여주기 import React from 'react' import { View, Text, StyleSheet } from 'react-native' function DateHeader({ date }){ const year = date.getFullYear() const month = date.getMonth() + 1 const day = date.getDate() return ( {`${year}년 ${month}월 ${day}일`} ) } const styles = StyleSheet.create({ container: { padding: 10, backgroundColor: '#a8c8ffff' }, dateText: { fontSize: 30, color: 'white' } }..

* 네비게이션 뼈대코드 작성하기 npm install @react-navigation/native 리액트에서 탭메뉴를 만들기 위하여 해당 라이브러리를 설치한다. npm install react-native-screens react-native-safe-area-context 리액트 네비게이션 라이브러리는 다른 라이브러리를 이용하여 개발되었기 때문에 관련된 라이브러리들도 설치해줘야 한다. 이를 의존성 라이브러리라고 한다. npm install @react-navigation/native-stack 리액트 네이티브의 스택 내비게이터는 새로운 화면으로 이동하면 스택처럼 위에 쌓고 (push), 다시 이전 화면으로 돌아가면 스택에서 최상단에 있는 화면을 제거하여 (pop) 화면을 이동시킨다. import { S..