fullfish의 개발자 도전기

import React from 'react'; import {Modal, Pressable, StyleSheet, Text, View} from 'react-native'; import {colors, margin} from '~/constants'; const width = 200; interface IProps { isVisible: boolean; text: string; secondText?: string; onConfirm: () => void; onClose: () => void; } const Level1 = () => { return ( {/* 최종 승자로부터 뻗어내리는 세로 연결선 */} {/* 중간 연결선 */} {/* 팀1 */} 팀1 {/* 팀2 */} 팀2 ); }; const ..

// 자식 컴포넌트 import React, { useImperativeHandle, forwardRef } from 'react'; const ChildComponent = forwardRef((props, ref) => { useImperativeHandle(ref, () => ({ childFunction() { console.log('자식 컴포넌트의 함수 실행됨'); // 추가적인 로직 } })); return ( // 자식 컴포넌트의 JSX 자식 컴포넌트 ); }); export default ChildComponent; // 부모컴포넌트 import React, { useRef } from 'react'; import ChildComponent from './ChildComponent'; co..

{/* 모달의 콘텐츠 부분 */} true} style={styles.modalView}> // style modalOverlay: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0, 0, 0, 0.6)', // 반투명 배경 }, modalView: { position: 'absolute', justifyContent: 'center', alignItems: 'center', width: '80%', // 모달의 폭 height: 'auto', // 모달의 높이 backgroundColor: colors.mainContainerColor, padding: 20, borderRadius: 10, shadow..

화면 넘어갈때 0.1초정도 하얀화면이 뜨면서 넘어가는데 다크모드일경우 눈이 아프다 간단한건데 마땅히 검색해봐도 잘 안나와서 정리해둠

FlatList로 요소들을 나열할때 그냥 justifyContent: 'space-between'를 준다면 화면의 좌우끝은 안떨어져있지만 요소들이 서로 붙어있어서 margin을 주면 화면을 넘어가버린다 그래서 이쁘게 정렬하려면 화면 너비, margin값, numColumns를 가지고 계산해야한다 예시코드 index.toString() + 'memo'} numColumns={numColumns} scrollEnabled={false} renderItem={({item: memoData, index}) => { const isFirstColumn = index % numColumns === 0; const isLastColumn = (index + 1) % numColumns === 0; const widt..

1. 스타일 계산 함수 const greyPartItemStyle = ( isFirstColumn: boolean, isLastColumn: boolean, width: number, height: number, ) => ({ backgroundColor: '#282727', marginLeft: isFirstColumn ? 0 : marginLeftOrRight, marginRight: isLastColumn ? 0 : marginLeftOrRight, marginVertical: 5, width, height, borderRadius: 12, padding: 5, }); 2. 커스텀 훅 사용 const useDynamicStyle = (isFirstColumn, isLastColumn, width, ..

라이브러리 다운 react-native-sqlite-storage android/settions.gradle에 추가 include ':react-native-sqlite-storage' project(':react-native-sqlite-storage').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sqlite-storage/platforms/android') android/app/build.gradle에 추가 implementation project(':react-native-sqlite-storage') app/src/main/java/{package}/MainApplication.java에 추가 그런데 공식..

앞서 구글 로그인이 되어있다는 가정하에 공식문서 https://github.com/RobinBobin/react-native-google-drive-api-wrapper/blob/master/src/README.md 예제 https://github.com/RobinBobin/gdrivetest/blob/master/src/Files.tsx 라이브러리 다운 npm i @robinbobin/react-native-google-drive-api-wrapper 설정해줘야함 const gdrive = new GDrive(); gdrive.accessToken = accessToken; 백업 예시 await gdrive.files .newMultipartUploader() .setData(JSON.stringify..

23.12.01자 내용 라이브러리 설치 npm i react-native-firebase/auth npm i react-native-firebase/app npm i react-native-google-signin/google-signin SHA-1 인증서 가져오기 android 폴더에서 ./gradlew signingReport Firebase 설정 프로젝트 생성 후 빌드 -> Authentication -> Sign-in method에서 구글 로그인 활성화 후 SHA-1키를 집어넣음 google-services.json을 다운받고 (SHA-1키를 집어넣으면 새로 받아야함) android > app에 집어넣음 구글 클라우드 콘솔 -> 대시보드 -> 사용자 인증 정보 -> 사용자 인증 정보 만들기 -> ..

app.json에 "plugins": [ [ "expo-build-properties", { "android": { "compileSdkVersion": 33, // 안드로이드 버전 13이상으로 맞춰줘야함 시스템버전 33이 안드로이드 13임 "targetSdkVersion": 33, "minSdkVersion": 33, "buildToolsVersion": "31.0.0" }, "ios": { "deploymentTarget": "13.0" } } ] ] 추가 해줘야함 scheme(패키지 네임과 같아야함)과 slug(expo이름과 같아야함)도 잊지 말고 추가 해줘야함 app.json 예시 { "expo": { "scheme": "koback-coach", "name": "코백 코치", "icon": "...