CODEWITHSUNDEEP
cssimagereact-nativeflexbox
Brian Var
Brian Var

Reputation: 6227

How to distribute Image and child elements evenly using flex box?

I'm adding an Image and a number of text inputs (FloatLabelTextInput) to a <View> within a react-native app. So far I'm not having much luck spacing the image and text inputs evenly on the y-axis with the flex property. As the image is displayed too small in height and the remaining FloatLabelTextInput take up too much height on the y-axis.

I've tested and mocked up the app's view in the Expo react-native sandbox for reference here with the same CSS I use:

I did try setting the flex attribute as a fraction of the overall flex also, but this doesn't adjust the width or height of the element spacing in the view.

Question:

How can you distribute Image and child elements evenly using flex box?

Proposed Layout: (This is the layout I'm aiming for, Image takes up full View width and 40% height displaying full image, while three TextInputs below the Image take up a further 40% with heights of 20px)

enter image description here

What is rendered: (This is what is rendered with this layout style, Image takes up about 10% of View and is cut off. While remaining three TextInputs take up about 50% of View and about 50px in height each which is too high for this layout.

enter image description here

View style definition:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:"column",
    //alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: '#ecf0f1'
  },
  image: {
    flex: 2/4,
    resizeMode: 'contain',
    width: 800,
    height: 800,
  },
  floatLabelTextInput: {
    flex: 2/4,
    padding: 8,
  },
});

Upvotes: 2

Views: 1111

Answers (2)

Ricky Dam
Ricky Dam

Reputation: 1895

I'm not quite sure I get what you're trying to achieve here, but looking at that 2/4 image and 2/4 textinput, and from this line So far I'm not having much luck spacing the image and text inputs evenly on the y-axis I believe you want the image taking up 50% of the row and the 3 textinput to collectively take up the rest of the 50%.

You can import Dimensions from react-native and do
const ScreenWidth = Dimensions.get('window').width;
and then use maxWidth to prevent the image from being too big

Here is the SnackExpo for my code. https://snack.expo.io/HJXemkUXM

Maybe you could do a quick sketch on paint or something to show us what you want where and how you want it to look.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    // alignItems: 'center',
    // justifyContent: 'space-between',
    backgroundColor: 'lightgreen',
    maxWidth: ScreenWidth,
    paddingTop: 25,
  },
  image: {
    maxWidth: ScreenWidth*0.50,
    height: 200,
    // flex: 2/4,
    // resizeMode: 'contain',
    // width: 800,
    // height: 800,
  },
  floatLabelTextInput: {
    // flex: 2/4,
    // padding: 8,
  },
});

Upvotes: 1

Ian Mundy
Ian Mundy

Reputation: 376

It looks like the source of react-native-floating-label-test-input applies the style props you're passing in to the TextInput it maintains which is going to behave differently than if the flex property had been applied to the outer container View.

I'm guessing that you don't actually want the TextInput to be that size though since it would result in the inputs being identically sized to the image. If I were working on this, I would probably give my inputs a fixed height and then apply a flex style to the Image. Or If I knew the size of the image I may also give it a fixed size.

Edit: It's also worth noting that the View container from that package does have flex: 1 set which is going to cause some headaches probably unless you nest them in your own View where you control the height and/or flex.

Upvotes: 2

Related Questions