TouchableBroken.js

'use strict';

import React, {
  StyleSheet,
  TouchableOpacity,
  PixelRatio,
  View
} from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome';

class TopNavigation {
  render() {
    return (
      <TouchableOpacity onPress={this.props.onPress} style={styles.wrapper}>
        <View style={styles.thinBurger}>
          <View style={styles.bar} />
          <View style={styles.bar} />
          <View style={styles.bar} />
        </View>
      </TouchableOpacity>
    )
  }
}

var styles = StyleSheet.create({
  wrapper: {
    position: 'absolute',
    top: 0,
    left: 0
  },
  thinBurger: {
    position: 'absolute',
    justifyContent: 'space-around',
    padding: 15,
    height: 50,
  },
  bar: {
    width: 20,
    opacity: .5,
    borderTopWidth: 3 / PixelRatio.get()
  }
});


export default TopNavigation;

TouchableFixed.js

'use strict';

import React, {
  StyleSheet,
  TouchableOpacity,
  PixelRatio,
  View
} from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome';

class TopNavigation {
  render() {
    return (
      <TouchableOpacity onPress={this.props.onPress} style={styles.wrapper}>
        <View style={styles.thinBurger}>
          <View style={styles.bar} />
          <View style={styles.bar} />
          <View style={styles.bar} />
        </View>
      </TouchableOpacity>
    )
  }
}

var styles = StyleSheet.create({
  wrapper: {
    position: 'absolute',
    top: 0,
    left: 0
  },
  thinBurger: {
    justifyContent: 'space-around',
    padding: 15,
    height: 50,
  },
  bar: {
    width: 20,
    opacity: .5,
    borderTopWidth: 3 / PixelRatio.get()
  }
});


export default TopNavigation;