React Native Router Flux - rightButtonIconStyle

Question

My rightIconImage is centered in the container in the navbar. I'd like it to be flush with the righthand side. (See image)

I've tried adding the prop rightButtonIconStyle={{ justifyContent: 'flex-end' }} to the scene however this has no effect. I couldn't find anywhere in the API about how to change the rightButtonIconStyle without directly hardcoding it in.

hitendra Savkare · Accepted Answer · 2017-09-23T10:50:25.420

Its more Better if your Write Separate code into separate file for this to avoid confusion in future just create another file like bellow

  import React, {Component} from 'react';
import {Text, View,Image,TouchableOpacity} from 'react-native';
const theme = require('../theme/index.js');
import {Actions} from 'react-native-router-flux';
const iconFilter=require('../assets/Images/filter.png')
const iconLocation=require('../assets/Images/location.png')
class HeaderMenuResultListView extends Component{
  _gotoAdvanceFilterPage(){
    Actions.AdvanceFilterMapList();
  }
  _gotoMapSearchView(){
    Actions.MapSearchView()
  }
  render(){
    return(
      <View style={styles.container}>

        <View>
          <TouchableOpacity onPress={()=>{this._gotoAdvanceFilterPage()}}>
            <Image source={iconFilter} style={styles.iconFilter}/>
          </TouchableOpacity>
        </View>
        <Text style={styles.circleAboveFilter}></Text>
        <TouchableOpacity onPress={()=>{this._gotoMapSearchView()}}>
          <Image source={iconLocation} style={styles.iconMap}/>
        </TouchableOpacity>
      </View>
    )
  }
}
const styles = {
  container: {
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'center'

  },
  iconMap:{
    height:24,
    width:24,
    marginRight:16,

  },
  iconFilter:{
    height:24,
    width:24,

  },
  circleAboveFilter:{
    width: 10,
    height: 10,
    borderRadius: 44/2,
    backgroundColor:theme.purplyPink,
    alignItems:'flex-end',marginBottom:20,
    marginRight:16,

  }
}
export default HeaderMenuResultListView;

import above file to your route file and Call it to your Scene

  <Scene key="Home"
                  renderRightButton={<HeaderMenuResultListView/>}
                  component={Home} title="Results" panHandlers={null}/>

React Native Router Flux - rightButtonIconStyle

1 Answers1