[iOS] SearchBar and TabBar on same screen

[gezquinndesign]

I s it possible to have a SearchBar in a top NavigationBar and a TabBar in a bottom NavigationBar at the same time without the SearchBar being double height as detailed here? I've tried adding a hidden NavigationBar, as suggested, but the issue persists.

[grahammendick]

I added a search bar to the twitter sample and there's no double height in the video below. Maybe you mean the gap at the top when it's expaned? If you don't want that you shouldn't set largeTitle to true on the NavigationBar

Screen.Recording.2022-07-17.at.19.24.56.mov

This is the code you can paste into Home component if you want to test it out

import React, {useState} from 'react';
import {Platform, ScrollView} from 'react-native';
import {NavigationBar, CoordinatorLayout, SearchBar} from 'navigation-react-native';
import Tweets from './Tweets';
import {getHome} from './data';

export default ({tweets}) => {
  const [text, setText] = useState('');
  return (
    <ScrollView contentInsetAdjustmentBehavior="automatic">
      <NavigationBar largeTitle={true} title="Home" barTintColor={Platform.OS === 'android' ? '#fff' : 'rgb(247,247,247)'}>
          <SearchBar
            text={text}
            autoCapitalize="none"
            obscureBackground={false}
            onChangeText={text => setText(text)}>
            <ScrollView></ScrollView>
          </SearchBar>
      </NavigationBar>
      <Tweets tweets={getHome()} />
    </ScrollView>
  )
};

[gezquinndesign]

Thanks for the response @grahammendick. I just want a SearchBar rendered without a title or a largeTitle - when I try to do this, that's when I see the double height (ie where the title should go). I also want an always-visible logo in the same header is this possible? When I add a logo prop to the NavigationBar in the above example, nothing gets rendered.

[grahammendick]

That isn't how a navigation bar behaves on iOS. The aim of the Navigation router is to provide the same navigation primitives as you'd get if you were building a native app without react native.

If you want a custom navigation bar, with functionality not provided by underlying native iOS platform, then you'll have to write your own. You can either put your own search bar and logo inside a TitleBar component or hide the navigation bar completely and put your own search bar and logo in its place.

[gezquinndesign]

Awesome. That all makes sense. Thanks for the explanation, much appreciated.