Focus/Blur event order test for react-native-tvos #1133

FocusOrderTest.js

import React, {useState} from 'react';
import {Pressable, Text, View} from 'react-native';

let seq = 0;

export default function FocusOrderTest() {
  const [log, setLog] = useState([]);
  const add = s => {
    const line = `[FocusOrder] #${++seq} ${s}`;
    console.log(line);
    setLog(prev => [line, ...prev].slice(0, 20));
  };
  const btn = title => (
    <Pressable
      onFocus={() => add(`Focus: ${title}`)}
      onBlur={() => add(`Blur:  ${title}`)}
      style={({focused}) => ({
        padding: 10,
        margin: 4,
        borderRadius: 6,
        backgroundColor: focused ? '#2563eb' : '#334155',
      })}>
      <Text style={{color: '#fff', fontSize: 13}}>{title}</Text>
    </Pressable>
  );
  return (
    <View style={{flex: 1, padding: 16}}>
      <View style={{flexDirection: 'row'}}>{btn('A')}{btn('B')}</View>
      {log.map((l, i) => (
        <Text key={i} style={{fontFamily: 'Menlo', fontSize: 11}}>{l}</Text>
      ))}
    </View>
  );
}