I am coding a project using expo react native and I made a horizontal scrollview for images. The images are styled correctly when pixels are used: <Image code... style={{width: 350}}/> However if I try to change the 350 to 35% the image disappears from the screen. I have tried several different ways to fix this problem, like adding a 100% width viewport for the parent class (like seen below), however it still is not working.

Here is the file of code:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Image, ScrollView, Modal, Pressable } from 'react-native';
import tw from 'tailwind-react-native-classnames';
import { useState } from 'react';



export default function ImpEvents() {
    const slides = ['https://patch.com/img/cdn20/users/22844250/20200421/014148/styles/patch_image/public/livingston-highschool-schoolpr___21133742706.jpg', 'https://patch.com/img/cdn/users/22844250/2015/05/raw/20150555523bf088bd6.jpg', 'https://patch.com/img/cdn/users/22821264/2014/08/raw/5400e8ea02f3c.png']

    const [modalVisible1, setModalVisible1] = useState(false);
    const [modalVisible2, setModalVisible2] = useState(false);
    const [modalVisible3, setModalVisible3] = useState(false);



    return (
        <View style={{width: '100%'}}>

            <Modal
                animationType="slide"
                presentationStyle='pageSheet'
                visible={modalVisible1}
                onRequestClose={() => {
                    setModalVisible1(!modalVisible1);
                }}>
                <View style={{ position: 'absolute', backgroundColor: 'grey', top: 10, alignContent: 'center', height: 5, width: '10%', alignSelf: 'center', borderRadius: 10 }}>
                </View>
                <Text style={{ fontSize: 80, alignSelf: 'center' }}>1</Text>
            </Modal>

            <Modal
                animationType="slide"
                presentationStyle='pageSheet'
                visible={modalVisible2}
                onRequestClose={() => {
                    setModalVisible2(!modalVisible2);
                }}>
                <View style={{ position: 'absolute', backgroundColor: 'grey', top: 10, alignContent: 'center', height: 5, width: '10%', alignSelf: 'center', borderRadius: 10 }}>
                </View>
                <Text style={{ fontSize: 80, alignSelf: 'center' }}>2</Text>

            </Modal>

            <Modal
                animationType="slide"
                presentationStyle='pageSheet'
                visible={modalVisible3}
                onRequestClose={() => {
                    setModalVisible3(!modalVisible3);
                }}>
                <View style={{ position: 'absolute', backgroundColor: 'grey', top: 10, alignContent: 'center', height: 5, width: '10%', alignSelf: 'center', borderRadius: 10 }}>
                </View>
                <Text style={{ fontSize: 80, alignSelf: 'center' }}>3</Text>
            </Modal>

            <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}>
                    <Pressable onPress={() => setModalVisible1(true)} style={({ pressed }) => [
                        {
                            opacity: pressed
                                ? '0.5'
                                : '1'
                        },
                    ]}>
                        <Image
                            source={{
                                uri: slides[0]
                            }}
                            style={{ width: "35%", height: 175, borderRadius: 10 }}
                        />
                    </Pressable>
                    <Pressable onPress={() => setModalVisible2(true)} style={({ pressed }) => [
                        {
                            opacity: pressed
                                ? '0.5'
                                : '1'
                        },
                    ]}>
                        <Image
                            source={{
                                uri: slides[1]
                            }}
                            style={{ width: 350, height: 175, borderRadius: 10, marginLeft: 20 }}
                        />
                    </Pressable>
                    <Pressable onPress={() => setModalVisible3(true)} style={({ pressed }) => [
                        {
                            opacity: pressed
                                ? '0.5'
                                : '1'
                        },
                    ]}>
                        <Image
                            source={{
                                uri: slides[2]
                            }}
                            style={{ width: 350, height: 175, borderRadius: 10, marginLeft: 20 }}
                        />
                    </Pressable>

                    <View
                        style={{ width: 50, height: 175, borderRadius: 10, marginLeft: 20 }}
                    />
                </ScrollView >
            </View>
        <View/>
    )
}

So the image at index 0 is not being displayed but the images at indices 1 and 2 are being displayed when I don't use percentages.

Thanks for the help.

CodePudding user response：

If you would like to use % you need to give a parent component width. Or there is another solution which you can get the width of the device in react native. You can achieve it using Dimension as below:

import { Dimensions } from 'react-native';

const ScreenWidth = Dimensions.get('window').width;

So in order to give 90% width of device you can use it like this width: ScreenWidth * 0.9.

CodePudding user response：

It's Happening because Its parent component <Pressable> does not have the width style mentioned if you want to provide dynamic height or width in percentage then you must provide height and width to its parent component.

just give width: "100%" to its parent component and then check and if that does not work check the parent component of the parent component and backtrace it.

CodePudding user response：

The issue with using percentage for width is that it is based on the parent element's width. In this case, the parent element is the ScrollView, and it may not have a defined width, which is why the images are disappearing. To resolve this, you could give the ScrollView a fixed width, or set its flex to 1 and wrap it in a View with a defined width.

Try the following:

<View style={{width: '100%'}}>
  <ScrollView 
    horizontal={true} 
    showsHorizontalScrollIndicator={false} 
    style={{ width: '100%', paddingTop: 7, paddingLeft: 40 }} 
    snapToInterval={370} 
    decelerationRate={0}
  >
    <Pressable onPress={() => setModalVisible1(true)} style={({ pressed }) => [
      {
        opacity: pressed ? '0.5' : '1'
      },
    ]}>
      <Image
        source={{
          uri: slides[0]
        }}
        style={{ width: "35%", height: 175, borderRadius: 10 }}
      />
    </Pressable>
  ...
  </ScrollView>
</View>