1.1.1 • Published 3 years ago

react-native-bevelspin-view v1.1.1

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
3 years ago

react-native-bevelspin-view

supports iOS supports Android npm npm license | IOS wiget | Demo | | :-------------------------------------- | :-----------------------------------------------: | | IOS wiget Demo | Demo |

Installation

need to install react-native-reanimated2 first

yarn add react-native-bevelspin-view

or

npm install react-native-bevelspin-view --save

Notice

Build with react-native-reanimated 2.0,so it only works with react-native version 0.62 or above.

Examples

React Native example

Code

import { StyleSheet, Text, View } from 'react-native';
import { BevelView } from '../src/BevelView';
import React from 'react';
const App = () => (
  <View style={styles.container}>
    <BevelView style={styles.bevel}>
      <Text style={styles.text}>TEST</Text>
    </BevelView>
  </View>
);
const styles = StyleSheet.create({
  bevel: {
    width: 200,
    height: 200,
    backgroundColor: '#fff',
    shadowColor: '#333',
    shadowOffset: { width: 10, height: 10 },
    shadowOpacity: 0.2,
    shadowRadius: 20,
    borderRadius: 20,
    elevation: 3,
    justifyContent: 'center',
    alignItems: 'center',
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 50,
    color: '#333',
  },
});
export default App;

Props

PropDefaultTypeDescription
children-nodeChildren elements
bevelDeg30numberDegress of the horizontal surface and view default is 30 deg
duration16000numberThe time ms of spin a circle,if duration = 0 not spin
delay0numberThe time ms to dealy to spin
perspective200numbertransform perspective property

More props

This is a wrapper around Animated.View, all their props works well

Author

282931