provatahealth / react-native-smooth-swipe-list Goto Github PK
View Code? Open in Web Editor NEWA swipe-able ListView component modeled after the list view in the iOS Mail app.
A swipe-able ListView component modeled after the list view in the iOS Mail app.
react-native: 0.50.3
react: 16.0.0
react-native-smooth-swipe-list: 0.13.1
Import something from react-native-smooth-swipe-list
. Build iOS in release mode, and run. App crashes. (Android not tested.)
Works fine in dev mode.
View.propTypes
is undefined.
What I have:
(the row has been opened by swiping)
What I'm trying to achieve:
Open row when pressing the icon on the right of each row (the three vertical dots icon)
My code:
rowData = this.state.commands.map((x, i) => ({
id: x.id + '',
rowView: this.getRowView(x, i),
rightSubView: this.getOptionsButton(x),
style: styles.row
}))
getRowView(command, i) {
return (
<SwipeableCommand command={command} />
);
}
render() {
<SwipeList ref={x => this.swipeList = x} rowData={this.rowData} style={styles.listStyle} />
}
SwipeableCommand.js:
export default class SwipeableCommand extends Component {
open = () => {
//This doesn't work!
this.row.open('right');
}
render() {
return (
<SwipeRow
ref={x => this.row = x}
startCloseTimeout={() => { }}
clearCloseTimeout={() => { }}
>
<View style={styles.viewWrap}>
...markup
</View>
</SwipeRow >
)
}
}
And whenever I press the '...' button the row just becomes frozen (the touchableopacity button doesnt even work anymore). I have looked inside the source code and couldn't figure out how to solve this, but I found out that animateOpenOrClose(toValue, vx, noBounce) {
receives an undefined
value for the toValue
so it's going to try to animate the row towards undefined
.
What am I missing/doing incorrectly?
AnimationValue: Attempting to set to undefined error caused by animateOut()
https://github.com/ProvataHealth/react-native-smooth-swipe-list/blob/master/src/components/SwipeList.js#L118
That intermittently appears. Can't find the reason.
But if you remove component.animateOut
everything gets in place.
hi @provatahealthdev , thanks for your work.
i notice that this library change from ListView to FlatList some times ago,
is there a SectionList version?
or i should use SwipeRow and wrap it by myself?
Yo! Are there plans to update this to use react-native's more performant FlatList?
It's faster, you no longer need to manage a dataSource, the api is much simpler!
Can I only use right swipe your lib?
i just implement this library, i follow each step, but list is not showing. if i render something else it will render successfully, but swipelist not working. is this because of this error?
here is the complete code in case if i missing something:
import React from 'react';
import createReactClass from 'create-react-class';
import { View, Text, StyleSheet } from 'react-native';
import {Icon} from 'native-base';
import SwipeList from 'react-native-smooth-swipe-list';
const RowList = createReactClass({
componentDidMount() {
this.rowData = this.props.array.map(this.constructRowData);
},
constructRowData(item) {
return {
id: item,
rowView: this.getRowView(item),
rightSubView: this.getRemoveButton(),
style: styles.rowFront //optional but recommended to style your rows
};
},
getRowView(item) {
console.log("Item>> ", item)
return (
<View style={styles.rowFront}>
<Text>{`I am a SwipeListView`}</Text>
</View>
);
},
getRemoveButton() {
return(
<View style={styles.rowBack}>
<Icon name="close" style={styles.iconClose} type="FontAwesome" />
<Text style={{ color: '#FFF', fontFamily: 'Gilroy-extrabold', marginLeft: 5}}>Remove</Text>
</View>
);
},
render() {
return <SwipeList rowData={this.rowData} />;
}
});
const styles = StyleSheet.create({
rowBack: {
backgroundColor: "#5E368E",
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row'
},
iconClose: {
color: '#FFF',
fontSize: 24,
fontWeight: 'bold',
},
rowFront: {
borderBottomColor: '#EEE',
borderBottomWidth: 1,
paddingHorizontal: 100,
paddingVertical: 15,
}
});
export default RowList;
import RowList from './rowList';
class Watch extends Component {
state = {
array: [1,2,3,4,5]
}
render() {
const { flexOne } = styles;
const {array} = this.state;
return (
<View style={flexOne}>
{ array && array.length > 0 ? <RowList array={array} /> : <EmptyView title="watch" text="stories" />}
</View>
);
}
}
version:
"react-native-smooth-swipe-list": "^1.4.7"
Can you provide renderHeader function like provided in link below?
http://shoutem.github.io/docs/ui-toolkit/components/list-view
Absolutely stunning implementation! I haven't seen anything come close to the quality of this!
I have this weird case where the rowView
shrinks when swiping on the rightSubView
Nothing fancy going on here. I made a simple code snippet for testing and attached a gif. The rowView
is a black box containing a white box. When swiping the rightSubView
you can see the white view inside the rowView
shrink.
Any thoughts?
constructRowData(job) {
return {
style: {flex: 1},
id: job.jobnumber,
rowView: (
<View style={{flex: 1, height: 150, backgroundColor: 'black', marginVertical: 8}}>
<View style={{flex: 1, margin: 8, backgroundColor: 'white'}} />
</View>
),
rightSubView: <View style={{height: 150, width: 150, backgroundColor: 'red', marginVertical: 8}} />
}
}
render() {
return <SwipeList rowData={this.rowData} style={style.list}/>
}
The version number 1.3.0 didn't change in the last commit.
I couldn't find any place to put my style on left/right subview, any ideas?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.