CODEWITHSUNDEEP
react-native
smilebomb
smilebomb

Reputation: 5483

How to order components

I'd like to order my components by distance from the user.

PlaceList.js

class PlaceList extends Component {
    render() {
        return (
            <ScrollView style={styles.scrollStyle}>
                <Place key={place.id} place={place} lat={this.state.latitude} long={this.state.longitude}/>
            </ScrollView>
        );
    }
}

Place.js

const SomePlace = ({ place, lat, long }) => {

    return (
        <Card>
            <CardSection>
                <Text>
                    You are {haversineDistance()} miles away
                </Text>
            </CardSection>
        </Card>
    );
}

I've shortened the code, and it's working. The list displays all my places with the correct distance from the user. I'm just not sure where to start on ordering components. I'm very new to react native! For example, the first four places are 1.16, 0.82, 0.42, and 5.12 miles from the user, and I would want them ordered in the list like: 0.42, 0.82, 1.16, 5.12.

Upvotes: 1

Views: 70

Answers (1)

Omar Salah Elboredy
Omar Salah Elboredy

Reputation: 427

You could use FLatList component, steps:

  1. Get the places' distances using the Harvesine formula (As you already do).
  2. Sort the places upon distance
  3. Pass the sorted array as a prop to the FlatList

But what if you don't want to sort the places at all!

You could follow the answer to this question that intends to reorder the shown list without sorting the data source.

Upvotes: 2

Related Questions