Некорректная работа ExpoPixi.Signature при повороте экрана c помощью ScreenOrientation.lockAsync() react-native

Всем привет, у меня возникла проблема:ExpoPixi.Signature при повороте экрана c помощью ScreenOrientation.lockAsync() работает некорректно, при переходе между двумя скринами происходит поворот экрана , второй экран куда происходит переход предназначен для подписи и центральным его компонентом является ExpoPixi.Signature, в некоторых случаях у меня возникает ошибка продемонстрированная на скрине(1) ниже, только на части поля ExpoPixi.Signature можно рисовать, баг этот происходит только в тех случаях когда ScreenOrientation.getOrientationAsync() первого экрана не совпадает со вторым скрин(2).

кнопка по нажатию на которую экран поворачиваеться и следует переход на второй скрин

<Button
                    onPress={async () => await this.sign()}
                    buttonStyle={{
                        marginVertical: 10,
                        width: sizes.width,
                        backgroundColor: COLORS.PRIMARY,
                        borderRadius: 20
                    }}
                    titleStyle={{ color: COLORS.WHITE, fontFamily: 'nunito' }}
                    title={'Sign'}
                />

Метод

sign = async () => {
        console.log("before",await ScreenOrientation.getOrientationAsync())
        await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
        console.log("after",await ScreenOrientation.getOrientationAsync())
        this.props.navigation.navigate(SIGNATURE_SCREEN_ROUTE);
    };

Код сторого скрина в componentDidMount логируеться значение ScreenOrientation.getOrientationAsync() если оно не совпадает с ScreenOrientation.getOrientationAsync() предидущего скрина в логе "after", то возникает ошибка.

class Signature extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.signature = null;
    }

    clearCanvas = () => {
        this.signature.clear();
    };

    saveCanvas = async () => {
        const signature_result = await
            this.signature.takeSnapshotAsync({
                format: 'jpeg', // 'png' also supported
                quality: 1, // quality 0 for very poor 1 for very good
                result: 'file' //
            });
        const image = await ImageManipulator.manipulateAsync(
            signature_result.uri,
            [],
            { compress: 1, format: ImageManipulator.SaveFormat.JPEG, base64: true }
        );
        this.props.uploadSignature(`data:image/jpeg;base64,${image.base64}`);
    };

    componentWillMount(): void {
        this.props.toggleHeaders();
    }

    async componentDidMount() {
        console.log("Orientention",await ScreenOrientation.getOrientationAsync())
        setTimeout(() => {
            this.forceUpdate();
        }, 100);

    }

    componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS) {
        if (prevProps.signature.success !== this.props.signature.success && this.props.signature.success) {
            //this.props.navigation.navigate(...prettyRoute(MENU_LIST_SCREEN_ROUTE))
        }
    }

    async componentWillUnmount(): void {
        await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
        this.props.toggleHeaders();

    }

    renderAll() {
        const { height, width } = Dimensions.get('window');
        return <View style={{ width: width, height: height, alignItems: 'center', backgroundColor: COLORS.WHITE }}>
            <View style={{
                backgroundColor: COLORS.HEADER, borderBottomColor: COLORS.DIVIDER, borderBottomWidth: 0.5,
                width: '100%', height: 44, justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row', paddingHorizontal: 16
            }}>
                <TouchableOpacity style={{}} onPress={() => this.props.navigation.goBack()}>
                    <Text style={{ fontSize: 24, color: COLORS.GREY }}>Cancel</Text>
                </TouchableOpacity>
                <TouchableOpacity style={{}} onPress={() => this.clearCanvas()}>
                    <Text style={{ fontSize: 24, color: COLORS.GREY }}>Clear</Text>
                </TouchableOpacity>
            </View>
            <ExpoPixi.Signature
                ref={ref => (this.signature = ref)}
                style={{ width: '100%', height: '80%', backgroundColor: COLORS.WHITE }}
                strokeColor={'black'}
                strokeAlpha={5}
            />
            <Button
                onPress={() => this.saveCanvas()}
                buttonStyle={{
                    width: sizes.width / 2 - 5,
                    backgroundColor: COLORS.PRIMARY,
                    borderRadius: 20
                }}
                containerStyle={{ paddingVertical: 10 }}
                titleStyle={{ color: COLORS.WHITE, fontFamily: 'nunito' }}
                title={'Save'}
                loading={this.props.signature.pending}
            />
        </View>
    }

    render() {
        return this.renderAll()
        return (
            Platform.OS === 'ios' ? this.renderAll() : <SafeAreaView style={mainStyles.wrapper}>{this.renderAll()}</SafeAreaView>
        );
    }
}