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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
Julian HansenCommented:
if you add the following to your global styles
* {
  margin: 0;
}

Open in new window

0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
React

From novice to tech pro — start learning today.