How To Make A Simple Hero Banner In React Native
Tags: reactnative
Published: 2019-08-05 15:00:34

---
title: How To Make A Simple Hero Banner In React Native
published: true
description: A short tutorial on how to make a React Native hero banner with a linear gradient layer
tags: #reactnative
---

Today I would like to write a short tutorial on how to make a React Native hero banner that has a linear gradient layer. 

## Step 1, Make a banner image using `FullWidthImage`
- Create a project using codesandbox's `react-native-web` template, remove the unused components

```js
import React, { Component } from "react";
import { Image, StyleSheet, View } from "react-native";

const logoUri =
  "https://imagesvc.timeincapp.com/v3/fan/image?url=https://raptorsrapture.com/wp-content/uploads/getty-images/2016/04/1094224730.jpeg&w=1600";

class App extends Component {
  render() {
    return (
      <View>
        <Image
          accessibilityLabel="React logo"
          source={{ uri: logoUri }}
          resizeMode="contain"
          style={styles.heroHeaderImage}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  heroHeaderImage: {
    height: 80
  }
});

export default App;
```

### The Problem
- we can only resize the image's width by controlling its height 

{% codesandbox rn-herobanner1-8j1py %}


### Solution

- Use `FullWidthImage` instead `Image`

`FullWidthImage` is a package that allows **a responsive Image element that takes the full width of its parent element while maintaining aspect ratio**.

It has a neat built-in feature called `automatic detection`, which **can automatically detect the aspect ratio of remote images, all you need to provide is the uri as you would do with the regular Image component.**

Which is what we are going to use.

Just like that, we have a hero banner.

{% codesandbox rn-herobanner2-nos19 %}


## Step 2, Add and Position HeroHeaderText 
- Wrap the `heroHeaderText` components with `heroHeaderContainer` in order to position both components simultaneously
- `heroContainer` will have `position: relative`, this will allow any children components that have a `position: absolute` to use `heroContainer` as a reference point, in this case, we are adding `position: absolute` to the `heroHeaderContainer`,  (note: even though we do not need to add `position: relative` to work, but if there are parent elements of 


{% codesandbox rn-herobanner3-ribij %}

## Step 3, Add Linear Gradient
- To make the `heroHeaderText` more visible, one common practice is to add a linear gradient to the background image, the React Native approach of adding the linear gradient is different than how you would on the web 
**we are using `react-native-web-linear-gradient` because we are using the `react-native-web` template on codesandbox, for `react-native` apps, please use [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient)**
- Use `position: absolute` and `zIndex` to position the linear gradient on top of the `Hero Banner` image

{% codesandbox rn-herobanner4-l36r0 %}



## Step 4, Add A heroSubheader 
- To add more "flare" to our awesome hero banner, we will add a hero subheader using the `Button` component from `react-native`



Finished, {% codesandbox rnherovanvleet-mcz62 %}