I have successfully arranged my images to display one after another, but I want them to be positioned horizontally instead of vertically. I attempted to achieve this by using flexDirection: 'row' and setting scrollview to horizontal, however, the images seem to disappear altogether when applying flexDirection.
Initially, I placed flexDirection in the View at line 60. I also tried wrapping another parent view around it, but encountered the same issue.
If you copy and paste this code into snack.expo.io, you can see exactly what I mean!
Any insights or suggestions are greatly appreciated!
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',
},
});