Skip to content

Instantly share code, notes, and snippets.

@rturk
Created May 30, 2016 00:38
Show Gist options
  • Save rturk/a52321593dd9264ddd2ccbd43eb489b7 to your computer and use it in GitHub Desktop.
Save rturk/a52321593dd9264ddd2ccbd43eb489b7 to your computer and use it in GitHub Desktop.
RNRF custom navbar with pop
'use strict';
import React, {Component} from "react";
import {StyleSheet, Text, View} from "react-native";
import Icon from 'react-native-vector-icons/FontAwesome';
import { Actions } from 'react-native-router-flux';
export default class ToolBar extends Component {
static contextTypes = {
drawer: React.PropTypes.object
};
render() {
const { back, drawer } = this.props;
const btnSideMenu = (back == "sideMenu" || (typeof back == 'undefined')) ?
<Icon.Button name="bars" size={22}
color={'white'}
iconStyle={styles.icon}
backgroundColor={color1}
onPress={ this.context.drawer.toggle }/> : null;
const btnBack = (back == "pop") ?
<Icon.Button name="chevron-left"
size={22}
color={'white'}
iconStyle={styles.icon}
backgroundColor={color2}
onPress={ ()=> Actions.pop() } /> : null;
return (
<View style={styles.toolBar}>
{btnSideMenu}{btnBack}
<Text style={[Globals.styles.text,styles.tabText]}>{this.props.title}</Text>
<Icon.Button name="search"
size={22}
color={'white'}
iconStyle={styles.icon}
backgroundColor={Globals.brandlovers.color}
onPress={()=>Actions.search()} />
</View>
);
}
}
const styles = StyleSheet.create({
toolBar: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingTop: 16,
paddingLeft: 8,
paddingRight: 8,
paddingBottom: 3,
backgroundColor: 'green',
},
icon: {
marginRight: 0,
padding: 0,
},
tabText: {
marginTop: 8,
color: 'white',
fontSize: 20,
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment