CODEWITHSUNDEEP
reactjsreact-native
longsangstan
longsangstan

Reputation: 233

How to fade the edge of a View in react native?

Example 1

Example 2

How to fade the edge of a View like the above images in react native?

Upvotes: 21

Views: 27798

Answers (5)

Sanka Sanjeeva
Sanka Sanjeeva

Reputation: 3520

I created a small example using @react-native-community/masked-view and react-native-linear-gradient

Think it will help for someone :)

import React from 'react';
import { ImageBackground, ScrollView, Text } from 'react-native';
import MaskedView from '@react-native-community/masked-view';
import LinearGradient from 'react-native-linear-gradient';

export default class App extends React.Component {
  render() {
    return (
      <ImageBackground
        style={{ flex: 1, alignItems: 'center' }}
        resizeMode="cover"
        source={{ uri: 'https://wallpaperaccess.com/full/1567831.jpg' }}
      >
        <MaskedView
          style={{ flex: 1 }}
          maskElement={<LinearGradient style={{ flex: 1 }} colors={['white', 'transparent']} />}
        >
          <ScrollView>
            {
              Array(100).fill(null).map((x, i) => <Text key={i}>{i}</Text>)
            }
          </ScrollView>
        </MaskedView>
      </ImageBackground>
    );
  }
}

Upvotes: 2

Ryker
Ryker

Reputation: 566

I know this post is old but for anyone looking at this now, you can set a fadingEdgeLength on your ScrollView like this to achieve that effect. Note that it only works for Android though. For example:

<ScrollView fadingEdgeLength={100}>
  ... scroll view content ...
</ScrollView>

Upvotes: 16

Jiradeto
Jiradeto

Reputation: 27

You can use: https://github.com/react-native-community/react-native-masked-view.

It supports both Android and iOS.

import React from 'react';
import { Text, View } from 'react-native';
import MaskedView from '@react-native-community/masked-view';

export default class App extends React.Component {
  render() {
    return (
      <MaskedView
        style={{ flex: 1, flexDirection: 'row', height: '100%' }}
        maskElement={
          <View
            style={{
              // Transparent background because mask is based off alpha channel.
              backgroundColor: 'transparent',
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center'
            }}
          >
            <Text
              style={{
                fontSize: 60,
                color: 'black',
                fontWeight: 'bold'
              }}
            >
              Basic Mask
            </Text>
          </View>
        }
      >
        {/* Shows behind the mask, you can put anything here, such as an image */}
        <View style={{ flex: 1, height: '100%', backgroundColor: '#324376' }} />
        <View style={{ flex: 1, height: '100%', backgroundColor: '#F5DD90' }} />
        <View style={{ flex: 1, height: '100%', backgroundColor: '#F76C5E' }} />
        <View style={{ flex: 1, height: '100%', backgroundColor: '#e1e1e1' }} />
      </MaskedView>
    );
  }
}

Upvotes: -1

jevakallio
jevakallio

Reputation: 35890

On iOS, you can use the MaskedViewIOS component to create an transparent alpha mask for the fading effect.

For the fading gradient itself, you can either use something like react-native-linear-gradient (which is also built into Expo) or a semi-transparent image (black pixels will show content through, transparent pixels will block masked content).

<MaskedViewIOS 
  maskElement={
    <LinearGradient colors={['black', 'transparent']} />
  }
>
  <YourContent />
</MaskedViewIOS>

Here is an example on Snack.

Unfortunately, MaskedView is not yet implemented on Android. I'm not aware of a simple way of implementing this, but would be happy to be proven wrong.

Upvotes: 19

clarkatron
clarkatron

Reputation: 539

You can wrap your view in something like 

<BackgroundContainer>
  <LinearGradient>
    <UserList>
  </LinearGradient>
</BackgroundContainer>

from https://github.com/react-native-community/react-native-linear-gradient

then use alpha channels (rgba()) to get the transparency effect you're looking for.

Upvotes: 3

Related Questions