FocusManager: How to handle screen height change

[RobertArissen]

Hello,

We are playing around with your (promising) SDK for ReactNative. 

But we are stuck at a certain point. We have a Screen, when focusing on the Tile, a View will be hidden and the tiles will go up. But by removing this, it doesn't recalculate the focus locations.

Do you have any ideas on how we can best approach this?

https://user-images.githubusercontent.com/5848806/196452385-692c1900-7d0f-4838-a19e-63cf1ce19ae9.mp4

[RobertArissen]

I have create a small example Component with the same problem

import React, { useState } from 'react';
import { StyleSheet } from 'react-native';

import Pressable from '../components/pressable';
import { View, Text, ScrollView } from '@flexn/sdk';
import Screen from '../components/screen';
import { getScaledValue } from '@rnv/renative';

const styles = StyleSheet.create({
    screenContainer: {
        flex: 1,
        backgroundColor: 'black',
    },

    button: {
        margin: getScaledValue(20),
        borderWidth: getScaledValue(2),
        borderRadius: getScaledValue(25),
        borderColor: '#FFFFFF',
        height: getScaledValue(50),
        width: getScaledValue(200),
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'green',
    },
});

const Example = ({}) => {
    const [redHeight, setRedHeight] = useState(300);

    return (
        <Screen
            style={styles.screenContainer}
            stealFocus={true}
        >
            <View
                onLayout={() => console.log('dd')}
                style={{ height: getScaledValue(redHeight), backgroundColor: 'red' }}
            />
            <Pressable
                style={styles.button}
                onFocus={() => setRedHeight(300)}
            >
                <Text>button</Text>
            </Pressable>

            <ScrollView horizontal>
                <Pressable
                    style={styles.button}
                    onFocus={() => setRedHeight(10)}
                >
                    <Text>button</Text>
                </Pressable>

                <Pressable
                    style={styles.button}
                    focusOptions={{}}
                    onFocus={() => setRedHeight(10)}
                >
                    <Text>button</Text>
                </Pressable>
            </ScrollView>
        </Screen>
    );
};

export default Example;

https://user-images.githubusercontent.com/5848806/196464645-db972893-f348-4a03-9d3e-093e3b38a05c.mp4

[aurimasmi]

@RobertArissen Sorry for the late reply, was focusing to other priorities, but now back and will be working on daily basis. I managed to reproduce the issue, it requires a bit more thinking, but will try to produce a fix in a next few days

[aurimasmi]

@RobertArissen I couldn't resist and quickly played around, can you try version 0.18.0-alpha.9? (did not tested it intensively)

[RobertArissen]

Its works perfect in 0.18.0-alpha.9! (use 0.18.0-alpha.8 before)

[pauliusguzas]

Closing as issue was resolved, feel free to reopen again @RobertArissen