jemise111 / react-native-swipe-list-view

A React Native ListView component with rows that swipe open and closed
https://www.npmjs.com/package/react-native-swipe-list-view
MIT License
2.78k stars 528 forks source link

Horizontal ScrollView inside renderItem of SwipeListView #588

Open ZubairovSalim opened 2 years ago

ZubairovSalim commented 2 years ago

Hello! Can I add horizontal ScrollView for scrolling photos inside renderItem of SwipeListView? In other words, when I'm scrolling in area of ScrollView, photos scrolls and hidden items not showing, but when I scroll on other area of item - hidden items showing in height, that includes ScrollView area. Please look at the screenshot.

SwipeListView:

            {notes.length > 0 && <SwipeListView
                data={notes}
                renderItem={({item, index}) => (
                    <NoteItem
                        id={item.id}
                        note={item}
                    />
                )}
                renderHiddenItem={renderHiddenItem}
                rightOpenValue={-150}
                previewRowKey={1}
                previewOpenValue={-150}
                previewOpenDelay={1000}
                keyExtractor={(item) => item.id}
            />}

NoteItem:

    const NoteItem = props => {
    const {note} = props;

    return (
        <View style={styles.container}>
            <View style={styles.date}>
                <Text style={styles.text}>{getFullDateStringWithSeparator(note.date, '.')}</Text>
            </View>
            <View style={styles.note}>
                <Text style={styles.text}>{note.note}</Text>
            </View>
            <ScrollView horizontal={true} style={styles.photos}>
                {note.photos.map(photo => <Image style={{width: 70, height: 70, marginRight: 6}} source={photo} />)}
            </ScrollView>
        </View>
    )
};

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#F9F7FC',
        padding: 20,
        borderBottomWidth: 1,
    },
    date: {
        marginBottom: 6
    },
    photos: {
        marginTop: 10,
        flexDirection: 'row',
    },
    text: {
        fontSize: 16
    }
});

Simulator Screen Shot - iPhone 12 mini - 2022-01-30 at 21 54 26 2