CODEWITHSUNDEEP
javascriptreactjsreact-native
Abbas Hussain
Abbas Hussain

Reputation: 1395

How to gradient border in react native

Hello does anyone tell me how to add border gradient in react native i know that for linear gradient we use react-native-linear-gradient package but for border how can we achive that.

this is code that i try

<TouchableOpacity onPress={() => {console.warn('gradient')})}>
  <LinearGradient colors={['#000', '#fff']}>
    <View style={styles.circleGradient}>
      <Text style={styles.visit}>Gradient Border</Text>
    </View>
  </LinearGradient>
</TouchableOpacity>

Upvotes: 0

Views: 1212

Answers (1)

Dan Salomon
Dan Salomon

Reputation: 190

<TouchableOpacity onPress={() => {console.warn('gradient')})}>
  <LinearGradient colors={['rgba(255, 255, 255, 0.54)', '#fff']} locations={[0.7, 1]}>
    <View style={styles.circleGradient}>
      <Text style={styles.visit}>Gradient Border</Text>
    </View>
  </LinearGradient>
</TouchableOpacity>

You can play with this [0.7, 1] to set the gradient location

Upvotes: 1

Related Questions