1

I am building this app with react native, the client want the text container to be exactely positioned and aligned with the blue container, the problem I am facing is that the green part is an actual image and the I cannot simply choose the right width / height so it fit the container.

A very important point here is that the image is on absolute position and I am using the PixelRation API to configure the left/right/top/bottom values.

I attached a screenshot of how it looks on different devices as well as the code implementation. The blue borders are just for demonstration purposes.

What is my last attempt to fix this? The design was originally built for web so it use vh in the css.

<View style={styles.floorHolder}>
    <View style={styles.containerBox}>

        <View style={styles.cropTopArchi}>
        <Image style={{
                    width: PixelRatio.getPixelSizeForLayoutSize(200),
                    height:  PixelRatio.getPixelSizeForLayoutSize(200),
                    resizeMode: 'contain',
                    position: 'absolute',
                    alignSelf: 'baseline',
                    top: PixelRatio.getPixelSizeForLayoutSize(-10),
                    bottom: PixelRatio.getPixelSizeForLayoutSize(0),
                    left: PixelRatio.getPixelSizeForLayoutSize('-40'),
                    right: PixelRatio.getPixelSizeForLayoutSize(0),
                }}
                    source={{ uri: this.state.image }}
                />

            <View style={styles.cropOneArchi} />

            <View style={styles.cropTwoArchi} />

        </View>

        <View style={styles.cropBottomArchi}>

            <View style={styles.cropThreeArchi} />

            <View style={styles.cropFourArchi}>
                <ScrollView
                    style={{
                        width: '100%',
                        height: '100%',
                        backgroundColor: "#f3ebd5",
                    }}
                >
                    <Text style={styles.title}>Architect Gallery</Text>

                    <View style={styles.row}>
                        <View style={{ width: "50%", height: "100%" }}>
                            <Image
                                style={{ width: 100, height: 100, resizeMode: "contain" }}
                                source={require("../assets/img08-2x.png")}
                            />
                        </View>

                        <View style={{ paddingLeft: "5%", width: "50%", height: "100%" }}>
                            <Image
                                style={styles.num2}
                                source={require("../assets/num2.png")}
                            />
                            <Text style={styles.bold}>“Arlyn” Table, 1988</Text>
                            <Text style={styles.bold}>George Nakashima</Text>
                            <Text style={styles.bold}>Redwood, Black Walnut, Madrone Burl</Text>
                        </View>
                    </View>

                    <Text style={styles.primaryText}>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                        enim ad minim veniam, quis nostrud exercitation ullamco laboris
                        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                        reprehenderit in voluptate velit esse cillum dolore eu fugiat
                        nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                        sunt in culpa qui officia deserunt mollit anim id est laborum.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                        enim ad minim veniam, quis nostrud exercitation ullamco laboris
                        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                        reprehenderit in voluptate velit esse cillum dolore eu fugiat
                        nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                        sunt in culpa qui officia deserunt mollit anim id est laborum.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                        enim ad minim veniam, quis nostrud exercitation ullamco laboris
                        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                        reprehenderit in voluptate velit esse cillum dolore eu fugiat
                        nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                        sunt in culpa qui officia deserunt mollit anim id est laborum.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                        enim ad minim veniam, quis nostrud exercitation ullamco laboris
                        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                        reprehenderit in voluptate velit esse cillum dolore eu fugiat
                        nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                        sunt in culpa qui officia deserunt mollit anim id est laborum.
                </Text>
                </ScrollView>
            </View>

        </View>

    </View>
</View>

Styles.js

cropTop: {
        flexDirection: 'row',
        width: '100%',
        height: '20%',
    },
    cropBottom: {
        flexDirection: 'row',
        width: '100%',
        height: '80%',
    },
    cropOne: {
        backgroundColor: '#01e22c',
        width: '30%',
        height:'100%',
        borderColor: 'black',
        borderTopWidth: 5,
        borderLeftWidth : 5,
    },
    cropTwo: {
        backgroundColor: '#01e22c',
        width: '70%',
        height:'100%',
        borderTopWidth: 5,
        borderRightWidth : 5,
        borderBottomWidth : 5,
        marginLeft: -5,
    },
    cropThree: {
        backgroundColor: '#01e22c',
        width: '30%',
        height:'100%',
        borderRightWidth : 5,
        borderBottomWidth : 5,
        borderLeftWidth : 5,
        alignItems: 'flex-end',
        padding: 5
    },
    cropFour: {
        width: '69%',
        height:'100%',
        borderColor: 'transparent',
        borderTopWidth: 5,
        borderLeftWidth : 5,
    },
    cropTopArchi: {
        flexDirection: 'row',
        width: '100%',
        height: '35%',

    },
    cropBottomArchi: {
        flexDirection: 'row',
        width: '100%',
        height: '65%',
    },
    cropOneArchi: {
        backgroundColor: 'transparent',
        width: '30%',
        height:'100%',
        borderColor: 'blue',
        borderTopWidth: 5,
        borderLeftWidth : 5,
    },
    cropTwoArchi: {
        backgroundColor: 'transparent',
        borderColor: 'blue',
        width: '70%',
        height:'100%',
        borderTopWidth: 5,
        borderRightWidth : 5,
        borderBottomWidth : 5,
        marginLeft: -5,
    },
    cropThreeArchi: {
        backgroundColor: 'transparent',
        borderColor: 'blue',
        width: '30%',
        height:'100%',
        borderRightWidth : 5,
        borderBottomWidth : 5,
        borderLeftWidth : 5,
        alignItems: 'flex-end',
        padding: 5
    },
    cropFourArchi: {
        width: '69%',
        height:'100%',
        borderColor: 'transparent',
        borderTopWidth: 5,
        borderLeftWidth : 5,
    },


floorHolder: {
        backgroundColor: "#cdcdcd",
        alignItems: "center",
        justifyContent: "center",
        flex: 1,
    },
containerBox: {
    backgroundColor: "transparent",
    width: "90%",
    height: "85%"
},

Screenshots

screenshots

  • Can you share the code for your View component? And the CSS for the wrappers containerBox and floorWrapper? – Simran Apr 11 at 14:58
  • I added this but I don't think it's very important – blvckasvp Apr 11 at 15:11
  • Container css is very important when it comes to layout. I see many flexbox rules, but nothing has display: flex so it is difficult to see how the existing styles are trying to do. – Simran Apr 11 at 15:26
  • I would take a different approach in such a case... I would let the image fit the entire screen with an absolute position, and then align the "article" container using flex (direction: 'column', justifyContent: 'flex-end', alignItems: 'flex-end') to the bottom of the screen in front of the screen hiding the unneeded part of the image. this way you won't have to mess around with the height and the width, you just set it to be the size of the screen as a "background" image, and the article part can take as much space as it needs. – Samer Murad Apr 11 at 15:26
  • @Simran react-native doesn't have display: flex, it's all flex layout – Samer Murad Apr 11 at 15:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.