import React from 'react' import { View, FlatList, StyleSheet, Dimensions } from 'react-native' import DropdownItem from './DropdownItem' function DropdownList({ categories, selectCategory, top, left, rate = 1 }){ return ( { // 터치 시작점 설정 : 캡쳐링 방지 (추가) console.log('여기를 지나침') e.stopPropagation() // 터치 버블링 방지 }} > item} renderItem={({item}) => ( selectCategory(item, e)}/> // 아이템 각각의 뷰 화면 : 카테고리 선택시..

const styles = StyleSheet.create({ container: { padding: 10, backgroundColor: '#a8c8ffff', zIndex: 1, elevation: 1 }, dateText: { fontSize: 30, color: 'white' } }) components > DateHeader.js 파일을 위와 같이 수정한다. zIndex, elevation 값을 높게 설정하여 화면 레이어에서 좀 더 앞쪽에 표시되도록 한다.

* 로그인한 사용자의 할일목록만 조회하기 import React, { useEffect } from 'react' import { View, Button, StyleSheet, Alert } from 'react-native' import { GoogleSignin, GoogleSigninButton, statusCodes } from '@react-native-google-signin/google-signin' function LoginButton({navigation}){ const googleSigninConfigure = () => { GoogleSignin.configure({ webClientId: '137262950194-gcouccatiffjp4ei8aqfi05uruv5j4dl.apps.g..

* 미래 날짜의 투두가 오늘날짜에 추가되는 로직오류 수정하기 홈화면에서 미래날짜에 투두를 추가하면 오늘날짜에 저장된다. 이를 해당하는 미래날짜에 추가하기 위하여 로직을 수정해보자! export const getTodosToday = (date, todos) => { const today = getToday(date) // 시간제외 const tomorrow = getTomorrow(getToday(date)) const todosToday = todos.filter(todo => todo.createdAt?.toDate() >= today && todo.createdAt?.toDate() time.js 파일에 아래 함..

* 할일목록이 비어있는 경우 키보드가 보여질때 이미지가 밀려올라가는 문제 해결하기 import React from 'react' import { View, Text, Image, StyleSheet, KeyboardAvoidingView, Dimensions } from 'react-native' function Default(){ return ( 현재 할일목록이 비어있습니다. ) } const styles = StyleSheet.create({ container: { position: 'absolute', left: 0, top: 0, justifyContent: 'center', alignItems: 'center', width: Dimensions.get('window').width, height:..

* 소셜로그인 에러 리팩토링하기 로그아웃후 앱을 종료했다가 다시 키면 랜딩페이지가 보여야 하는데 홈화면으로 곧바로 이동한다. 이는 로그인 여부를 체크하는 부분에서 결과(result)가 의미없는 객체 {_h, 0, _i, _j: null, _k} 를 반환하기 때문이다. 아래와 같이 결과를 받은 다음에 콜백함수(then)에서 사용자 정보를 조회하면 사용자 토큰(token)이 출력되고 제대로 로그인 여부를 판별할 수 있다. const getUserInfo = async () => await GoogleSignin.getCurrentUser() useEffect(() => { const result = getUserInfo() // if(user){ // navigation.navigate('App') // }..

* 특정날짜의 할일목록만 추출하는 기능을 함수로 정의하기 export const getTodosToday = (date, todos) => { const today = getToday(date) // 시간제외 const tomorrow = getTomorrow(getToday(date)) const todosToday = todos.filter(todo => todo.createdAt?.toDate() >= today && todo.createdAt?.toDate() time.js 파일에 해당 코드를 추가한다. import React, { useState, useEffect, useRef } from 'react' /..

* 로그인 로직의 현재 문제점과 고려할 부분 안드로이드의 로컬 스토리지(AsyncStorage)는 사용하지 않는다. => 이유는 사용자가 로그인후 앱을 껐다 키면 로그인이 되어 있는 상태이나 로컬 스토리지에 저장된 사용자 정보는 사라지기 때문에 로그인이 되어있더라도 사용자 정보가 없는 문제가 발생한다. {!isLoggedIn && } stackRouter 컴포넌트에서 해당 부분이 문제가 된다. 사용자가 로그인하기 전에는 isLoggedIn 상태가 false 이므로 로딩시 랜딩페이지도 함께 로딩된다. 하지만 사용자가 앱을 종료하고 다시 시작하면 isLoggedIn 은 true 가 되기 때문에 로딩시 랜딩페이지는 로딩되지 않는다. 이렇게 되면 사용자가 로그인후 곧바로 로그아웃을 할때는 랜딩페이지가 메모리에 ..

https://dwbyun.tistory.com/7 [React Native] 0.70버전 custom font 적용하기 (react-native-cli) 이번 글에서는 react native 현재 최신 버전인 0.70.1 버전에서 custom font 적용하는 방법을 포스팅하려고 합니다. 우선 프로젝트를 생성하고 App.js 파일을 수정합니다. npx react-native init AwesomeProject import dwbyun.tistory.com https://fonts.google.com/specimen/Nanum+Pen+Script?subset=korean&noto.script=Kore Nanum Pen Script - Google Fonts Nanum Pen Script is a cont..

https://github.com/react-native-google-signin/google-signin GitHub - react-native-google-signin/google-signin: Google Sign-in for your React Native applications Google Sign-in for your React Native applications. Contribute to react-native-google-signin/google-signin development by creating an account on GitHub. github.com * SettingsScreen 컴포넌트에 구현된 소셜로그인 기능을 LoginButton 컴포넌트로 옮기기 npm install @re..