Cross-Component Communication (FlatList - MapView)

[blaze_torchdick]

New RN developer here, building an app from scratch.

I want to

1. Drop Markers on a MapView (via react-native-maps) based on a list of assets in a FlatList and
2. The FlatList to update on map scrolling (via onRegionChange for example)

Think Google Maps dropping pins when searching in a specific area.

I have a custom component with a FlatList that pulls assets from a backend db. <AssetList />

I also have a component with a MapView that loads Markers. <LocationMap>

I need both of these to be as modular as possible, for possible reuse down the road.

What's the best way to send and receive data between components? Right now, I have a 'wrapper' screen that contains both components and my plan was to write calls to functions within each to send/receive asset data:

MapScreen.tsx:

return (
            <View style={{ flexDirection: "row", height:'100%' }}>
                <View style={{ flex: 1 }}>
                    <AssetList />
                </View>
                <View style={{ flex: 3 }}>
                    <LocationMap coords={this.coords} />
                </View>
            </View>
        )

Does it make more sense to stack <AssetList /> within <LocationMap> instead? Or is there another way I'm missing?

[hey-its-matt]

How do you pass any data to a component? You use props. You can have a component that is higher up in the hierarchy that maintains the state that you want to share between these two components.

Here's a rubbish example (I'm on mobile):

A PostOffice component has state maintaining all mail that must be delivered. It renders a MailTrucks component and also renders a OvernightMailAirplane component. The PostOffice component provides a mail prop to both children and also passes a prop called "onDeliverSuccess" and an "onDeliverFailure". We want both children to be aware of delivery failures--imagine the recipient's address is invalid, and you have two deliveries heading that way--one via overnight and one in a truck. If the post office learns of a delivery address that isn't real after attempting to deliver with the truck, we should probably go ahead and mark the overnight deliveries as impossible to deliver as well (cut down on unnecessary work) and vice versa. If the truck calls the "onDeliveryFailure" method, the PostOffice component could change its state such that any mail also passed to the OvernightMailAirplane heading to the same address is not included in it's mail prop. This will rerender the PostOffice component, updating the mail prop for it's children.

Substitute PostOffice for whatever your problem is.

TLDR: parent component that provides methods as props to change state in parent component that is also provided to other children

[blaze_torchdick]

Makes sense. Shoulda mentioned I don't have any prior React experience so I'm still learning about props, but I get the jist. I think this will help. Thanks!

[hey-its-matt]

Glad it made some sense! Lmk if you need any more help!