CODEWITHSUNDEEP
iosreact-nativelayoutflexbox
Ed Brissenden
Ed Brissenden

Reputation: 309

Flexible layout with fixed-width and available space in React Native

I'm trying to achieve a specific layout in React Native for iOS. I'll explain the layout, and I have added an image and links to demonstrate it.

Left

The left area (in red) should contain 2 items; a Title and a Tag. Both items should appear on the same line.

Right

The right area (in yellow) has a fixed width.

I have created the layout successfully using CSS at CodePen here: https://codepen.io/madebyew/pen/VwwPaWZ

.row {
  display: flex;
  align-items: center;
  width: 600px;
}
.left {
  width: 80%;
  display: flex;
}
.right {
  width: 20%;
}
.title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.tag {
  white-space: nowrap;
}

CSS

I have tried to recreate the same layout using React Native, but without success, here: https://snack.expo.io/@madebyew/flex-alignment

enter image description here

The issue I am facing is that in React Native, the Title only truncates to fit itself in its parent, instead of truncating to allow its Tag single to share its parent's space.

Does anyone know how to achieve the desired layout? Thanks in advance.

Upvotes: 1

Views: 1091

Answers (2)

Author
Author

Reputation: 455

    render() {
    return (
        <View style = {{width: '100%', flex: 1, alignItems: 'center', justifyContent: 'center',}}>
            <View style = {{width: '100%', height: 50, flexDirection: 'row'}}>
                <View style = {{flex: 1, flexDirection: 'row'}}>
                    <View style = {{flex: 1, paddingHorizontal: 10, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: 'blue'}}>
                        <Text numberOfLines = {1}>ssdflk dfjljsd  sdfj sdfkjs df jlskdf </Text>
                    </View>
                    <View style = {{flexDirection: 'column', alignItems: 'center', justifyContent: 'center', paddingHorizontal: 20, backgroundColor: 'red'}}>
                        <Text>Tags</Text>
                    </View>
                </View>
                <View style = {{width: 80, flexDirection: 'column', backgroundColor: 'yellow', alignItems: 'center', justifyContent: 'center',}}>
                    <Text>Right</Text>
                </View>
            </View>
        </View>
    );
}

I tried this code, looks working for your idea

Upvotes: 0

B. Mohammad
B. Mohammad

Reputation: 2464

I have added some flex look at this:

https://snack.expo.io/Bk8GFDjKH

Upvotes: 1

Related Questions