How to create a linear gradient in react-native (on top of an image and under the app bar)

Question

I am working with expo SDK 36

I want to add on top of an image and under the app bar a linear gradient so it will always display the back button, as follow:

This is what I have tried with react-native-svg but it doesn't display anything:

        <Svg
          xmlns="http://www.w3.org/2000/svg"
          width="100%"
          height="56"
          viewBox="0 0 375 507"
          style={{ position: 'absolute', top: 0, height: 56 }}
        >
          <LinearGradient
            locations={[0, 1.0]}
            colors={['rgba(0,0,0,0.00)', 'rgba(0,0,0,0.80)']}
            style={{
              position: 'absolute',
              top: 0,
              width: '100%',
              height: 56,
            }}
          />
        </Svg>

I have also tried https://github.com/react-native-community/react-native-linear-gradient in many ways, but the best I could get was on the web and is a white non transparent line, I used it likes this:

class Swiper extends React.Component {
  render() {
    const {
      item: {
        photoList,
        id,
      },
      config,
      dimensions,
    } = this.props;

    const styles = StyleSheet.create({
      container: {
        height: 300,
        width: dimensions.width,
      },
      linearGradient: {
        top: 0,
        width: dimensions.width,
        height: 50,
      },
    });

    const { urls } = config.env();

    return (
      <View style={styles.container}>
        <LinearGradient colors={['#000', 'transparent']} style={styles.linearGradient}>
          <RNWSwiper
            from={0}
            minDistanceForAction={0.1}
          >
            {photoList.length > 0 && photoList.map(({ filename }) => (
              <View
                key={filename}
                style={{
                  flex: 1,
                  alignItems: 'center',
                  justifyContent: 'center',
                  backgroundColor: 'transparent',
                }}
              >
                <Image
                    style={{ minHeight: '100%', minWidth: '100%' }}
                    source={{ uri: `${urls.dataApi}/resources/${id}/lg/${filename}` }}
                  />
              </View>
            ))}
          </RNWSwiper>
        </LinearGradient>
      </View>
    );
  }
}

On the web it gives me the following error :

Uncaught (in promise) TypeError: Object(...) is not a function
    at Module.../../../react-native-linear-gradient/common.js (common.js:6)
    at __webpack_require__ (bootstrap:769)
    at fn (bootstrap:129)
    at Module.../../../react-native-linear-gradient/index.ios.js (index.android.js:37)
    at __webpack_require__ (bootstrap:769)
    at fn (bootstrap:129)
    at Module.../../../react-native-linear-gradient/index.js (index.ios.js:29)
    at __webpack_require__ (bootstrap:769)
    at fn (bootstrap:129)
    at Module.../../../../src/views/Swiper/index.js (DetailsView.js:117)
    at __webpack_require__ (bootstrap:769)
    at fn (bootstrap:129)
    at Module.../../../../src/views/DetailsView.js (index.js:1)
    at __webpack_require__ (bootstrap:769)
    at fn (bootstrap:129)

On android and ios (a different but same error):

My only requirement is that the gradient must work on ios/android and on the web.

How can I create that gradient ?

score 2 · Answer 1 · answered Apr 08 '20 at 08:06

The solution was to use https://docs.expo.io/versions/latest/sdk/linear-gradient/

import React from 'react';
import {
  Dimensions,
  StyleSheet,
  View,
} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';


export default function App() {
  const { width } = Dimensions.get('window');
  const styles = StyleSheet.create({
    fixedTop: {
      zIndex: 1,
      position: 'absolute',
      top: 0,
      width,
      height: 100,
    },
    linearGradient: {
      width,
      height: 75,
    },
  });

  return (
    <View style={styles.fixedTop} pointerEvents="none">
      <LinearGradient
        colors={[
          '#000',
          'transparent',
        ]}
        style={styles.linearGradient}
      />
    </View>
  );
}

score 0 · Answer 2 · answered Apr 08 '20 at 07:16

0

You can use react-native-linear-gradient

answered Apr 08 '20 at 07:16

Shehzad Osama

1,222
12
13

I am currently testing this module and don't see how I can achieve the desired result, do you have an example ? – Dimitri Kopriwa Apr 08 '20 at 07:19
Hi @DimitriKopriwa, it looks like the linking problem. Have you run `react-native link` after installing this npm package? – Shehzad Osama Apr 08 '20 at 09:44
I sorted it out with `expo-linear-gradient` which apparently take care of it. Thanks a lot for your answer – Dimitri Kopriwa Apr 08 '20 at 10:05

abhish · Answer 3 · 2021-09-04T14:56:25.263

Install "react-native-linear-gradient" for bare react-native. it works just fine. use start and end - x & y position to adjust your gradient. follow this blog for more detail

import React from 'react'
import LinearGradient from "react-native-linear-gradient";


return(
 <> 
  <LinearGradient
        colors={['red', 'orange']}
        style={styles.gradientContainer}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
        >
            <View>
                <Text>Hello world</Text>
            </View>


        </LinearGradient>
  
 </> )

How to create a linear gradient in react-native (on top of an image and under the app bar)

3 Answers3