CODEWITHSUNDEEP
react-native
HarryShotta
HarryShotta

Reputation: 347

ScrollView not rendering elements - no error message

a question from a React-Native noob here:

I am testing out ScrollView in a React-Native app, but the elements inside my ScrollView do not seem to be rendering. If I change ScrollView to View, they render fine. Am I incorrectly using ScrollView?

Thanks in advance.

Here is my code:

import React from 'react';
import {ScrollView, StyleSheet, Text, View, Image } from 'react-native';



const Comp = (props) =>{

// backgroundColor: '#00ff7f', 

return(

<View style={{flex:1, width: 100 + "%", height: 100+"%",  backgroundColor: "#eeeeee"}}>

    <Image source ={require("./Images/Nav.jpg")} style={styles.navBar}></Image>

    <View style={{width: 100+'%', height: '1.5%', backgroundColor: "transparent"}}></View>

    <ScrollView style={{flex:1, width: 100 + "%", height: 88.5+"%", backgroundColor:"transparent"}}>
        <View style={{width: 100 + "%", height: 100+"%"}}>
        <View style={{width: 100+'%', height: '12.5%', backgroundColor: "blue"}}></View>
        <View style={{width: 100+'%', height: '1.5%', backgroundColor: "transparent"}}></View>
        <View style={{width: 100+'%', height: '12.5%', backgroundColor: "#ffffff"}}></View>
        <View style={{width: 100+'%', height: '1.5%', backgroundColor: "transparent"}}></View>
        <View style={{width: 100+'%', height: '12.5%', backgroundColor: "#ffffff"}}></View>
        <View style={{width: 100+'%', height: '1.5%', backgroundColor: "transparent"}}></View>
        <View style={{width: 100+'%', height: '12.5%', backgroundColor: "#ffffff"}}></View>
        <View style={{width: 100+'%', height: '1.5%', backgroundColor: "transparent"}}></View>
        <View style={{width: 100+'%', height: '12.5%', backgroundColor: "#ffffff"}}></View>
        <View style={{width: 100+'%', height: '1.5%', backgroundColor: "transparent"}}></View>
        <View style={{width: 100+'%', height: '12.5%', backgroundColor: "#ffffff"}}></View>
        <View style={{width: 100+'%', height: '1.5%', backgroundColor: "transparent"}}></View>
        <View style={{width: 100+'%', height: '12.5%', backgroundColor: "#ffffff"}}></View>
        <View style={{width: 100+'%', height: '1.5%', backgroundColor: "transparent"}}></View>
        <View style={{width: 100+'%', height: '12.5%', backgroundColor: "#ffffff"}}></View>
        <View style={{width: 100+'%', height: '1.5%', backgroundColor: "transparent"}}></View>
        </View>
   </ScrollView>

 </View>



);

}

const styles = StyleSheet.create({

    navBar:{
        width: 100 + "%",
        height: "10%"


    }

})

export default Comp;

Upvotes: 1

Views: 53

Answers (1)

Benjamin Godlove
Benjamin Godlove

Reputation: 375

Percentages won't work in a ScrollView because it doesn't have a fixed height. That's the nature of a ScrollView. As an aside, I suggest using flexbox instead of percentages. https://facebook.github.io/react-native/docs/flexbox. Something like

<View style={{flex:1, backgroundColor: "#eeeeee"}}>

  <Image source ={require("./assets/icon.png")} style={styles.navBar}></Image>

  <View style={{height: 50, backgroundColor: "red"}}></View>

  <ScrollView style={{flex: 1, backgroundColor: "gray"}}>
      <View style={{height: 100}}>
        <View style={{flex: 25, backgroundColor: "blue"}}></View>
        <View style={{flex: 3, backgroundColor: "transparent"}}></View>
      </View>
      <View style={{height: 100}}>
        <View style={{flex: 25, backgroundColor: "blue"}}></View>
        <View style={{flex: 3, backgroundColor: "transparent"}}></View>
      </View>
      <View style={{height: 100}}>
        <View style={{flex: 25, backgroundColor: "blue"}}></View>
        <View style={{flex: 3, backgroundColor: "transparent"}}></View>
      </View>
 </ScrollView>

</View>

Views within the scrollview still need absolute height because the scrollview itself does not have fixed height.

Upvotes: 1

Related Questions