React Linear Gradient Style

React Linear Gradient Style. For example for * background lineargradient(to right #000 0% #000 50% #fff 50% #fff 100%)* if you inspect it using inspect element you will find webkitgradient(linear left top right top from(#000) colorstop(50% #000) colorstop(50% #fff)) So just add this last line in the inline style of your react compenent.

PrerequisitesGetting StartedLinear GradientsVertical GradientsHorizontal GradientLocationsBonusConclusionTo follow along with this article you should have 1 A basic understanding of React Native 2 React Native set upon your development machine For this walkthrough we will use the React Native communityrecommended library for adding gradients into our application the reactnativelineargradient First we’ll set up our new React Native project Then run our app to display the React Native welcome screen on a device or simulator With our React Native app running we can now add reactnativelineargradient The set up for this varies depending on which React Native version you’re on I’ll be using v06+ if you’re working on an older version of reactnative check out the set up here To finish up the setup for iOS specifically install pods As always we’ll start off by importing the LinearGradientcomponent from the library This component takes in a few props which determine how the gradient will be displayed including colors where to start and where to end Let’s break down and understand the props first before we can start using them to build our fancy gradients 1 This is how we pass the colors we want to be displayed colors can be passed in a different format name rgba hex etc The colors should be ordered the way we want them to be displayed eg colors={[ “purple” “white” ]} the gradient will move from purple to white 2 This is used to indicate where the gradient will start by passing coordinates for the x and yaxis The coordinates are passed as a fraction of the whole view with values ranging from 0 – 1 The default is { x 05 y 0 } starting from the top center 3 This is similar to start but indicates where the gradient finishes off at It takes in coordinates just like start which as mentioned As mentioned earlier you can have your gradient in different orientations let’s try vertical gradient which is default one first The gradient starts from the top center going all the way down to bottom center Let’s try that out Clear everything on Appjsso we can start from the ground up Add the following then we’ll break it down Starting from the imports at the top we import React from react import a few components from reactnative and add the import for LinearGradient Then we add a View with styling to position everything at the center where we’ll add our gradient In the LinearGradient component we pass colors which is the required prop as mentioned earlier We are adding three colors so the gradient will move from red to yellow then green By default this will move from top center to bottom center Reload the app and we should be able to see our gradient Nice our gradient is showing as expected Now let’s play around a little bit with the gradient we currently h Now that we understand how to update our starting point on both the x and yaxis let’s combine that with the endproperty to create horizontal gradients As discussed earlier enddetermines where our gradient will end at So ideally for a horizontal gradient we’d want it to start left center and end at right center Let’s try that out As you can see the yaxis is maintained from start to end whereas the xaxis moves from 0 – 1 creating the following gradient We can further adjust this to create a diagonal gradient close to the horizontal alignment Updating start={{x0y0}} and end={{x1y1}}should create a gradient like this With most of the other props put into use we only have the location prop pending that we haven’t utilized yet Let’s change that Just a quick recap locations determines where a color will stop in the gradient and have to map up to the corresponding colorvalues Locations is mostly used when you want one or more colors to cover more space in the gradient view in comparison to the others The color with the larger range as indicated earlier will cover more space Let’s see that in action Feel free to play around with the colors change them add more adjust the values for start end and locationsand see how they behave In this section we are going to see a few use cases for LinearGradientscovered above We’ll create a few things here just to get you going 1 Fullscreen multicolour background 2 Button with gradient background 3 Button with gradient border For this let’s start fresh create a new file called Homejs and update indexjsto point to it as the root file Now our app should render the Home screen so we can make the updates there Then let’s jump onto the new Homejsfile and create a few things First the fullscreen multicolour background You can choose whether or not to have the start and endprops to create a vertical or diagonal background Then finally for our two buttons let’s jump back on Homejsjust below the home screen text and add the two buttons I’ve used horizontal backgrounds for both the first one (gradient background) tries to mimic the Instagram color scheme where as the other one created a border gradient effect This should give us a final output as seen below As always practice makes perfect so play around with the different props until you have a hang of it A word of caution when it comes to colors try not to overdo them having too many colors on your screen can adversely affect the user interface and experience Find the code for all the examples covered here on my GitHub.

How to Add a lineargradient Background in a React Component

Add a lineargradient Background in a React Component To add a lineargradient background in a React component we can put the lineargradient value in the style prop object For instance we write import React from “react” export default function App() { return ( hello world ) }.

How to add the lineargradient background style with React

To add the lineargradient background style with React and JavaScript we can set the style in the style prop to set the background property to lineargradient (190deg #fa7c30 30% rgba (0 0 0 0)30%) url ($ {somePic}) to set the background of the div to a gradient with an image.