Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@faisolp/react-native-swipe-item
Advanced tools
Readme
A swipe item for react-native. Support both iOS and Android.
SwipeProvider breaks on type checking, all the component becomes red and types are not compatible
See react-native-swipe-item-demo.
npm i --save @faisolp/react-native-swipe-item
0.5.0
.You can use the SwipeButtonsContainer
to wrap buttons that you want to show when users swipe the item, and pass it to props.
import { SwipeItem, SwipeButtonsContainer, SwipeProvider } from '@faisolp/react-native-swipe-item';
export default function SwipeButtonCustom() {
const leftButton = (
<SwipeButtonsContainer
style={{
alignSelf: 'center',
aspectRatio: 1,
flexDirection: 'column',
padding: 10,
}}
>
<TouchableOpacity
onPress={() => console.log('left button clicked')}
>
<Text>Click me !</Text>
</TouchableOpacity>
</SwipeButtonsContainer>
);
return (
<SwipeProvider>
<SwipeItem
style={styles.button}
swipeContainerStyle={styles.swipeContentContainerStyle}
leftButtons={leftButton}
>
<Text>
Swipe me!
</Text>
</SwipeItem>
<SwipeItem>
...
</SwipeItem>
</SwipeProvider>
);
}
const styles = StyleSheet.create({
button: {
width: '80%',
height: 100,
alignSelf: 'center',
marginVertical: 5,
},
swipeContentContainerStyle: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ffffff',
borderRadius: 10,
borderColor: '#e3e3e3',
borderWidth: 1,
}
});
SwipeProvider since v0.6.0
SwipeItem
SwipeButtonsContainer
SwipeProvider
PropsSwipe items mode, default is single
.
TYPE | REQUIRED |
---|---|
single | multiple | No |
single
: only allow one swipe item to be opened. The opened swipe item would be automatically closed when the new swipe item triggers the close event. (see the closeTrigger prop for more detail.)
multiple
: allow multiple swipe items to be opened.
The trigger for automatically closed swipe item , only works when the mode prop is single, default is onItemMoved
.
TYPE | REQUIRED |
---|---|
onItemMoved | onButtonShowed | No |
onItemMoved
: when the swipe item is moved, the opened one will be closed.
onButtonShowed
: when the swipe item button is showing, the opened one will be closed.
SwipeItem
PropsThese styles will be applied to the swipe item layout.
TYPE | REQUIRED |
---|---|
style | No |
These styles will be applied to the swipe item container which user swipe.
Example:
return (
<SwipeItem swipeContainerStyle={styles.swipeContentContainerStyle} >
</SwipeItem>
);
}
const styles = StyleSheet.create({
swipeContentContainerStyle: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ffffff',
borderRadius: 10,
borderColor: '#e3e3e3',
borderWidth: 1,
}
});
TYPE | REQUIRED |
---|---|
style | No |
Buttons that want to show on the left when the item swiped to right.
TYPE | REQUIRED |
---|---|
SwipeButtonsContainer | No |
Buttons that want to show on the right when the item swiped to left.
TYPE | REQUIRED |
---|---|
SwipeButtonsContainer | No |
The component for the swipe item.
Example:
import ViewOverflow from 'react-native-view-overflow';
...
...
export default function SwipeButtonCustom() {
return (
<SwipeItem
style={styles.button}
swipeContainerStyle={styles.swipeContentContainerStyle}
containerView={ViewOverflow}
>
<Text>
Swipe me!
</Text>
</SwipeItem>
);
}
...
TYPE | REQUIRED | PLATFORM |
---|---|---|
ViewOverflow | Yes | Android |
This prop will be called when the item started swipe from the origin position, and the SwipeItem
reference passed as an argument.
This prop will be called when left buttons showed, and the SwipeItem
reference passed as an argument.
This prop will be called when right buttons showed, and the SwipeItem
reference passed as an argument.
This prop will be called when the item moved to the origin, and the SwipeItem
reference passed as an argument.
since v0.4
Disable the swipe feature when there are no buttons.
TYPE | REQUIRED |
---|---|
boolean | No |
since v0.7
The swipe item will be opened automatically when the position pass the threshold, and you can set the left and right buttons separately.
TYPE | REQUIRED |
---|---|
{ left?: number, right?: number } | No |
since v0.7
You can disabled left or right or both button scale when swiping.
TYPE | REQUIRED |
---|---|
{ left?: boolean, right?: boolean } | No |
SwipeItem
Ref MethodsClose the swipe item.
Example:
const itemRef = useRef(null);
...
itemRef.current.close();
...
<SwipeItem ref={itemRef} >
...
</SwipeItem>
SwipeButtonsContainer
PropsThis component extends react-native View props.
MIT
FAQs
The swipeale item for react-native
The npm package @faisolp/react-native-swipe-item receives a total of 1 weekly downloads. As such, @faisolp/react-native-swipe-item popularity was classified as not popular.
We found that @faisolp/react-native-swipe-item demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.