CODEWITHSUNDEEP
cssreact-nativeflexbox
Strayer
Strayer

Reputation: 3120

How can I mix fixed and dynamic size elements in a flexbox container?

I'm trying to create a layout that utilizes flexbox' automatic sizing but also contains fixed-size items:

<View style={{ height: 70, alignItems: "center" }}>
    <Text style={{ flex: 1, textAlign: "right", paddingRight: 10 }}>left text</Text>
    <Image style={{ width: 70, height: 70 }} src={require('./img.png')} />
    <Text style={{ flex: 1, textAlign: "left", paddingLeft: 10 }}>right text</Text>
</View>

I want the image to be centered in the UI and have the text views equally take the remaining width. The actual result is that one of the text views is larger than the other as if the rendering doesn't take the width of the image view into account.

Upvotes: 3

Views: 1908

Answers (1)

Strayer
Strayer

Reputation: 3120

Finally found the correct way of doing this. To have fixed size items in a flex layout one shouldn't use width/height but flex: 0 and flexBasis. This approach initially didn't work for me because a component wrapping my component wasn't sized correctly and messed with the flex rendering. flexBasis seems to be density-independent pixels when it is set to an absolute number.

Proof of concept on expo.io

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  render() {
    return (
      <View>
        <Text>Test</Text>
        <View style={styles.container}>
          <Text style={styles.text1}>{"Left\nText"}</Text>
          <View style={styles.view} />
          <Text style={styles.text2}>Test</Text>
        </View>
        <View style={styles.container}>
          <Text style={styles.text1}>{"Left\nText"}</Text>
          <View style={styles.view} />
          <Text style={styles.text2}>Test</Text>
        </View>
        <View style={styles.container}>
          <Text style={styles.text1}>{"Left\nText"}</Text>
          <View style={styles.view} />
          <Text style={styles.text2}>Test</Text>
        </View>
        <Text>Test</Text>
        <View style={styles.container}>
          <Text style={styles.text1}>{"Left\nText"}</Text>
          <View style={styles.view} />
          <Text style={styles.text2}>Test</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  view: {
    flex: 0,
    flexBasis: 50,
    height: 50,
    backgroundColor: "red",
  },
  text1: {
    flex: 1,
    textAlign: "right",
    paddingRight: 10,
  },
  text2: {
    flex: 1,
    textAlign: "left",
    paddingLeft: 10,
  }
});

Upvotes: 5

Related Questions