Search box keeps shifting infinity to right when inside a view with the following styles

[ghost]

This is my view:

  <View style={styles.containerStyle}>
      <Text> Hello </Text>
      <Search
        placeholder={placeholder}
        backgroundColor="#f8fdff"
        borderColor="#ffffff"
      />
    </View>

with the following styles:

const styles = {
  containerStyle: {
    height: 40,
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center'
  }
};

What I want is for a text label to be next to the search box. However, the search box keeps shifting infinity to the right of the screen (at one point the place holder also disappears to the right). I am thinking it has something to do with flexDirection: row . However I do not understand this behavior. What is going wrong?

Also, how to I alight the placeholder (by default its aligning to the right for me?)

Thank you

[sujitpk-perennial]

I am also facing same issue.

[sujitpk-perennial]

@aelallam have you found any solution?

[ghost]

I didn't really come back to this, however, are you placing this view inside a parent view? The problem is due to the styling of the parent view. However if this is the only view you have (the one in my question) then it works okay.

[sujitpk-perennial]

@aelallam Yes I have added into another view. I think I need to look for another library.

[lichenglu]

@aelallam @sujitpk-perennial. I was having the same issue today. My workaround was to set a width for the searchBar's container, which the package did not expose. However, you could fork the repo and modify it yourself. Or you could use my fork, which exposes a prop containerStyle:

npm i -S git+https://github.com/lichenglu/react-native-search-box

[lacombar]

Digging in the code, the logic behind onLayout() is broken, killing that code seem to provide a fully working search box, without any kind of fallout.

[FRizzonelli]

@lacombar Can you send a PR?

[anhtuank7c]

I will fix within today Mr. Sir