how to add gradient color in border in expo react native ?

Posted August 19, 2020 952 views

i want to add gradient color to the border

   borderColor: "#550000",

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Submit an Answer
1 answer

Hi @omarkb222,

I’ll recommend going over the documentation on how to do those things. It’s quite easy to understand from there. Here is the relevant link :

Here is an example, you’ll need to use Stylesheets :

A StyleSheet is an abstraction similar to CSS StyleSheets
Creates a StyleSheet style reference from the given object:

import React from "react";
import { StyleSheet, Text, View } from "react-native";

const App = () => (
  <View style={styles.container}>
    <Text style={styles.title}>React Native</Text>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: "#eaeaea"
  title: {
    marginTop: 16,
    paddingVertical: 8,
    borderWidth: 4,
    borderColor: "#20232a",
    borderRadius: 6,
    backgroundColor: "#61dafb",
    color: "#20232a",
    textAlign: "center",
    fontSize: 30,
    fontWeight: "bold"

export default App;