0

How can I get this gradient effect inside a circular view in react native?

enter image description here

The two gradient colors are : #350078 and #00FFFF

Blundering Philosopher
  • 6,245
  • 2
  • 43
  • 59
HarshitG24
  • 1
  • 1
  • 2
  • You can use any CSS gradient generator and then translate the it to react style object using this tool: https://csstox.surge.sh/ Your gradient style could look like this: `{ "background": "radial-gradient(#350078, 00FFFF)" }` – Papooch Apr 04 '20 at 08:16
  • This might Help: https://stackoverflow.com/questions/53604241/react-native-radial-gradient-background – Pramod Apr 04 '20 at 10:56
  • @Pramod I tried that, link but I am getting boxes, not proper circle – HarshitG24 Apr 04 '20 at 11:58
  • @Papooch, thanks for the solution, I tried the method, but I am getting just one color, not both colors in gradient – HarshitG24 Apr 04 '20 at 12:03
  • @HarshitG24 Sorry, I forgot the # sign before the second color, does it also not work with it? – Papooch Apr 04 '20 at 17:20

1 Answers1

1

Use "react-native-radial-gradient" it worked for me

Screenshot of emulator

import RadialGradient from 'react-native-radial-gradient';

<View style={{ flex: 1, backgroundColor: 'white', justifyContent:'center', alignItems:'center' }}>

        <RadialGradient style={{width:200,height:200,  opacity:0.5}}
                        colors={['#350078','#00FFFF','transparent']}
                        stops={[0,0, 0.5]}
                        center={[100,100]}
                        radius={100}>

        </RadialGradient>


        </View>
Pramod
  • 1,835
  • 8
  • 14
  • thanks for the help, just that I had to make some minute changes to stops and inside stylesheet, backgroundColor: 'transparent', as i needed a transparent background. Thanks for the kind help!!! – HarshitG24 Apr 05 '20 at 09:18