@metafic-co/react-native-glassmorphism v0.1.2

React Native Glassmorphism

React Native Glassmorphism is a library created to facilitate the use of Glassmorphism design techniques in React Native.

It's a wrapper around @react-native-community/blur to create basic React Native elements to replicate the design methodology of Glassmorphism.

Features

• Glassmorphed View
• Glassmorphed TextInput
• Glassmorphed Button using Touchable Opacity

Installation

1. You can install the library using yarn:

  yarn add @metafic-co/react-native-glassmorphism @react-native-community/blur

or npm:

  npm install @metafic-co/react-native-glassmorphism @react-native-community/blur

2. (iOS only) Install native dependencies:

  cd ios
  pod install

3. Include the library in your code:

  import {GlassView, GlassInput, GlassButton} from "@metafic-co/react-native-glassmorphism";

Usage/Examples

import {GlassView} from '@metafic-co/react-native-glassmorphism'
import {View, Text} from 'react-native'

function App() {
  return (
    <GlassView>
      <View>
        <Text>I am a text over glass</Text>
      </View>
    </GlassView>
  );
}

import {GlassButton} from '@metafic-co/react-native-glassmorphism'
import {View, Text} from 'react-native'

function App() {
  return (
    <View>
      <GlassButton onPress={() => {console.log("You pressed on the glass.")}}>
        <Text>I am a text in Glass Button</Text>
      </GlassButton>
    </View>
  );
}

import {GlassInput} from '@metafic-co/react-native-glassmorphism'
import {View} from 'react-native'
import {useState} from 'react';

function App() {
  const [value, setValue] = useState('');
  return (
    <View>
      <GlassInput value={value} onChangeText={setValue} />
    </View>
  );
}

Screenshots

GlassView

GlassInput

GlassButton

GlassView Props

GlassInput Props

GlassButton Props

Authors

• @harshrat
• @raj-kar

License

MIT