CODEWITHSUNDEEP
javascriptreactjsreact-native
Mohammed Saqeeb
Mohammed Saqeeb

Reputation: 35

How to use flex-wrap inside the ScrollView in React-native

I can't able to use flexWrap property inside the ScrollView container.

My code looks like this

function Home({ navigation }) {
  return (
    <View style={styles.container}>
      <ScrollView style={styles.scrollContainer}>
        <LayoutButton
          navigation={navigation}
          title={"go to setting"}
          path="Setting"
        />
        <LayoutButton
          navigation={navigation}
          title={"go to setting"}
          path="Setting"
        />
        <LayoutButton
          navigation={navigation}
          title={"go to setting"}
          path="Setting"
        />
        <LayoutButton
          navigation={navigation}
          title={"go to setting"}
          path="Setting"
        />
        
      </ScrollView>
      <StatusBar style="auto" />
    </View>
  );
}

and styles for this is

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    flexWrap: "wrap",
  },
  scrollContainer: {
    backgroundColor: "#B7C3F3",
    width: "100%",
    flexWrap: "wrap",
  },
});

I don't know whether the flex works under the ScrollView or not. I am new to the native please help me with this problem and thanks in advance

Upvotes: 3

Views: 1155

Answers (1)

O2K
O2K

Reputation: 46

To use the flexWrap property inside a ScrollView container in React Native, you need to make sure that the ScrollView container has a fixed height. This is because ScrollView containers have a default height of "auto" which does not allow the flexWrap property to work.

To fix this, you can add a height property to the styles for the ScrollView container, and set it to a fixed value. For example:

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
flexWrap: "wrap",
},
scrollContainer: {
backgroundColor: "#B7C3F3",
width: "100%",
flexWrap: "wrap",
height: "100%", // Add a height property with a fixed value
},
});

Upvotes: 1

Related Questions