React Native Expo components overlapping

Question

I just started with React Native, and I made my first two components,namely an AppBar and a ProductCard. I stacked them in App.js just like in React, but the components are overlapping on each other.. I tried using flexDirection: 'column' but no luck still.. Is there any position I can change inorder to get these in a stack? Also, I'm using shoutem UI..

Code for AppBar.js and ProductCard.js :

render() {
    return (
      <NavigationBar
        centerComponent={<Title>BHAAW</Title>}
        style={{
          container: {
            backgroundColor: "#42f445"
          }}}
      />
    )}


       render()
        return(
         <Card>
          <View styleName="content">
            <View styleName="horizontal v-center space-between">
            </View>
          </View>
        </Card>

App.js:

return (
      <View style={{ marginTop: StatusBar.currentHeight}}>
        <AppBar />
        <ProductCard />
      </View>
    );