catalinmiron / React Native Css Gradient
React Native css gradients - react-native-linear-gradient with css gradient support
Stars: ✭ 129
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Css Gradient
tasit-apps
Native mobile Ethereum dapps for mainstream users
Stars: ✭ 35 (-72.87%)
Mutual labels: native, expo
Expo-Super-Mario-World
Native Super Mario World in Expo
Stars: ✭ 24 (-81.4%)
Mutual labels: native, expo
Expo
An open-source platform for making universal native apps with React. Expo runs on Android, iOS, and the web.
Stars: ✭ 15,550 (+11954.26%)
Mutual labels: expo, native
Expo Voxel
🎮🌳 Voxel Terrain made in React Native. ∛
Stars: ✭ 169 (+31.01%)
Mutual labels: expo, native
smovie-expo
[New] New version with more examples: https://github.com/theo-mesnil/WhatToWatch [Old version] Smovie is the simplest and fastest way to discover movies, series and actors. With React Native, Expo and themoviedb 🎥
Stars: ✭ 19 (-85.27%)
Mutual labels: native, expo
app-monorepo
Secure, open source and community driven crypto wallet runs on all platforms and trusted by millions.
Stars: ✭ 1,282 (+893.8%)
Mutual labels: native, expo
Firebase Instagram
📸 Instagram clone with Firebase Cloud Firestore, Expo, and React Native 😁😍
Stars: ✭ 389 (+201.55%)
Mutual labels: expo, native
status-bar-height
Listen to status bar changes during incoming calls and other multi-tasking events
Stars: ✭ 73 (-43.41%)
Mutual labels: native, expo
expo-doodle-jump
No description or website provided.
Stars: ✭ 44 (-65.89%)
Mutual labels: native, expo
TiktokClone
TIKTOK Clone React Native Tutorial 2021 👨💻 I'll show you how you can do this in the simplest way and terms possible. By the end of this series you'll have learned how the big companies do it and will be able to do the same, you not only will be able to do this app, but you'll be able to put what you learn into your very own projects! In this se…
Stars: ✭ 69 (-46.51%)
Mutual labels: native, expo
Gradientify
Create beautiful, animated gradients with ease. This JS library provides you with an easy-to-use API to create and put animated gradients wherever you want on your website.
Stars: ✭ 16 (-87.6%)
Mutual labels: gradients, gradient
Bacardi
Bacardi project is an effort to provide multi-language binding for Node.js native layer.
Stars: ✭ 115 (-10.85%)
Mutual labels: native
Shapy
Shapy is a CSS gradient editor that lets you size, position and layer CSS gradients on a single div element.
Stars: ✭ 115 (-10.85%)
Mutual labels: gradient
Npx Visualize Bundle
Analyse your React Native bundle in 1 command
Stars: ✭ 125 (-3.1%)
Mutual labels: expo
Hackatalk
TalkTalk renewal. Open source chat app built-in expo managed work flow
Stars: ✭ 123 (-4.65%)
Mutual labels: expo
React Native Gl Image Filters
React-Native image filters using gl-react
Stars: ✭ 114 (-11.63%)
Mutual labels: expo
Gradientpathrenderer
Renders MKPolyline with a fancy multicoloured gradient fill
Stars: ✭ 112 (-13.18%)
Mutual labels: gradient
CSS Gradient for LinearGradient
CSS background image for React-Native using LinearGradient from Expo.
Supported backgrounds:
Usage
import Gradient from 'react-native-css-gradient';
render() {
const gradient = `linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%),
repeating-linear-gradient(-115deg, transparent, transparent 20px, rgba(255,255,255,0.1) 20px, rgba(255,255,255,0.1) 40px),
repeating-linear-gradient(115deg, transparent, transparent 20px, rgba(255,255,255,0.1) 20px, rgba(255,255,255,0.1) 40px)`;
return <Gradient gradient={gradient} style={yourStyle}>
}
TODO: Add fallback to react-native-linear-gradient package in case when Expo is missing.
Props
| Prop | Details |
|---|---|
| gradient | CSS Gradient (linear and repeating) are working for the moment |
| style | default styles (Note, if you're going to use repeating gradient you have to specify the width and height) |
| children | - |
About
If you have questions please don't hesitate to contact me on Twitter.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].