Algoroot's space

안녕하세요, 오늘은 리액트네이티브에서 navigation, route를 사용할 때 유용한 제네릭타입을 만든 과정을 소개해보고자 합니다. 제네릭 타입을 사용하여 다양한 내비게이션 관련 속성과 타입을 정의하는 방법에 대해 알아보겠습니다. 제네릭 타입은 TypeScript에서 매우 유용한 기능으로, 타입 안정성을 유지하면서 여러 유형의 값을 다룰 수 있습니다. 이를 활용하여 내비게이션 관련 코드를 더 유연하고 재사용 가능하게 만들 수 있습니다. 기존 사용법 기존에는 어떻게 사용하고 있었을까요? import React from 'react'; import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs'; import { CompositeNavi..

안녕하세요. 오늘은 최근 React native로 앱 개발을 하며 마주했던 이슈를 파헤쳤던 과정을 회고와 함께 말씀드리고자 합니다. 사실 정확히 말하면 이슈라고 할 수 없는 'IOS에서의 의도적인 행동'이었지만, 그냥 이슈라고 칭하겠습니다. 참고로 해당 이슈는 React-native단에서 해결할 수 있는 것이 아니라는 결론이 나서 결국에는 수동으로 이 과정을 구현하게 되었습니다. >> 수동으로 패스워드 타입 구현하기 하지만 이 과정에서 배운 점들이 많아 글을 쓰지 않을 수가 없었습니다...!! (누군가는 해결했을지도 모르겠네요.. 그렇다면 꼭 댓글을 남겨주세요.) Issue explained IOS에서 Input type ==='password' 일 때 값을 재 입력하게 되면 비밀번호 값이 유지되지 않습..

안녕하세요. 오늘은 React native로 공통/커스텀 헤더를 관리하기 위한 리팩토링 과정을 공유하고자 합니다. React Native Header App에서의 헤더는 빨간 테두리 영역입니다. (* 시간, 와이파이 배터리상태가 있는 최상단 부분 역시 헤더에 속하며, 이 부분을 StatusBar라고 합니다. ) Web에서 Router와 비슷한 역할을 하는 React-native Navigator/stack 에서는 screenOptions이라는 property를 제공하는데 이 property는 header를 커스텀할 수 있는 다양한 옵션들을 제공합니다. … headerBackImage : 헤더 왼쪽 부분을 그려주는 영역으로 뒤로 가기 액션이 포함되어 있습니다. headerRight: 헤더 우측에 해당하는 ..

안녕하세요. 오늘은 리엑트 네이티브에서 앱 디바이스 설정 창을 여는 방법에 대해 소개하겠습니다. 해당 기능은 유저가 어플리케이션의 알림 상태를 동의하지 않았을 경우 해당 애플리케이션 설정 창에서 알림을 허용하는 액션이 필요할 때와 같은 경우에 사용할 수 있습니다. 설정 후 다시 앱에 돌아왔을 때 동의 유무에 따른 분기처리 방법도 같이 말씀드리고자 합니다. 앱 설정 창 열기 앱 설정을 여는 것은 기본적으로 Linking에서 openSetting이라는 메서드를 제공합니다. import { Linking } from 'react-native'; Linking.openSettings(); 저 같은 경우는 유저가 알림설정을 했는지 안 했는지에 따라서 스크린 분기 처리가 필요했는데요. 설정을 한 후 다시 앱에 돌아..