0

When I use the Shoutem UI NavigationBar the content after is on top of the navigationbar. How can I move it down?

ykay says Reinstate Monica
  • 4,634
  • 4
  • 32
  • 42

2 Answers2

0

Currently this pattern seems to be the best option

<Screen
                style={{ paddingTop: 70 }}
            >
                <NavigationBar
                    centerComponent={<Title>Title</Title>}
                />
                <Title>Content now below NavigationBar</Title>
            </Screen>
ykay says Reinstate Monica
  • 4,634
  • 4
  • 32
  • 42
0

Using the inline styleName will resolve this issue as described in the docs.

From the docs:

  • inline: forces relative positioning of NavigationBar component, allowing component to be used inline with other components, i.e. ListView, without its content overlapping NavigationBar

Example:

<NavigationBar
  styleName="inline"
  title="My Title"
/>

<Button>
  <Text>My text.</Text>
</Button>
Vladimir Vdović
  • 281
  • 3
  • 9
  • Hi, inline doesn't work properly when rotating the device as documented in open issue https://github.com/shoutem/ui/issues/247, i added the question and answer to stackoverflow as i wanted to help people avoid frustration – ykay says Reinstate Monica Feb 20 '18 at 12:54