I am using a certain react-native package to display a drag and drop flatlist; the API can be found here: https://github.com/computerjazz/react-native-draggable-flatlist. I am new to react native and I want the drag and drop flatlist to display the rank in the list on the list element. For example, if my list looked something like this:
1- Item A
2- Item B
3- Item C
and I drag Item C to the top, it should look something like this:
1- Item C
2- Item A
3- Item B
Notice how the 1. 2. 3. stay the same on the left. I am not sure how to do that. Instead, I get something like this:
3- Item C
1- Item A
2- Item B
I would really appreciate the support :)
My code looks like this:
{
/** @format */import React from "react";import { Text, ScrollView, View, TouchableOpacity, StyleSheet, FlatList, PanResponder, Animated,} from "react-native";import Icon from "react-native-vector-icons/Ionicons";import { globalStyles, deviceHeight, deviceWidth } from "../styles/global";import { withNavigation } from "react-navigation";import DraggableFlatList from "react-native-draggable-flatlist";const exampleData = [ { name: "Turkey Trot", teamsCompeting: 32, teamList: [ { number: "919A", name: "Reverb", wins: 4, loss: 1, ties: 0, autonomousWins: 3, key: "1", }, { number: "9964S", name: "Bender", wins: 1, loss: 3, ties: 1, autonomousWins: 1, key: "2", }, ], key: "0", }, { name: "Patent Office", teamsCompeting: 32, teamList: [ { number: "919A", name: "Reverb", wins: 4, loss: 1, ties: 0, autonomousWins: 3, key: "1", }, { number: "9964S", name: "Bender", wins: 1, loss: 3, ties: 1, autonomousWins: 1, key: "2", }, ], key: "1", }, { name: "States", teamsCompeting: 32, teamList: [ { number: "919A", name: "Reverb", wins: 4, loss: 1, ties: 0, autonomousWins: 3, key: "1", }, { number: "9964S", name: "Bender", wins: 1, loss: 3, ties: 1, autonomousWins: 1, key: "2", }, ], key: "2", },];class Competitions extends React.Component { state = { compData: exampleData, }; renderItem = ({ item, index, drag, isActive }) => { return (<TouchableOpacity style={[ globalStyles.listItemButton, { opacity: isActive ? 0.5 : 1 }, ]} onPress={() => { this.props.navigation.navigate("Teams", item); }} onLongPress={drag} delayLongPress={300}><Text style={globalStyles.listItemText}> {index}. {item.name}</Text></TouchableOpacity> ); }; render() { return (<View style={[ globalStyles.container, { justifyContent: "center", paddingBottom: 40 }, ]}><DraggableFlatList data={this.state.compData} renderItem={this.renderItem} keyExtractor={(item, index) => `draggable-item-item-${item.key}` } onDragEnd={({ data }) => this.setState({ compData: data })} /><TouchableOpacity style={globalStyles.addItemButton} onPress={() => { this.props.navigation.navigate("AddCompetitionScreen", Competitions ); }}><Text style={[ globalStyles.listItemText, { textAlign: "center" }, ]}> Add Competition</Text></TouchableOpacity></View> ); }}const styles = StyleSheet.create({});export default withNavigation(Competitions);
}
