React-navigation mobile google, naver 스타일 검색바

현재, 모바일 구글 및 네이버와 같은 검색창을 구현해야 하는 상황입니다.
크게 원하는 기획상 조건은 네이버와 구글의 기능과 유사합니다.

  1. 메인화면에서 중앙에 검색창이 있고, 포커스 시 화면 상단으로 올라가면서 최근검색어가 펼쳐지는 기능
  2. TabBar상단에도 검색창이 있고 포커스 시 하단으로 최근검색어가 펼쳐지는 기능
    입니다.
  3. 검색결과창에서도 검색창이 있고 포커스시 하단으로 최근검색어가 펼쳐지는 기능
  4. 검색창에서 검색시 검색결과창으로 이동

이 기능을 구현하려고 하는데 react-navigation v5와 함께 구현하려다 보니 어려움이 있어 질문드립니다.

메인화면에서 중앙에 검색창이 있고 포커스시 화면상단으로 올라가면서 최근검색어가 펼쳐지는 기능같은 경우에는


이 링크를 참고해서 구현할 수 있을 것 같은데

탭바에서의 검색창에서도 똑같은 기능이 구현되어야하고 최근검색어창이 나왔을 경우에는 기존의 TabBar부분이 안보여야 하는 기능을 구현해야하는데 어려움을 겪고 있습니다.

현재 프로젝트의 네비게이션 구조가 stackNavigation -> BottomTabNavigator -> TopTabNavigator 식으로 구현되어 있어 더 어려움이 있는 것 같습니다.

시도해본 방법으로는

  1. stackNavigator의 headerTitle에 주입하는방식
  • 최근검색어창이 tabBar위에서 렌더되어서 찌그러지는 현상으로 실패
  1. navigation modal mode 를 활용하는 방식
  • 최근검색어창을 다른 stack으로 만들고 header에 searchBar를 삽입한 후 focus가 될 경우 modal쪽으로 navigate시키는 방법
  • searchbar focus시 navigate(“Modal”) blur시 goBack을 통해 구현하려 했으나
  • mainStack에서의 headerSearchBar와 modal에서의 headerSearchBar가 각기 다른 컴포넌트로 새로 렌더되는 동작으로 인해서 modal을 닫아도, headerSearchBar에서의 focus는 계속해서 지속되고 있어서 계속해서 다시 Moda창을 뛰우는 현상으로 실패했습니다.

몇일째 여러가지 방법을 시도해보고 있는데, 모두 다 실패해서 혹시 동일하거나 유사한 기능을 구현해보신 분 있는지 질문드립니다.

[메인검색창 포커스 전]

[메인검색창 포커스 후]

[메인탭 포커스 전]

[메인탭 포커스 후]

위 댓글에 있는게 기획상에서 구현해야 하는 기능들입니다. 설명을 잘 못해서 죄송합니다ㅠㅠ

예제를 react-native-modal 로 감싸셔서, 네비게이션 밖에서 관리를 해보시면 어떨까요?
context 나 상태관리 라이브러리로 처리하면, 원하실때 어느 페이지에서든 가장 최상단에 열리도록 할 수 있을 것 같습니다.

검색창의 위치에 상관없이, 클릭하는 순간 최근검색어가 펼쳐져야 하는 부분은
애니메이션 값들 중, opacity 를 interpolation 말고 별도의 Animated.Value 로 나눠서 관리하면 될 것 같네요!

답변 감사합니다~!, 현재 searchBar부분을 TextInput처럼 보이는 TouchableOpacity로 만들어 navigate 이벤트를 걸어놓는 식으로 처리했습니다.
생각해보니 답변해주신 내용으로 처리하는게 깔끔할 것 같네요 답변 감사드립니다~!!