Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import SwipeableRow from './SwipeableRow';
// create a component
class App extends Component {
render() {
return (
<View style={styles.container}>
<SwipeableRow></SwipeableRow>
</View>
);
}
}
// define your styles
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
//make this component available to the app
export default App;
import React, { Component } from 'react';
import { Animated, StyleSheet} from 'react-native';
import { RectButton } from 'react-native-gesture-handler';
import Swipeable from 'react-native-gesture-handler/Swipeable';
export default class SwipeableRow extends Component {
renderLeftActions = (progress, dragX) => {
const trans = dragX.interpolate({
inputRange: [0, 50, 100, 101],
outputRange: [-20, 0, 0, 1],
});
return (
<RectButton style={styles.leftAction} onPress={console.log('Pressed')}>
<Animated.Text
style={[
styles.actionText,
{
transform: [{ translateX: trans }],
},
]}>
Swiped!!
</Animated.Text>
</RectButton>
);
};
render() {
return (
<Swipeable
renderLeftActions={this.renderLeftActions}>
<RectButton style={styles.rectButton}>
</RectButton>
</Swipeable>
);
}
}
const styles = StyleSheet.create({
leftAction: {
flex: 1,
backgroundColor: 'cyan',
justifyContent: 'center',
},
actionText: {
color: 'black',
fontSize: 16,
},
rectButton: {
width:'100%',
height: 80,
backgroundColor: 'blue',
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment