react-native : header bar(title + option button) example

Render

   render() {
      return (
        <View style={styles.container}>
          <View style={styles.header}>
            <Text style={styles.title}>
              {I18n.t('wcsqa')} // your title
            </Text>
            <TouchableOpacity onPress={() => {}}>
              <Image
                style={styles.option}
                source={require('./res/img/nav_icon.png')}
              />
            </TouchableOpacity>
          </View>
          <View style={styles.content}>
            <Text>
              {this.wcs[0].Q} // your content
            </Text>
          </View>
        </View>
      )
  }

Style

const styles = StyleSheet.create({
  container: {
    flex: 2,
  },
  header: {
    backgroundColor: '#00FF7F',
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold'
  },
  option: {
    width:32,
    height:32
  },
  content: {
    backgroundColor: '#F5DEB3',
    flex: 12
  }
});

No Image, No Truth

❤️ Support This Blog

---

If this post helped you, you can support my writing with a small donation. Thank you for reading.

---

Coffee ☕ Thanks 🙏 Extra Support ❤️