https://github.com/devsonuyadav/devsonuyadav.github.io
https://github.com/devsonuyadav/devsonuyadav.github.io
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/devsonuyadav/devsonuyadav.github.io
- Owner: devsonuyadav
- Created: 2021-01-30T19:37:44.000Z (over 5 years ago)
- Default Branch: gh-pages
- Last Pushed: 2021-02-08T19:44:46.000Z (over 5 years ago)
- Last Synced: 2025-08-18T05:20:36.736Z (11 months ago)
- Size: 6.82 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Welcome to react-native-cool-components
You can use some cool and animated components for both android and iOS. More components will get updated in future
### Installation
`npm i react-native-cool-components or yarn add react-native-cool-components`
### ButtonSwiper
### Usage
```JSX import React, { Component } from "react";
import { SafeAreaView } from "react-native";
import { ButtonSwiper } from "react-native-cool-components";
export class App extends Component {
render() {
return (
alert("Yo I just triggered")} />
);
}
}
export default App;
```
### Props
| Prop Name | Type | Default | Description |
| -------------------- | -------- | ----------------- | ----------------------------------------------------------- |
| backContainerStyle | Style | null | back container wrapper style |
| placeHolderStyle | Style | null | specify the width of the button within the string or number |
| buttonContainerStyle | Style | null | button container wrapper style |
| buttonText | String | Completed | button text |
| placeHolder | String | Swipe to complete | placeholder text |
| onSwipeComplete | Function | null | function to be triggered after button swiped to the end |
### BlurredCarousel
### Usage
```JSX import React, { Component } from "react";
import { SafeAreaView } from "react-native";
import { BlurredCarousel } from "react-native-cool-components";
const DATA = [
"https://images.unsplash.com/photo-1612802687608-49884a90c5e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80",
"https://images.unsplash.com/photo-1612801572917-2f5e80c844bc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80",
"https://images.unsplash.com/photo-1612799077072-abec2b27a6e8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80",
"https://images.unsplash.com/photo-1612780829124-5180ccf69823?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80",
];
export class App extends Component {
render() {
return
}
}
export default App;
```
### Props
| Prop Name | Type | Default | Description |
| ---------- | ----- | ------- | ------------------------------ |
| data | Array | null | list of images to be displayed |
| imageStyle | Style | null | image style |
