Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React native two column layout for dynamic elements not working

Multiple View elements with image inside need to be displayed in two column layout.

I am using following code (basically, getting dimension(x) of window and setting View width = x/2).

Parent container is flex: row.

But this does not seem to be working. I am getting only one image in a row instead of two like shown in image. What I am doing wrong?

const window = Dimensions.get('window');
const imageWidth = (window.width/3)+30;
const imageHeight = window.width/3;
export default class Brochures extends Component {
  render() {
    const brochuresView = brochuresData.map( Brochure );
    return (
      <ScrollView style={styles.container}>
        {brochuresView}
      </ScrollView>
    );
  }
}

const Brochure = ( data ) => {
  const {child, image} = styles;
  return (
    <View key={data.id} style={child}>
      <Image
        style={image}
        source={{uri: data.url}}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  child: {
    width: window.width/2,
    alignItems: 'center',
    height: imageHeight+5,
    marginTop: 10
  },
  image: {
    width: imageWidth,
    height: imageHeight
  }
});

Wrong layout

like image 256
john doe Avatar asked Jan 19 '17 14:01

john doe


1 Answers

ScrollView takes a contentContainerStyle prop vs the normal style prop that will describe the styling.

From the docs:

These styles will be applied to the scroll view content container which wraps all of the child views. Example:

return ( <ScrollView contentContainerStyle={styles.contentContainer}> </ScrollView> ); ... const styles = StyleSheet.create({ contentContainer: { paddingVertical: 20 } });

So basically the only change you need with your code will be this:

<ScrollView contentContainerStyle={styles.container}>

vs this:

<ScrollView style={styles.container}>
like image 128
Nader Dabit Avatar answered Sep 26 '22 16:09

Nader Dabit