In my React Native component, I need to create a variable that will be used multiple times. Each instance of this component should have a different variable name for reference.

<View ref={view => { shapeView = view; }}   
        onLayout={({ nativeEvent }) => { 
            shapeView.measure((x, y, width, height, pageX, pageY) => {
            console.log('- - - DEBUG: width:' + width + ', pageX:'+ pageX + ', pageY:' + pageY);
            let shapePickerPosition = {w: width, x: pageX, y: pageY};
            setShapeCoords(shapePickerPosition);
            })
        }}>

Using this code within the component multiple times requires changing the variable name "shapeView" to avoid getting coordinates from only the last instance of the component.

Below is the complete component:

import React, {useState, useEffect} from 'react';
import {StyleSheet, View, Text, Modal, TouchableOpacity, Pressable, FlatList} from 'react-native';
import { useTheme } from '@react-navigation/native';

// ------------------PickerRow-----------------------------------------------------------------------
function CustomPickerRow(props) {

  const { colors } = useTheme(); // works
  const theme = useTheme();
  const [selectedItem, setSelectedItem] = useState('choose');
  const [coordinates, setCoordinates] = useState();

  const setItem = (value) => {
      // Set parent state
      props.action(value)
  }

    return (
      <View
        ref = { view => { shapeView  = view; } }
        onLayout={({ nativeEvent }) => {
            shapeView.measure( (x, y, width, height, pageX, pageY) => {
                console.log('height:', height);
                console.log('width:', width);
                console.log('x:', pageX);
                console.log('y:', pageY);
                let coords = {w: width, x: pageX, y: pageY};
                setCoordinates(coords);
              })

        }} 
        style = {{
        flexDirection: 'row', 
        justifyContent: 'space-between', 
        alignItems: 'center', 
        height: 25, 
        paddingLeft: 5, 
        marginBottom: 3, 
        backgroundColor: colors.frameBackground, 
        borderColor: colors.borderColor, 
        borderWidth: 1, 
        borderRadius: 5}}>
          <View style = {styles.icon}>
              <Text style = {styles.text}>{props.icon}</Text>
          </View>
          <View style = {styles.description}>
              <Text style = {{fontSize: 11, fontWeight: 'bold', color: colors.text, textAlign: 'left', marginLeft: 5}}>{props.title}</Text>
          </View>
          <MyPicker data={props.data} action={setItem} position={coordinates}/>
      </View>


    );
    }


  // ------------------MyPicker-----------------------------------------------------------------------
  function MyPicker(props) {

    const { colors } = useTheme(); // works
    const theme = useTheme();
    const [isVisible, setIsVisible] = useState(false);
    const [selectedItem, setSelectedItem] = useState(props.data[0].key)
    const [coordinates, setCoordinates] = useState({w: 180, x: 0, y: 0});

    useEffect(() => {
        if (props.position) {
            setCoordinates(props.position);
        }

    })

    const setItem = item => {
      // Set parent state
      props.action(item.value);
      setIsVisible(false);
      console.log("Chosen value = " + item.key);
      setSelectedItem(item.key);
    }

    const showPicker = () => {
        setIsVisible(true);
    }

    const renderItem = ({item}) => {
        return <View>
                    <Pressable onPress={() => setItem(item)}>
                        <Text style={{color: colors.text, fontSize: 17, alignSelf: 'center', paddingTop: 3}}>
                            {item.key}
                        </Text>
                    </Pressable>
                </View>
      }

      return (
        <View style={{flex:5, backgroundColor: 'transparent'}}>
            <TouchableOpacity onPress={showPicker}>
                <Text style={{color: colors.textSubtitleColor, fontSize: 11, alignSelf: 'flex-end', paddingRight: 10}}>
                      {selectedItem}
                </Text>
            </TouchableOpacity>

            <Modal animationType="fade"
                transparent={true}
                visible={isVisible}
                style={styles.testPicker}
                onRequestClose={() => {
                    console.log('Modal has been closed.');
                }}
                 >
                     <View style={{  backgroundColor: colors.frameBackground,
                                     borderColor: colors.borderColor, 
                                     borderWidth: 1, 
                                     borderRadius: 5,
                                     position: 'absolute',
                                     width:  180,
                                     height: 200,
                                     left: coordinates.x, 
                                     top: coordinates.y 
                                     }}>
                         <FlatList
                             data={props.data}
                             renderItem={renderItem}
                         />
                     </View>
             </Modal>
         </View>
      );
    }


    const styles = StyleSheet.create({

    testPicker: {
        backgroundColor: 'gray',
        position: 'absolute',
        width: 112,
        height: 200,
        left: 100,
        top: 160
      },
    icon: {
        flex: 1,
        backgroundColor: '#00529F', 
        marginRight: 0, 
        borderRadius: 5
    },
    description: {
        flex: 2,
        height: 17,
        backgroundColor: 'transparent', 
        marginRight: 0, 
        borderRadius: 5
    },

  });

  export default CustomPickerRow;

To invoke the component:

<CustomPickerRow id='shapePicker' icon='2' title='Shape:' data={shapeItems} action={setShape} selectedItem={selectedShape} visible={modalVisible} />