react-native-action-view

An easy to use component that allows displaying swipeable buttons with a variety of transitions.

Showing:

Popularity

Downloads/wk

164

GitHub Stars

173

Maintenance

Last Commit

2mos ago

Contributors

10

Package

Dependencies

0

Size (min+gzip)

0.2KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

React Native Action View

react-native-action-view is an easy to use component that allows displaying swipeable buttons with a variety of transitions.

Using

Import the component:

import { SwipeActionView } from 'react-native-action-view';

Use the component:

<SwipeActionView rightExpansionSettings={{buttonIndex: 0}}
                 leftExpansionSettings={{buttonIndex: 0}} 
                 rightButtons={[{title: 'Red', color: 'rgb(255, 0, 0)', callback: () => {alert('Red button tapped.');}}, 
                                {title: 'Green', color: 'rgb(0, 255, 0)', callback: () => {alert('Green button tapped.');}},
                                {title: 'Blue', color: 'rgb(0, 0, 255)', callback: () => {alert('Blue button tapped.');}}]}
                 leftButtons={[{title: 'Red', color: 'rgb(255, 0, 0)', callback: () => {alert('Red button tapped.');}}, 
                                {title: 'Green', color: 'rgb(0, 255, 0)', callback: () => {alert('Green button tapped.');}},
                                {title: 'Blue', color: 'rgb(0, 0, 255)', callback: () => {alert('Blue button tapped.');}}]}
                >
  <Text style={styles.welcome}>
    Welcome to React Native!
  </Text>
  <Text style={styles.instructions}>
    To get started, swipe this view.
  </Text>
  <Text style={styles.instructions}>
    Tap on a button or swipe fully.
  </Text>
</SwipeActionView>

Configuration

Possible props are:

  • leftButtons, rightButtons
    • title or image, color, callback
  • leftExpansionSettings, rightExpansionSettings - Control the button expansion settings
    • buttonIndex - The button to expand (Number)
    • fillOnTrigger - Whether to fill the button upon expansion (Boolean)
    • threshold - The treshold, in points, before expansion begins (Number)
  • leftSwipeSettings, rightSwipeSettings - Control swipe settings
    • transition - The transition type (String)
      • Available types: "static" (default), "border", "drag", "clipCenter", "rotate3d", "grow"
    • enableSwipeBounces - Controls if the swipe motion bounces or not (Boolean)

Transitions Types

Border

Clip

Rotate3D

Static

Drag

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial