How can i use NavigationBar shoutemui

Question

I'm trying to use NavigationBar from the Shoutem UI toolkit.

My code:

<Screen>
    <NavigationBar centerComponent={<Title>TITLE</Title>}/>

    <ListView
        data={groupedData}
        renderRow={this.renderRow}
        loading ={this.state.loading}
        onRefresh={this.getAllNewsfeed.bind(this)}
        onLoadMore ={this.loadMoreData.bind(this)}
        loadMoreSpinner={<Spinner/>} />

    <Button onPress={this.onLogout.bind(this)}>
        <Text>
            LOGOUT
        </Text>
    </Button>
</Screen>

But NavigationBar always hidden, listview above NavigationBar. But when I try replace it to Title. It still work. But I don't want use Title because I want add button back or something else same that.

score 0 · Accepted Answer · answered Apr 11 '17 at 13:46

This PR solves it https://github.com/shoutem/ui/pull/104/files but somehow we have removed it from the theme. We are going to fix that in next release but until then you can help yourself by this:

<Screen>
  <NavigationBar
    style={{
      container: {
        position: 'relative',
        width: Dimensions.get('window').width,
      }
    }}
    centerComponent={<Title>TITLE</Title>}
  />
  <ListView
    data={groupedData}
    renderRow={this.renderRow}
    loading ={this.state.loading}
    onRefresh={this.getAllNewsfeed.bind(this)}
    onLoadMore ={this.loadMoreData.bind(this)}
    loadMoreSpinner={<Spinner/>}
  />

  <Button onPress={this.onLogout.bind(this)}>
    <Text>
        LOGOUT
    </Text>
  </Button>
</Screen>

After release you will just have to change style prop to:

<NavigationBar
  styleName="inline"
  centerComponent={<Title>TITLE</Title>}
/>

Thank you for using our Toolkit. – Ivan Vukovic Apr 14 '17 at 07:52 — Ivan Vukovic, Apr 14 '17 at 07:52

How can i use NavigationBar shoutemui

1 Answers1