Snack broken, markdown examples have bad synthax, SwipeListExample can't build for android, how can I use it for web/ios and android? #401
Comments
|
Apparently, this is the preferred library in react-native to do swipe view. All examples are incomplete and cannot just be copy-paste to demonstrate that it indeed, really work. For instance, this is the swipe to delete guide I have created the class based on the one from the documentation (with the incorrect syntax). The This is the swipe to delete class, based on what I got from the documentation, I expect to swipe left and delete, instead, I am not able to swipe anything: const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
flex: 1,
},
standalone: {
marginTop: 30,
marginBottom: 30,
},
standaloneRowFront: {
alignItems: 'center',
backgroundColor: '#CCC',
justifyContent: 'center',
height: 50,
},
standaloneRowBack: {
alignItems: 'center',
backgroundColor: '#8BC645',
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
padding: 15,
},
backTextWhite: {
color: '#FFF',
},
rowFront: {
alignItems: 'center',
backgroundColor: '#CCC',
borderBottomColor: 'black',
borderBottomWidth: 1,
justifyContent: 'center',
height: 50,
},
rowBack: {
alignItems: 'center',
backgroundColor: '#DDD',
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
paddingLeft: 15,
},
backRightBtn: {
alignItems: 'center',
bottom: 0,
justifyContent: 'center',
position: 'absolute',
top: 0,
width: 75,
},
backRightBtnLeft: {
backgroundColor: 'blue',
right: 75,
},
backRightBtnRight: {
backgroundColor: 'red',
right: 0,
},
controls: {
alignItems: 'center',
marginBottom: 30,
},
switchContainer: {
flexDirection: 'row',
justifyContent: 'center',
marginBottom: 5,
},
switch: {
alignItems: 'center',
borderWidth: 1,
borderColor: 'black',
paddingVertical: 10,
width: Dimensions.get('window').width / 4,
},
trash: {
height: 25,
width: 25,
},
});
class MyListView extends React.Component {
constructor(props) {
super(props);
this.state = {
listViewData: Array(20).fill('').map((_,i) => ({key: `${i}`, text: `item #${i}`})),
};
this.rowTranslateAnimatedValues = {};
Array(20).fill('').forEach((_, i) => {
this.rowTranslateAnimatedValues[`${i}`] = new Animated.Value(1);
});
}
onSwipeValueChange = (swipeData) => {
const { key, value } = swipeData;
// 375 or however large your screen is (i.e. Dimensions.get('window').width)
if (value < -375 && !this.animationIsRunning) {
this.animationIsRunning = true;
Animated.timing(this.rowTranslateAnimatedValues[key], { toValue: 0, duration: 200 }).start(() => {
const newData = [...this.state.listViewData];
const prevIndex = this.state.listViewData.findIndex(item => item.key === key);
newData.splice(prevIndex, 1);
this.setState({listViewData: newData});
this.animationIsRunning = false;
});
}
}
render() {
return (
<SwipeListView
useFlatList
data={this.state.listViewData}
renderItem={ (data, rowMap) => (
<Animated.View style={[styles.rowFrontContainer,
{
height: this.rowTranslateAnimatedValues[data.item.key].interpolate({
inputRange: [0, 1],
outputRange: [0, 50],
})
}
]}>
<TouchableHighlight
onPress={ () => console.log('You touched me') }
style={styles.rowFront}
underlayColor={'#AAA'}
>
<View>
<Text>I am {data.item.text} in a SwipeListView</Text>
</View>
</TouchableHighlight>
</Animated.View>
)}
rightOpenValue={-375}
onSwipeValueChange={this.onSwipeValueChange}
/>
);
}
}I have tried to clone the repo on the current 2.1.3 and I am not even able to run dka@dka:[~/workspace/github.com/jemise111/react-native-swipe-list-view/SwipeListExample (v2.1.3)]: react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 862 file(s) to forward-jetify. Using 8 workers...
info Starting JS server...
info Installing the app...
Downloading https://services.gradle.org/distributions/gradle-5.4.1-all.zip
..............................................................................................................................
Welcome to Gradle 5.4.1!
Here are the highlights of this release:
- Run builds with JDK12
- New API for Incremental Tasks
- Updates to native projects, including Swift 5 support
For more details see https://docs.gradle.org/5.4.1/release-notes.html
Starting a Gradle Daemon (subsequent builds will be faster)
> Task :app:validateSigningDebug FAILED
Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/5.4.1/userguide/command_line_interface.html#sec:command_line_warnings
17 actionable tasks: 17 executed
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:validateSigningDebug'.
> Keystore file '/home/dka/workspace/github.com/jemise111/react-native-swipe-list-view/SwipeListExample/android/app/debug.keystore' not found for signing config 'debug'.
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 1m 35s
error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:validateSigningDebug'.
> Keystore file '/home/dka/workspace/github.com/jemise111/react-native-swipe-list-view/SwipeListExample/android/app/debug.keystore' not found for signing config 'debug'.
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 1m 35s
at checkExecSyncError (child_process.js:610:11)
at execFileSync (child_process.js:628:15)
at runOnAllDevices (/home/dka/workspace/github.com/jemise111/react-native-swipe-list-view/SwipeListExample/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:75:39)
at buildAndRun (/home/dka/workspace/github.com/jemise111/react-native-swipe-list-view/SwipeListExample/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/index.js:155:41)
at /home/dka/workspace/github.com/jemise111/react-native-swipe-list-view/SwipeListExample/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/index.js:121:12
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async Command.handleAction (/home/dka/workspace/github.com/jemise111/react-native-swipe-list-view/SwipeListExample/node_modules/@react-native-community/cli/build/cliEntry.js:160:7)Any idea what I am missing to get started? |
kopax
changed the title
|
Expo snacks is also broken: https://snack.expo.io/@jemise111/react-native-swipe-list-view
I've tried with my expo client on android and it doesn't load anything as well |
kopax
changed the title
|
Hi @kopax you've raised a number of issues here. I'm going to attempt to address them in order:
Maybe, I have no idea what your requirements are. There are examples and gifs showing what this library can do, if that fits what you're looking for then that's great.
I have never tried to use this library with react-native-web and do not make any claims that it will work there. There is another issue with more detail here #390
Where are you getting this from? I never make this claim. This is my personal project with help and support from the OS community
Examples are intended to be a reference. They are not necessarily plug and play. However if you want to improve them and submit a PR I'd be more than happy to take a look.
Please let me know where the syntax issue is and I'm happy to fix it. Or better yet can you submit a PR with a fix?
Like I said, examples are intended to be a reference. I don't think styles are necessarily relevant to making the library work but if you want to submit a PR and improve them, please do
Open a separate issue for this and I'm happy to try and fix it
Your issue has absolutely nothing to do with this library. If you do intend to open new issues please be patient. I'm one person maintaining this library (100% for free) with a full time job and can't always fix things at the drop of a hat. However, like I said, PR's are always welcome 🙂 |
|
Thanks a lot for taking the time to read and reply in depth.
I get this from a few hours of google search, you should be proud :) I am now digging into it and I will gladly do any PR I can see to improve the work already done here. My requirement are to make the slide left to delete, and slide right to add to favorite, as in the android gmail application. Do you think it will make the deal? I have tried on the web with the You only forgot to state about the example not being able to run with the provided commands. Thanks again for sharing such work. |
|
Hi, I have just opened a bunch of issues and PRs. I would gladly help more, see #407. |
Hello, in the development of a web/ios/android application with expo SDK 36, I am looking to achieve a google mail application swipe like list view in Android, iOS and web.
Will this fits my requirement ?
I haven't seen any issue tagged with react-native-web, is this library also supporting web?
Thanks a lot for sharing!
The text was updated successfully, but these errors were encountered: