While working on my project using expo react native, I encountered an issue with a horizontal scrollview for images. When I style the images using pixels like this:
<Image code... style={{width: 350}}/>35% - the image disappears from the screen. I've tried various solutions to fix this problem, including adding a 100% width viewport for the parent class as shown below, but it still doesn't seem to work.
Here is the snippet of the code:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Image, ScrollView, Modal, Pressable } from 'react-native';
tw from 'tailwind-react-native-classnames';
import React, { useState } from 'react';
export default function ImpEvents() {
const slides = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
const [modalVisible1, setModalVisible1] = useState(false);
// Additional modal states and functions
return (
<View style={{width: '100%'}}>
// Modals and their setup
<Text style={{ left: 40, fontFamily: 'OpenSans_700Bold', marginTop: '70%', fontSize: 25, color: "#3D3D3D" }}>Important Information</Text>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={{ paddingTop: 7, paddingLeft: 40 }} snapToInterval={370} decelerationRate={0}>
// Pressables and images
</ScrollView >
</View>
<View/>
)
}
The issue arises when trying to display the image at index 0 while using percentages, whereas images at indices 1 and 2 are displayed correctly without using percentages.
Your assistance in resolving this matter would be greatly appreciated.