flexDirection is causing images to disappear

Question

so I have my images displaying one after another like I want them to. Instead of them being vertical though, I would like them to display horizontally. Originally, I was trying to use flexDirection: 'row' while then setting scrollview to horizontal to achieve this but flexDirection seems to make the images disappear all together.

I was putting flexDirection in the View at line 60. I also tried creating another parent view to hold flexDirection but that gave me the same result.

Please copy and paste this into snack.expo.io to see exactly what I am referring to!

Thank you for any insight at all!

import React, { useState } from 'react';
import {
  Pressable,
  StyleSheet,
  Text,
  View,
  useWindowDimensions,
  Dimensions,
  Image,
  Animated,
  PanResponder,
  TouchableOpacity,
  ScrollView,
  ImageBackground,
  Platform,
} from 'react-native';
import { SearchBar } from 'react-native-elements';

import {
  scale,
  verticalScale,
  moderateScale,
  ScaledSheet,
} from 'react-native-size-matters';

import { MaterialCommunityIcons } from '@expo/vector-icons';

const screenResolutions = () => {
  var SCREEN_HEIGHT = useWindowDimensions().width;
  var SCREEN_WIDTH = useWindowDimensions().height;
};

const images = [
  { id: '1', uri: require('./assets/snack-icon.png'), text: 'Test' },
  { id: '2', uri: require('./assets/snack-icon.png') /*text: "Test"*/ },
  { id: '3', uri: require('./assets/snack-icon.png') /*text: "Test"*/ },
  { id: '4', uri: require('./assets/snack-icon.png') /*text: "Test"*/ },
];

const pressableTest = () => {
  let textlog = '';
  const [state, setState] = useState(0);
};

export default class Home extends React.Component {
  renderImages = () => {
    return images.map((item, i) => {
      return (
        <View
          style={{
            paddingLeft: scale(10),
            paddingRight: scale(10),
            paddingBottom: scale(15),
          }}>
          <TouchableOpacity
            onPress={() => this.props.navigation.navigate('VenueDetails')}>
            <ImageBackground
              source={item.uri}
              style={{
                width: '100%',
                height: scale(225),
                shadowColor: '#000',
                shadowOffset: { width: 1, height: 4 },
                shadowOpacity: 1,
              }}
              imageStyle={{ borderRadius: 10 }}>
              <View
                style={{
                  position: 'absolute',
                  bottom: 10,
                  left: 10,
                  justifyContent: 'flex-start',
                  alignItems: 'flex-start',
                }}>
                <Text style={styles.name}>Name</Text>
                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                  <Text style={styles.category}>Category</Text>
                  <Text style={styles.dot}>⬤</Text>
                  <Text style={styles.money}>$$</Text>
                  <Text style={styles.dot}>⬤</Text>
                  <Text style={styles.starRating}>★★★</Text>
                </View>
              </View>
            </ImageBackground>
          </TouchableOpacity>
        </View>
      );
    });
  };

  state = {
    search: '',
  };

  updateSearch = (search) => {
    this.setState({ search });
  };

  render() {
    const { search } = this.state;

    return (
      <ScrollView
        style={{ flex: 1, backgroundColor: '#272933', horizontal: 'true' }}>
        <View style={{ flex: 1, marginTop: 15 }}>{this.renderImages()}</View>
      </ScrollView>
    );
  }
}

const styles = ScaledSheet.create({
  starRating: {
    color: 'white',
    fontSize: '20@s',
    textShadowOffset: { width: 2, height: 2 },
    textShadowRadius: 2,
    textShadowColor: '#000',
  },

  category: {
    color: 'white',
    fontSize: '20@s',
    textShadowOffset: { width: 2, height: 2 },
    textShadowRadius: 2,
    textShadowColor: '#000',
  },
  name: {
    fontWeight: 'bold',
    color: 'white',
    fontSize: '25@s',
    textShadowOffset: { width: 2, height: 2 },
    textShadowRadius: 2,
    textShadowColor: '#000',
  },
  dot: {
    color: 'white',
    fontSize: '5@s',
    paddingLeft: '5@s',
    paddingRight: '5@s',
    textShadowOffset: { width: 2, height: 2 },
    textShadowRadius: 2,
    textShadowColor: '#000',
  },
  money: {
    color: 'white',
    fontSize: '20@s',
  },

});

Answer 1

i dont use react , but your image view ( the one you return from render images ) should have a width or a flex-basis prop , and you container (scrollview > view) should have display : flex and width of 100vw

i made it work : here

.flex-box {
 width : 100vw ; // or %
 display : flex ;
 overflow-x : scroll ;
 flex-wrap : no-wrap ;
}
.flex-item {
 width : 200px ; // or % or flex-basis with no shrink or min-width
}

Edit : i changed to no-wrap and fixed width instead of basis to make it scrollable horizentally .

if a container is set to 100% flex no-wrap , and its children have a fixed width they will overflow horizontally in web we simply put overflow-x : scroll ; to make it scrollable and view all overflowed items .