Question 224091 in React native Question posted in
The official React Native documentation can be found here.

React native – I cant understand how flex with scrollview works

Im strungling to figure out what is wrong with flex and scrolllview !

I Change the flex value to 2 in headerView and still nothing ,its just does not wanna show up ,then i try to change to the cardsView and still nothing!

Also i try to change the image flex:1 or 0.5 and nothing just destorying my UI but when i put per centage values its ok…..What its going on??!!

Im literally spending 6 hours to figure this out !

//React
import { useEffect } from 'react';
import { StyleSheet, 
  View ,
  Text, 
  ScrollView, 
  Image,
  Button, 
  Pressable,
  SafeAreaView} from 'react-native';
//Expo
import { StatusBar } from 'expo-status-bar';
// Import vector icons
import Icon from 'react-native-vector-icons/Ionicons';
//Array of Items
const allComponents = [
  { name: 'Coffe', imageURL : require('../Assets/coffe.jpg') },
  { name: 'Cinema', imageURL : require('../Assets/cinema.jpg') },
  { name: 'Football', imageURL : require('../Assets/football.jpg') },
  { name: 'Gym', imageURL : require('../Assets/gym.jpg') },
  { name: 'Coffe', imageURL : require('../Assets/coffe.jpg') },
  { name: 'Cinema', imageURL : require('../Assets/cinema.jpg') },
  { name: 'Football', imageURL : require('../Assets/football.jpg') },
  { name: 'Gym', imageURL : require('../Assets/gym.jpg') },
];



export default function Home() {

  //Fetching Users
  // useEffect(()=>{
  //   ...
  // },[],[])

  return (
   
   
      <View style={styles.home}>

          <View style={styles.headerView}>
            <Text>Welcome {allComponents[1].name}</Text>
            <Image 
              source = {allComponents[1].imageURL}
              style={styles.avatarImage}
             />
            <Icon name="notifications" size={20} color="black" />
          </View>

        
          <ScrollView>
          {allComponents.map((allComponent,index)=>{
          return (
            <View style={styles.cardsView} key={index}>
              <Pressable onPress={console.log("Noice")}>
                <Image 
                  source = {allComponent.imageURL}
                  style={styles.cardImage}
                />
                <Text style={styles.cardText}>{allComponent.name}</Text>
             </Pressable>
            </View>
          )})}
          </ScrollView>

      </View>
    
  );
}

const styles = StyleSheet.create({
  //Layouts
  home:{
    flex:1,
    flexWrap:'wrap',
    overflow:'hidden',
    backgroundColor: 'ghostwhite',
  },
  headerView: {
    flex:1,
    display:'flex',
    flexDirection:'row',
    justifyContent:'flex-end',
    alignItems:'center',
    backgroundColor: 'red',
  },
  cardsView:{
    flex:1,
    display:'flex',
    alignItems:'center',
    justifyContent:'center',
    textAlign:'center',
    backgroundColor: 'ghostwhite',
    margin:'2%'
  },
  //Images
  cardImage:{
    width:'100%',
    height:'100%',
    aspectRatio:'3',
    borderRadius:10,
  },
  avatarImage:{
    width:'6%',
    height:'15%',
    margin:'2%',
    borderRadius:30,
    borderColor:'ghostwhite',
  },
  //Text
  cardText:{
    position:'absolute',
    textAlign:'center',
    fontFamily:'notoserif',
    fontWeight:'bold',
    fontSize:15,
    bottom:10,
    left:0,
    right:0,
    color:'ghostwhite'
  }
});

enter image description here

Tags:

2

Answers


  1. 0

    Set the headerView style flex value to 0, this will guarantee that the view will get the size it requires.

    Example:

    //React
import {
  StyleSheet,
  View,
  Text,
  ScrollView,
  Image,
  Pressable,
} from 'react-native';
//Expo
import Icon from 'react-native-vector-icons/Ionicons';
//Array of Items
const allComponents = Array(10).fill({
  name: 'Coffe',
  imageURL: require('./assets/snack-icon.png'),
});

export default function Home() {
  //Fetching Users
  // useEffect(()=>{
  //   ...
  // },[],[])

  return (
    <View style={styles.home}>
      <View style={styles.headerView}>
        <Text>Welcome {allComponents[1].name}</Text>
        <Image source={allComponents[1].imageURL} style={styles.avatarImage} />
        <Icon name="notifications" size={20} color="black" />
      </View>
      <View style={{ flex: 1 }}>{/*You have to wrap the scrollview*/}
        <ScrollView contentContainerStyle={{ flexGrow: 0 }}>
          {/*You have to set flexGrow to "0"*/}
          <View>
            {allComponents.map((allComponent, index) => {
              return (
                <View style={styles.cardsView} key={index}>
                  <Pressable onPress={console.log('Noice')}>
                    <Image
                      source={allComponent.imageURL}
                      style={styles.cardImage}
                    />
                    <Text style={styles.cardText}>{allComponent.name}</Text>
                  </Pressable>
                </View>
              );
            })}
          </View>
        </ScrollView>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  //Layouts
  home: {
    width: '100%',
    height: '100%',
    backgroundColor: 'red',
  },
  headerView: {
    flex: 2,
    justifyContent: 'center',
    backgroundColor: 'green',
  },
  cardsView: {
    flex: 1,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center',
    backgroundColor: 'ghostwhite',
    margin: '2%',
  },
  //Images
  cardImage: {
    width: '100%',
    height: '100%',
    aspectRatio: '3',
    borderRadius: 10,
  },
  avatarImage: {
    width: '60%',
    margin: '2%',
    borderRadius: 30,
    borderColor: 'ghostwhite',
  },
  //Text
  cardText: {
    position: 'absolute',
    textAlign: 'center',
    fontFamily: 'notoserif',
    fontWeight: 'bold',
    fontSize: 15,
    bottom: 10,
    left: 0,
    right: 0,
    color: 'ghostwhite',
  },
});
    Login or Signup to reply.
  2. 0

    You can try this. I think this should work for you.

    //React
import { useEffect } from 'react';
import { StyleSheet, 
  View ,
  Text, 
  ScrollView,
  SafeAreaView, 
  Image,
  Button, 
  Pressable,
  SafeAreaView} from 'react-native';
//Expo
import { StatusBar } from 'expo-status-bar';
// Import vector icons
import Icon from 'react-native-vector-icons/Ionicons';
//Array of Items
const allComponents = [
  { name: 'Coffe', imageURL : require('../Assets/coffe.jpg') },
  { name: 'Cinema', imageURL : require('../Assets/cinema.jpg') },
  { name: 'Football', imageURL : require('../Assets/football.jpg') },
  { name: 'Gym', imageURL : require('../Assets/gym.jpg') },
  { name: 'Coffe', imageURL : require('../Assets/coffe.jpg') },
  { name: 'Cinema', imageURL : require('../Assets/cinema.jpg') },
  { name: 'Football', imageURL : require('../Assets/football.jpg') },
  { name: 'Gym', imageURL : require('../Assets/gym.jpg') },
];

export default function Home() {
 
  return (
   
   
      <SafeAreaView style={{flex:1}}>
        <View style={styles.home}>

            <View style={styles.headerView}>
              <Text>Welcome {allComponents[1].name}</Text>
              <Image 
                source = {allComponents[1].imageURL}
                style={styles.avatarImage}
              />
              <Icon name="notifications" size={20} color="black" />
            </View>

            <ScrollView style={{flex:1}}>
              {allComponents.map((allComponent,index)=>{
              return (
                <View style={styles.cardsView} key={index}>
                  <Pressable onPress={console.log("Noice")}>
                    <Image 
                      source = {allComponent.imageURL}
                      style={styles.cardImage}
                    />
                    <Text style={styles.cardText}>{allComponent.name}</Text>
                </Pressable>
                </View>
              )})}
            </ScrollView>
            
        </View>
      </SafeAreaView>
    
  );
}

const styles = StyleSheet.create({
  //Layouts
  home:{
    flex:1,
    backgroundColor: 'ghostwhite',
  },
  headerView: {
    width:'100%',
    display:'flex',
    flexDirection:'row',
    justifyContent:'flex-end',
    alignItems:'center',
    backgroundColor: 'red',
  },
  cardsView:{
    flex:1,
    display:'flex',
    alignItems:'center',
    justifyContent:'center',
    textAlign:'center',
    backgroundColor: 'ghostwhite',
    margin:'2%'
  },
  //Images
  cardImage:{
    width:'100%',
    height:'100%',
    aspectRatio:'3',
    borderRadius:10,
  },
  avatarImage:{
    width:'6%',
    height:'15%',
    margin:'2%',
    borderRadius:30,
    borderColor:'ghostwhite',
  },
  //Text
  cardText:{
    position:'absolute',
    textAlign:'center',
    fontFamily:'notoserif',
    fontWeight:'bold',
    fontSize:15,
    bottom:10,
    left:0,
    right:0,
    color:'ghostwhite'
  }
});

    if you want add custom header size then use height into headerview style

    headerView: {
    width:'100%',
    height:'10%',
    display:'flex',
    flexDirection:'row',
    justifyContent:'flex-end',
    alignItems:'center',
    backgroundColor: 'red',
  },

    like this

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search