angelsit-web / React Native Overlay Section
Overlay section like iOS Notification Center
Stars: ✭ 14
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to React Native Overlay Section
Discretescrollview
A scrollable list of items that centers the current element and provides easy-to-use APIs for cool item animations.
Stars: ✭ 5,533 (+39421.43%)
Mutual labels: swipe
Overlaycontainer
Non-intrusive iOS UI library to implement overlay based interfaces
Stars: ✭ 777 (+5450%)
Mutual labels: overlay
Webannoyances
Fix and remove annoying web elements such as sticky headers, floating boxes, floating videos, dickbars, social share bars and other distracting elements.
Stars: ✭ 831 (+5835.71%)
Mutual labels: overlay
Swipecellkit
A swipeable UITableViewCell or UICollectionViewCell with support for:
Stars: ✭ 5,745 (+40935.71%)
Mutual labels: swipe
Swiper
Most modern mobile touch slider with hardware accelerated transitions
Stars: ✭ 29,519 (+210750%)
Mutual labels: swipe
Android Advancedrecyclerview
RecyclerView extension library which provides advanced features. (ex. Google's Inbox app like swiping, Play Music app like drag and drop sorting)
Stars: ✭ 5,172 (+36842.86%)
Mutual labels: swipe
React Native Scrollable Tab View
Tabbed navigation that you can swipe between, each tab can have its own ScrollView and maintain its own scroll position between swipes. Pleasantly animated. Customizable tab bar
Stars: ✭ 6,784 (+48357.14%)
Mutual labels: swipe
Verticalcardswiper
A marriage between the Shazam Discover UI and Tinder, built with UICollectionView in Swift.
Stars: ✭ 830 (+5828.57%)
Mutual labels: swipe
Poe Overlay
An Overlay for Path of Exile. Built with Overwolf and Angular.
Stars: ✭ 679 (+4750%)
Mutual labels: overlay
Input Overlay
Show keyboard, gamepad and mouse input on stream
Stars: ✭ 684 (+4785.71%)
Mutual labels: overlay
Splide
Splide is a lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.
Stars: ✭ 786 (+5514.29%)
Mutual labels: swipe
Recyclerviewhelper
📃 [Android Library] Giving powers to RecyclerView
Stars: ✭ 643 (+4492.86%)
Mutual labels: swipe
Swipeabletabbarcontroller
UITabBarController with swipe interaction between its tabs.
Stars: ✭ 919 (+6464.29%)
Mutual labels: swipe
Vue Loading Overlay
Vue.js component for full screen loading indicator 🌀
Stars: ✭ 784 (+5500%)
Mutual labels: overlay
Swipe
Swipe is the most accurate touch slider. Support both React and Angular.
Stars: ✭ 850 (+5971.43%)
Mutual labels: swipe
React Overlays
Utilities for creating robust overlay components
Stars: ✭ 809 (+5678.57%)
Mutual labels: overlay
Without linking. Compatible with expo.
https://github.com/greenarea/react-native-overlay-section
Installation
yarn add react-native-overlay-section
or
npm i react-native-overlay-section --save
Usage example
import React, { Component } from 'react';
import {
View,
Text,
} from 'react-native';
import SlideUp from 'react-native-overlay-section';
export default class App extends Component {
constructor (props) {
super(props);
}
exampleContent = () => {
return (
<View>
<Text>This is test text</Text>
</View>
)
}
render() {
return (
<View style={{flex: 1}}>
<Text>Hello</Text>
<SlideUp contentSection={this.exampleContent()} />
</View>
)
}
}
| props | type | description |
|---|---|---|
| visibleHeight | number | Height of all visible content include dragSection |
| draggableHeight | number | Height of dragSection |
| contentSection | component | Pass your custom object to render it |
| dragSection | component | Section with PanResponder |
| dragBgColor | string | Background color of dragSection |
| contentSectionBgColor | string | backgroundColor of contentSection |
| dragArrowColor | string | Color of default arrow |
All props are not required*
Milestones:
- [ ] Several section stop points, like 30%, 50%, 100% from bottom
- [ ] Arrangement from top to bottom.
- [ ] Fit to content
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].