CODEWITHSUNDEEP
react-native
dimpuW
dimpuW

Reputation: 651

how to make ScrollView horizontal in react native

I am using ScrollView for scrolling the list how can i make it horizontal it is appearing vertical

I also tried wrapping up in different views but its not working

for eg: 

<View>
<ScrollView>
.
.
.
</ScrollView>
<View>

Upvotes: 58

Views: 161658

Answers (8)

HpDev
HpDev

Reputation: 2927

You need to define that you want to active horizontal in ScrollView:

<View>
  <ScrollView
  horizontal={true}
  >
  .
  .
  .
  </ScrollView>
</View>

Upvotes: 130

Mustafa zeb
Mustafa zeb

Reputation: 69

the horizantal scrollview code is just put horizontal={true} in ScrollView

Upvotes: 1

Paresh chavda
Paresh chavda

Reputation: 345

You may want to set the props horizontal and showsHorizontalScrollIndicator

<ScrollView
  horizontal={true}
  showsHorizontalScrollIndicator={false}
  pagingEnabled={true}>
  {/* React Component Goes here */}
</ScrollView>

Upvotes: 19

Umair Khan
Umair Khan

Reputation: 131

   <View style={{flexDirection: 'row'}}>
        <ScrollView
          horizontal={true}
          showsHorizontalScrollIndicator={false}>
          <Text>asdasdasd</Text>
          <Text>asdasdasd</Text>
          <Text>asdasdasd</Text>
          <Text>asdasdasd</Text>
          <Text>asdasdasd</Text>
          <Text>asdasdasd</Text>
          <Text>asdasdasd</Text>
          <Text>asdasdasd</Text>
          <Text>asdasdasd</Text>
          <Text>asdasdasd</Text>
        </ScrollView>
      </View>

Upvotes: 13

Kim Skogsmo
Kim Skogsmo

Reputation: 479

<ScrollView horizontal />

is all you need.

You don't need to write:

<ScrollView horizontal={true} />

because it already is true when you pass the prop in.

Upvotes: 20

kallayya Hiremath
kallayya Hiremath

Reputation: 4538

Its worked for me , just need to add horizontal={true} inside the scrollView like 

     <ScrollView horizontal={true}>    //This is horizonatl


     If you want Vertical scroll 
    <ScrollView>                       //vertical scroll
    <Text>Am vertical scroll </Text> 
    </ScrollView>

Upvotes: 3

Joshua Pinter
Joshua Pinter

Reputation: 47581

Pass the horizontal={true} prop to the ScrollView Component.

By default, ScrollView is laid out vertically. In order to scroll the content horizontally, you simple need to pass a horizontal={true} prop to the ScrollView Component, like so: 

<ScrollView horizontal={true}>

  <Text>Child 1</Text>
  <Text>Child 2</Text>
  <Text>Child 3</Text>

</ScrollView>

The above code will lay out Child 1, Child 2 and Child 3 horizontally instead of vertically.

You can read more on the official React Native docs.

Upvotes: 29

Adarsh Sreeram
Adarsh Sreeram

Reputation: 962

just add horizontal inside your <ScrollView>

Upvotes: 11

Related Questions