Search Bar not appearing

[breezykermo]

The search bar component appears to be rendered in the DOM, but I can't see anything. Here's my code.

import React from 'react'
import {
  View,
  Text,
} from 'react-native'
import SearchBar from 'react-native-search-bar'
import styles from './Topbar.styles'

class Topbar extends React.Component {
  componentDidMount() {
    this.refs.searchBar.focus()
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Topbar</Text>
        <SearchBar
          ref="searchBar"
          placeholder="Search..."
        />
      </View>
    )
  }
}
export default Topbar

I double checked that I linked the dependencies, tried deleting and re-adding the project. Any ideas?

[michaelhelvey]

What are your styles? I had this problem when trying to put the search bar into a Navigator.NavigationBar, and to fix it, I just had to set the search bar's position to absolute (and set appropriate top and padding values).

[breezykermo]

Hmm yeah it seems that when I explicitly style the search bar with a width and a height, it appears--it's just the default that's invisible.

import React from 'react'
import {
  View,
  Text,
} from 'react-native'
import SearchBar from 'react-native-search-bar'
import styles from './Topbar.styles'

class Topbar extends React.Component {
  componentDidMount() {
    this.refs.searchBar.focus()
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Topbar</Text>
        <SearchBar
          style={{ height: 30, width: 330 }}
          ref="searchBar"
          placeholder="Search..."
        />
      </View>
    )
  }
}
export default Topbar

[michaelhelvey]

It's actually interesting to me that the code above has an effect. I was talking about setting the position of the SearchBar's container (such as, for instance, the View), since the SearchBar itself doesn't actually read any style props -- it's just a wrapper over the native UISearchBar which doesn't really have any easily customizable height or width properties.

[breezykermo]

Oh hmm. Giving the search bar the following styles, { position: 'absolute', top: 10, left: 10 } doesn't cause it to show up either.

The styles are definitely getting through to the component:

The component just won't display until I explicitly style.

[michaelhelvey]

React passes along whatever props you give a component, whether the component can render it or not. I was talking about wrapping the SearchBar in a parent View, and setting the position of that. For example, from an app I'm working on now:

<View style={searchStyles.searchContainer}>
  <SearchBar
    ref="searchBar"
    placeholder="Search"
    hideBackground={true}
    textFieldBackgroundColor={"#f1f1f1"}
    tintColor={AMColors.defaultGreen}
    showsCancelButton={this.state.showsCancelButton}
    onFocus={() => {
      this.setState({ showsCancelButton: true });
    }}
    onCancelButtonPress={() => {
      this.setState({ showsCancelButton: false });
      this.refs.searchBar.unFocus();
    }}
    onSearchButtonPress={() => {
      this.setState({ showsCancelButton: false });
      this.refs.searchBar.unFocus();
    }}
  />
</View>

const searchStyles = StyleSheet.create({
  searchContainer: {
    position: 'absolute',
    top: 0,
    paddingTop: 20,
    width: Dimensions.get('window').width,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#bbb',
    backgroundColor: 'white',
  },
});

I'm glad that setting the style on the SearchBar is working for you, it just kind of gets me interested in why that would work, since I would think that the only way it would work would be to modify the underlying CGRect properties of the UITextField, which this library doesn't do, at least explicitly. Perhaps there are some hidden depths to the RN layout engine at work here.

[breezykermo]

Yeah, interesting. Is RN possibly doing the equivalent to your wrapper above? When I import Searchbar from 'react-native-search-bar, it seems that RN creates a wrapper component around the imported component, and passes down the props to the imported component (see picture of debugger above).

A theory would be that the style object I'm applying is operating first on that wrapper view, doing something equivalent to your code above, and then (needlessly) passing that style object down to the nested component.

[michaelhelvey]

Aha. Figured it out, I think. RN creates a category on UIView, which set a bunch of default CALayer properties, etc., based on the flexbox layout engine. It's in the source code here and here. If you're familiar with Objective C categories at all, they basically "magically" insert their styles and methods into every other instance and subclass of that class in the application. And since UISearchBar is an instance of UIView...huh. Well, I dunno if that helps with your actual question, but I guess we learned something about RN there, haha. 😀

[iRoachie]

Hey new maintainer here. Closing out all* issues from before 2017. If this is still a concern, please create a new issue. Thanks