Why is top: 0 for absolute component not working in react native?

I have a SearchBar component that I need to appear over the ScrollView component towards the top of the screen (under the header). Currently, it is not snapping to the top even though I have top: 0 set on it. Does anyone know how to achieve this?

Here is the render:

render() {
    const {isLoading, products} = this.props.products;

    if (isLoading) {
        return <Loader isVisible={true}/>;
    }

    return (<View style={styles.wrapper}>
        <Header/>
        <ScrollView style={styles.scrollView}>
            <ProductsContainer data={{productsList: { results: products }}}/>
        </ScrollView>
        <SearchBar style={styles.searchBar}/>
        <Footer/>
    </View>);
}

Open in new window


Here are the styles:

var styles = StyleSheet.create({
    wrapper: {
        flex: 1,
        backgroundColor: '#000',
        position: 'relative'
    },
    searchBar: {
        position: 'absolute',
        top: 0
    },
    scrollView: {
        position: 'relative'
    }
});

Open in new window

search-bar-zindex.png
Tanya LeithoffAsked:
Who is Participating?
 
Tanya LeithoffAuthor Commented:
The styles weren't getting passed down to the SearchBar component so I added this line to the View in the SearchBar.

<View style={[styles.searchBar, this.props.style]}>

Open in new window

0
 
Julian HansenCommented:
Have you set your margins to 0 on your container?
0
 
Tanya LeithoffAuthor Commented:
I don't know which container you are talking about so I added margin: 0 to all of them but it didn't make a difference:

var styles = StyleSheet.create({
    wrapper: {
        flex: 1,
        backgroundColor: '#000',
        position: 'relative',
        margin: 0
    },
    searchBar: {
        position: 'absolute',
        top: 0,
        margin: 0
    },
    scrollView: {
        position: 'relative',
        margin: 0
    }
});

Open in new window

0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
Julian HansenCommented:
if you add the following to your global styles
* {
  margin: 0;
}

Open in new window

0
 
Tanya LeithoffAuthor Commented:
I'm not sure.  Let me check in our app.
0
 
Tanya LeithoffAuthor Commented:
We don't have any global styles like that.  In order to add global styles in react-native don't you have to apply the styles to every view like this?

https://stackoverflow.com/questions/30853178/react-native-global-styles
0
 
Julian HansenCommented:
I am exploring all reasons why a gap appears at the top of the page.

I have looked at the image you posted again - where is the gap you are seeing - can you mark it on the image?
0
 
Tanya LeithoffAuthor Commented:
I removed the footer so that it could be easier to see.  And actually, after looking at it again now I'm not even sure that the absolute positioning is working at all, which would explain why the top: 0 style is not working.  Why would absolute positioning not work on my SearchBar in react-native?  The parent has a position of relative and so does it's sibling.  Am I missing something??
search-bar.png
0
 
Julian HansenCommented:
I am still not with you are you saying thisss158.jpg
0
 
Tanya LeithoffAuthor Commented:
Nevermind I was able to figure this out a different way.
0
 
Julian HansenCommented:
Great - as a matter of interest what was your solution?
0
 
Julian HansenCommented:
Ok - great - well done and thanks for sharing the answer. Are you sure you still want to delete though - why not accept your last post as the answer - it might help someone who has a similar problem.
0
 
Tanya LeithoffAuthor Commented:
I tried accepting my own answer but it won't let me.  I just end up with a grey overall all over the screen which does nothing.
0
 
Julian HansenCommented:
I accepted for you.
1
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.