Image Blur Shadows for react-native app using react-native-image-blur-shadow

Vivek Verma — Wed, 28 Apr 2021 17:00:51 +0000

As Drop Shadows and animations are the new trend for the apps, iOS native already give their Image Component a bunch of customization which looks great, the similar feature needs to implement in the react-native platform so that the boundaries can be filled.

This library react-native-image-blur-shadow gives the same iOS like image blur shadow effect for react-native environment.

This is how it look's like

Demo

snack.expo.io/@virtualvivek/image-blur-shadow

Repository

virtualvivek / react-native-image-blur-shadow

A React Native <Image/> component with Blur Drop Shadows,100% JavaScript, 0 dependency component. Supports Android, iOS and Web. A light weight Image component for your react native project.

react-native-image-blur-shadow

A React Native <Image/> component with Blur Drop Shadows, 100% JavaScript, 0 Dependency component.
Supports Android, iOS and Web

Demo

https://snack.expo.io/@virtualvivek/image-blur-shadow

Installation

$ npm install react-native-image-blur-shadow

Import

import ImageBlurShadow from "react-native-image-blur-shadow";

Usage

import ImageBlurShadow from "react-native-image-blur-shadow";

<ImageBlurShadow
  style={styles.img}
  source={require('./src/assets/spiderman.jpg')}
  imageWidth={220}
  imageHeight={220}
  imageBorderRadius={22}
  shadowOffset={38}
  shadowBlurRadius={48}
  shadowBackgroundColor={'#ffffff'}
/>

Props

Property	Type	Default	Description
style	object	`{}`	set the style of component container
source	string	`null`	set the image source
imageWidth	number	default	set image width
imageHeight	number	default	set image height
imageBorderRadius	number	0	set image border radius
imageFadeDuration	number	300	set image fade animation duration in

…

View on GitHub

Installation

$ npm install react-native-image-blur-shadow

Import

import ImageBlurShadow from 'react-native-image-blur-shadow';

Usage

import ImageBlurShadow from 'react-native-image-blur-shadow'

<ImageBlurShadow
    style={styles.img}
    source={require('./src/assets/spiderman.jpg')}
    imageWidth={220}
    imageHeight={220}
    imageBorderRadius={22}
    shadowOffset={38}
    shadowBlurRadius={48}
    shadowBackgroundColor={'#ffffff'}
  />

Props

Property	Type	Default	Description
style	object	`{}`	set the style of component container
source	string	null	set the image source
imageWidth	number	default	set image width
imageHeight	number	default	set image height
imageBorderRadius	number	0	set image border radius
imageFadeDuration	number	300	set image fade animation duration in ms
shadowOffset	number	38	set/override shadow offset
shadowBlurRadius	number	34	set/override shadow blurRadius
shadowBackgroundColor	HexColor	`#ffffff`	set/override shadow background color
shadowFadeDuration	number	300	set shadow fade animation duration in ms

Find this library useful? ❤️

Support it by joining stargazers for this repository. ⭐

Build Windows native like ui apps using react-windows-ui

Vivek Verma — Tue, 02 Mar 2021 15:58:11 +0000

As Microsoft introduces the new fluent ui design to their windows apps most of the developers started implementing the interface to their apps.

Here comes react-windows-ui a web based library build using reactjs to produce more rich feel of a native windows apps using web architecture, It resembles on components model to develop fast PWA or Native apps with coupling with electronjs or NodeGUI.

Adaptive UI

Repository

virtualvivek / react-windows-ui

Build Windows native look & feel apps using ReactJS. Provides a set of accessible, reusable and composable react components that make it super easy to create websites and apps.

react-windows-ui

Build Windows native look & feel apps using ReactJS.

« Explore Project Docs »

Status

Features

Provides Native feel Windows UI Controls.
Comparably small CSS file size.
Cleaner HTML.
Works with any Routing Library.

Works with

Getting Started

npm install react-windows-ui

// Be sure to include styles at some point, probably during your bootstraping
import "react-windows-ui/config/app-config.css";
import "react-windows-ui/dist/react-windows-ui.min.css";
import "react-windows-ui/icons/winui-icons.min.css";

🚀 See `App.js` code & more »

Usage

import { Button, InputText } from "react-windows-ui";

const App = () => (
  <>
    <Button type="primary" value="Press Me" />
    <InputText placeholder="Enter a text" />
  </>
);

Run Locally

git clone https://github.com/virtualvivek/react-windows-ui.git
cd react-windows-ui
npm install
npm start

Find this project useful? ❤️

Support it by joining stargazers for this repository. ⭐

License

react-windows-ui is licensed under…

View on GitHub

Demo ⚡

https://virtualvivek.github.io/react-windows-ui/

Installation

$ npm install react-windows-ui

Getting Started

//Be sure to include styles at some point, probably during bootstraping
import 'react-windows-ui/config/app-config.css'
import 'react-windows-ui/dist/react-windows-ui.min.css'
import 'react-windows-ui/icons/fonts/fonts.min.css'

Usage

import { Button, InputText } from 'react-windows-ui';

const App = () => (
  <>
    <Button type="primary" value="Press Me" />
    <InputText placeholder="Enter a text" />
  </>
);

Run Demo Locally

$ git clone https://github.com/virtualvivek/react-windows-ui.git
$ cd react-windows-ui
$ npm install
$ npm start

Find this library useful? ❤️

Support it by joining stargazers for this repository. ⭐

Final Thoughts

I think this project will glorify web developers specially from field of react can build Windows design system hybrid or Native apps with ease. It provides a responsive design flow to support a broad field of devices.

DEV Community: Vivek Verma

Image Blur Shadows for react-native app using react-native-image-blur-shadow

This is how it look's like

Demo

Repository

virtualvivek / react-native-image-blur-shadow

A React Native <Image/> component with Blur Drop Shadows,100% JavaScript, 0 dependency component. Supports Android, iOS and Web. A light weight Image component for your react native project.

react-native-image-blur-shadow

Demo

Installation

Import

Usage

Props

Installation

Import

Usage

Props

Find this library useful? ❤️

Build Windows native like ui apps using react-windows-ui

Adaptive UI

Repository

virtualvivek / react-windows-ui

Build Windows native look & feel apps using ReactJS. Provides a set of accessible, reusable and composable react components that make it super easy to create websites and apps.

react-windows-ui

Status

Features

Works with

Getting Started

🚀 See App.js code & more »

Usage

Run Locally

Find this project useful? ❤️

License

Demo ⚡

Installation

Getting Started

Usage

Run Demo Locally

Find this library useful? ❤️

Final Thoughts

🚀 See `App.js` code & more »