Как сделать формы двух цветов фона, используя flex и transform в реагировать родной

Question

Я пытаюсь создать целевую страницу для мобильного приложения, используя собственную платформу реагирования, я хочу создать фоновый слой, в котором два разных цвета фона на странице с формой, используя преобразование в родной реакции. я не могу делать то же самое. Здесь ниже показано, что я пробовал до сих пор, но это не совсем то, что я хочу создать в соответствии со следующим изображением.

        render() {
            return (
                <View style={LocalStyle.container}>
                    <StatusBar hidden />
                    <View style={{ flex: 0.7, backgroundColor: '#ffffff' }}>
                        <View style={{ height: height * 0.7, width: width,position: 'relative', backgroundColor: '#ffd42d', transform: [{skewY: '-45deg'}, {rotate: '-95deg'}], position: 'relative' }}></View>
                        <View style={{
                            justifyContent: 'center',
                            alignItems: 'center', height: height * 0.7, width: width, position: 'absolute', top: 0, left: 0
                        }} >
                            <Image source={Images.Logo} style={LocalStyle.logoimg} resizeMode="contain" />
                        </View>
                    </View>

                    <View style={{ flex: 0.3, backgroundColor: '#ffffff' }}>
                        <View style={{ height: height * 0.3, width: width*1 ,backgroundColor: '#000', }}></View>
                        <View style={{
                            justifyContent: 'center',
                            alignItems: 'center', height: height * 0.3, width: width, position: 'absolute', top: 0, left: 0
                        }} >
                        </View>
                    </View>
                </View>
            );
        }
    }


**[![Here, i have attached a screenshot which i want to create exactly.][1]][1]**