CODEWITHSUNDEEP
javascriptreact-nativescrollviewhorizontal-scrolling
Nicolas
Nicolas

Reputation: 35

React Native ScrollView Horizontal

I'm making a system in which there is one horizontal ScrollView. But I don't know why, this scrollView doesn't work.

There is my code:

 <ScrollView
    pagingEnabled={true}
    horizontal={true}
    showsHorizontalScrollIndicator={false}
    style={{
      margin: 10,
    }}
  >
    {brandName.map((element, index) => {
      return (
        <View
          style={{
            display: "flex",
            flexDirection: "row",
            margin: 10,
            left: 10,
          }}
        >
          <Text
            style={{
              borderRadius: 20,
              borderColor: "#ff7b0d",
              borderWidth: 1,
              width: "55%",
              height: "120%",
              backgroundColor: "#ff7b0d",
              color: "#fff",
              textAlign: "center",
            }}
          >
            {element}
          </Text>
          <TouchableOpacity>
            <Text style={{right: 18}}>X</Text>
          </TouchableOpacity>
        </View>
      );
    })}
    <View
      style={{
        display: "flex",
        flexDirection: "row",
        top: 5,
      }}
    >
      <Text
        style={{
          paddingLeft: 10,
          borderRadius: 20,
          borderColor: "#ff7b0d",
          borderWidth: 1,
          backgroundColor: "#ff7b0d",
          color: "#fff",
          paddingHorizontal: 10,
          paddingVertical: 3,
          left: 10,
          width: "60%",
          height: "60%",
        }}
      >
        Trie : {listOfSort}
      </Text>
      <TouchableOpacity>
        <Text style={{paddingVertical: 3, right: 10}}>X</Text>
      </TouchableOpacity>
    </View>
  </ScrollView>

I tried to remove and change some things but nothing change. Could someone explain to me where the problem is? Thanks you in advance I continue by my side!

Upvotes: 0

Views: 1401

Answers (1)

David Scholz
David Scholz

Reputation: 9733

You need to add a flex: 1 to the parent view of your elements. The following adjustment fixes your issue.

<ScrollView
    pagingEnabled={true}
    horizontal={true}
    showsHorizontalScrollIndicator={false}
    style={{
      margin: 10,
    }}
  >
    {brandName.map((element, index) => {
      return (
        <View
          style={{
            flex: 1,
            flexDirection: "row",
            margin: 10,
            left: 10,
          }}
        >
          <Text
            style={{
              borderRadius: 20,
              borderColor: "#ff7b0d",
              borderWidth: 1,
              width: "55%",
              height: "120%",
              backgroundColor: "#ff7b0d",
              color: "#fff",
              textAlign: "center",
            }}
          >
            {element}
          </Text>
          <TouchableOpacity>
            <Text style={{right: 18}}>X</Text>
          </TouchableOpacity>
        </View>
      );
    })}
    <View
      style={{
        flex: 1,
        flexDirection: "row",
        top: 5,
      }}
    >
      <Text
        style={{
          paddingLeft: 10,
          borderRadius: 20,
          borderColor: "#ff7b0d",
          borderWidth: 1,
          backgroundColor: "#ff7b0d",
          color: "#fff",
          paddingHorizontal: 10,
          paddingVertical: 3,
          left: 10,
          width: "60%",
          height: "60%",
        }}
      >
        Trie : {listOfSort}
      </Text>
      <TouchableOpacity>
        <Text style={{paddingVertical: 3, right: 10}}>X</Text>
      </TouchableOpacity>
    </View>
  </ScrollView>

Upvotes: 1

Related Questions