[IOS]Accessibility issue: Voice over read out order for flatlist is incorrect

Description: Voice over read out for Items which are rendered using flatlist is not in right order. issue can be reproduced only in IOS and in android it works fine. I have multiple interactive elements within column. imagine columns containing favorite icon, image, multiline text and add button. Expected behavior: it should first read out favorite icon, image, multiline text and add button from column 1 and then the same from 2nd column. Actual behavior: currently it is reading following order favorite icon (column 1 ) --> favorite icon (column 2) --> image (column 1 ) --> image(column 2)—> multiline text (column 1 ) --> multiline text(column 2) --> add button(column 1) --> add button(column 2)

I tried this for simple demo and issue is easily reproducible.

Please provide a clear and concise description of what the bug is. Include screenshots if needed.
Please test using the latest React Native release to make sure your issue has not already been fixed: https://reactnative.dev/docs/upgrading.html

React Native version:
Run `react-native info` in your terminal and copy the results here.
   System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 7.10 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.13.0 - /usr/local/bin/node
    npm: 6.4.1 - /usr/local/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
  IDEs:
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5 
  npmGlobalPackages:
    create-react-native-app: 2.0.2
    react-native-cli: 2.0.1 

## Steps To Reproduce

    Provide a detailed list of steps that reproduce the issue.
    Issues without reproduction steps or code are likely to stall.


     ```
     import React from 'react';
import {
  StyleSheet,
  View,
  Text,
    Image,
    TouchableOpacity,
    SafeAreaView,
    FlatList,
    Dimensions,
} from 'react-native';

    const data = [
        { key: 'Apple', price:'$1.91 each' },
        { key: 'Organic Bananas, bunch', price:'$2.91/LB' },
        { key: 'Banana Babies', price:'$2.91 avg price' },
        { key: 'meat',price:'$20.91' },
        { key: 'Eggs' , price:'$12.91 avg price'},
        { key: 'Fish' , price:'$7.91 avg price'},
        { key: 'Green Apples', price:'$9.91 avg price' },
        { key: 'fresh fruits', price:'$6.91 avg price'},
        { key: 'Ice cream', price:'$2.91 avg price' }
    ];

    const numColumns=2;
class App extends React.Component{
    renderItem=({item,index})=>{
        return(
            <View style={styles.item}>
                <TouchableOpacity
                    style={styles.button}
                    onPress={this.onPress}
                     accessible={false}
                >
                    <Text style={styles.itemText1}>Rollback</Text>
                </TouchableOpacity>
                <View accessible={true}
                      accessibilityLabel="This is Demo Image">
                    <Image
                        style={{width: 75, height: 75}}
                        source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}/>
                </View>

                <Text  style={styles.itemText}>{item.key}</Text>
                <TouchableOpacity>
                    <Text style = {styles.button}>
                        ADD
                    </Text>
                </TouchableOpacity>
                <Text style={styles.itemText}>{item.price}</Text>
            </View>
        )
    };
    render(){
        return(
            <SafeAreaView style={styles.container1}>
            <FlatList
                data={data}
                style={styles.container}
                renderItem={this.renderItem}
                numColumns={numColumns}
            />
            </SafeAreaView>
        );
    }
}

const styles = StyleSheet.create({
  container: {
      flex:1,
      marginVertical:20,
  },
    container1: {
        flex: 1,
    },
  item: {
      backgroundColor:"grey",
      alignItems:'center',
      justifyContent:'center',
      flex:1,
      margin:1,
      height:Dimensions.get('window').width/numColumns,
  },
  itemText: {
    color:'#fff',
      paddingTop:5,
  },
    itemText1: {
       flexDirection:'row',
        color:'red',
        paddingBottom:4,
        justifyContent:'flex-end'
    },
    imageThumbnail: {
        justifyContent: 'center',
        alignItems: 'center',
        height: 100,
    },
    button: {
        backgroundColor: '#DDDDDD',
        margin:4
    },
});

export default App;

Expected Results

Describe what you expected to happen.
it should first read out favorite icon, image, multiline text and add button from  column 1 and 
then the same from 2nd column. 

[felire]

Same issue here

[RichardStolp]

Hi, A project for a company I currently work with is having the same issue as well. Is there an update for this issue? Thank you.