Flex dynamically when orientation changes (flip device)

Question

I'm not ready to lock my app in portrait mode yet, not until I'm sure we can't figure this out.

There once was a container called SwipeListView. It's a third party package, if you don't know it you can check this snack: react-native-swipe-list-view. It's working, but the back layer of each row doesn't stretch to the full width of the screen when I flip my device (portrait -> landscape)

The list item itself stretches fine, but the back layer (with the buttons) sticks to its' original width.
Here's the SwipeListView with it's renderItem for the item data and renderHiddenItem for the back layer for each row:

<SafeAreaView style={{flex:1}}>
    <SwipeListView
        keyExtractor={Child.keyExtractor}
        data={this.props.children}
        renderItem={(itemInfo, rowMap) => {
            return <ChildListItem child={itemInfo.item}
                onPress={() => console.log("Row pressed: ", itemInfo)} />
        }}
        renderHiddenItem={(itemInfo, rowMap) => {
            return <ChildListHiddenItem child={itemInfo.item}
                onEdit={() => this.props.openEditChildDialog(true, itemInfo.item.id)}
                onDelete={() => this.props.openDeleteChildDialog(true)} />
        }}
        onRowDidOpen={rowKey => console.log(`Row with key ${rowKey} openend`)}
        leftOpenValue={75}
        rightOpenValue={-75}
        previewRowKey={'0'}
        previewOpenValue={-40}
        previewOpenDelay={3000}
    />
</SafeAreaView>

For the sake of the length, I'm going to spare you the ChildListItem. This is the ChildListHiddenItem:

class CChildListHiddenItem
extends Component<IChildListHiddenItemProps>
implements ComponentLifecycle<IChildListHiddenItemProps, {}> {
    shouldComponentUpdate(nextProps: Readonly<IStyleState>, nextState: Readonly<IStyleState>, nextContext: any): boolean {
        return this.props.orientation !== nextProps.orientation;
    }

    render() {
        const {
            child,
            style,
            onDelete,
            onEdit,
            ...viewProps
        } = this.props;
        return(

            <LinearGradient
                style={[
                    styles.containers.listHiddenItem,
                    {flexBasis: this.props.dimensions.width}, \\ <----- OVER HERE
                    // orientationAwareStyles.apply.flexBasisFull,
                    style
                ]}
                colors={['red','transparent', 'green']}
                start={{x: 0, y: .5}} end={{x: 1, y: .5}}
                locations={[0.1,0.5,0.9]}
                {...viewProps}
            >
                <Buttons.ListDelete onPress={onDelete} />{/* iconName="user-minus" */}
                <Buttons.ListEdit onPress={onEdit} />{/* iconName="user-edit" */}
            </LinearGradient>
        )
    }
}
const mapStateToChildListHiddenItemProps = ((state:IStore) => {
    return {
        orientation: state.style.orientation,
        dimensions: state.style.dimensions,
    };
});

// @ts-ignore
export const ChildListHiddenItem = connect<IStore>(mapStateToChildListHiddenItemProps, null)(CChildListHiddenItem);

And the StyleSheet property that is applied:

listHiddenItem: {
    flex:1,
    flexDirection: 'row',
    flexBasis: dimWindow.width,
    flexWrap: "nowrap",
    justifyContent: 'space-between',
    height: 50,
},

I'm going to spare you the logic for updating this.props.dimensions too because I have confirmed that this value is updated correctly by placing a breakpoint in the render function.

Any ideas or past experiences?

PS: In case you need it:

Binaries:
Node: 13.9.0 - C:\Program Files\nodejs\node.EXE
npm: 6.13.7 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.6.0.0 AI-192.7142.36.36.6241897
npmPackages:
react: 16.9.0 => 16.9.0
react-native: ^0.61.5 => 0.61.5

Attempt update

<View
    style={[
        styles.containers.listHiddenItem,
        {flexBasis: this.props.dimensions.width},
        // orientationAwareStyles.apply.flexBasisFull,
        style
    ]}
    {...viewProps}
>
    <Buttons.ListDelete onPress={onDelete} />{/* iconName="user-minus" */}
    <LinearGradient
        style={{flex:1, flexGrow:1}}
        colors={['red','transparent', 'green']}
        start={{x: 0, y: .5}} end={{x: 1, y: .5}}
        locations={[0.1,0.5,0.9]}
    />
    <Buttons.ListEdit onPress={onEdit} />{/* iconName="user-edit" */}
</View>

The LinearGradient moved down one level, using flexGrow and flexShrink still doesn't help which proves that it's the container that's not updated with the new flexBasis

Flex dynamically when orientation changes (flip device)

Attempt update

0 Answers0