jineecode

timer를 구현하기 위해서는 useRef를 써야 한다. useState만으로는 closure 안의 값까지 업데이트 해줄 수 없기 때문이다. https://ko.reactjs.org/docs/hooks-reference.html#useref 조건: 1. 5분 이내에 인증번호 6자리 입력 const VALIDTIME = 300; const time = useRef(VALIDTIME); // 이제 time.current 로 시간이 흘러가는 것을 추적할 수 있다. let intervalRef: {current: NodeJS.Timeout | null} = useRef(null); const [min, setMin] = useState(5); const [sec, setSec] = useState(0); 2. ..

1. yarn add react-native-svg yarn add --dev react-native-svg-transformer 2. root에 metro.config.js 파일에 다음과 같이 작성 const {getDefaultConfig} = require('metro-config'); module.exports = (async () => { const { resolver: {sourceExts, assetExts}, } = await getDefaultConfig(); return { transformer: { babelTransformerPath: require.resolve('react-native-svg-transformer'), }, resolver: { assetExts: assetExt..

https://github.com/k-tomoyasu/react-native-oss-license GitHub - k-tomoyasu/react-native-oss-license: license list generator for React Native App(iOS & Android) license list generator for React Native App(iOS & Android) - GitHub - k-tomoyasu/react-native-oss-license: license list generator for React Native App(iOS & Android) github.com npm i -g react-native-oss-license 플랫폼에 따라 다양한 방법이 있겠지만, 나는 js..

https://reactnative.dev/docs/signed-apk-android Publishing to Google Play Store · React Native Android requires that all apps be digitally signed with a certificate before they can be installed. In order to distribute your Android application via Google Play store it needs to be signed with a release key that then needs to be used for all future upd reactnative.dev 위 문서랑 조금 다른 부분이 있습니다. 0. 들어가기 ..

react-native 자체에서 제공하는 toast가 있지만 안드로이드에 국한되어있고 커스텀하기 어렵기 때문에 직접 만들거나 라이브러리를 쓰는 경우가 많다. 많은 토스트 라이브러리가 있겠지만, react-native-toast-message 가 제일 안정적인 것 같았다. 언뜻 보기에 예쁘장한 토스트가 띄워져서 원하는 모양이 안 나올 줄 알았는데 커스텀 기능까지 제공한다. https://github.com/calintamas/react-native-toast-message GitHub - calintamas/react-native-toast-message: Animated toast message component for React Native Animated toast message component f..

React navigation에서 모달 개발하기! 다음과 같은 경우에 사용합니다. - 여러 개의 Screen에서 X를 눌렀을 때, ~중지하시겠나요? 등 공통 알럿 모달을 띄워줄 때. - Bottom tab을 눌렀을 때, 페이지 이동을 막고 현재는 이용할 수 없습니다 등의 알럿 모달을 띄워줄 때. 기본적인 원리는, Modal을 가진 Screen을 하나의 Screen으로 보되, 현재 페이지에서 이동을 막아주고 Screen만 띄워주는 방식입니다. 1. 여러 개의 Screen에서 X를 눌렀을 때, ~중지하시겠나요? 등 공통 알럿 모달을 띄워줄 때 X 버튼에 onPress callback 함수 호출. const SignUpHeaderRight = () => { const navigation = useNavigat..

https://jineecode.tistory.com/260 React navigation (1) 1. NavigationContainer import {NavigationContainer} from '@react-navigation/native'; navigation tree를 관리하고 navigation state를 포함하는 구성 요소. 이 구성 요소는 모든 네비게이터 구조를 랩핑해야.. jineecode.tistory.com 먼저, 내비게이션은 기본적으로 '스택'으로 쌓이기 때문에, 본인이 개발하고자하는 앱의 내비게이션의 흐름을 잘 파악해야 손이 덜 간다. 스택을 제대로 구분하여 나누지 않는다면 부자연스러운 흐름을 직면할 수밖에 없다. 앱의 정책마다 스택의 흐름이 다르고 아래보다 더 좋은 방법이 있..

1. NavigationContainer import {NavigationContainer} from '@react-navigation/native'; navigation tree를 관리하고 navigation state를 포함하는 구성 요소. 이 구성 요소는 모든 네비게이터 구조를 랩핑해야하며, 즉, Root에 있어야한다. 때문에 일반적으로 App.tsx 에 랩핑한다. 2. createStackNavigator import {createStackNavigator} from '@react-navigation/stack'; const Stack = createStackNavigator(); Screen 및 Navigator라는 두 가지 속성이 포함 된 객체를 반환하는 함수. S..