React-native: How to scroll both horizontally and vertically?

[coodoo]

This is probably a super dumb question, how do I scroll an image in all directions? Currently I'm putting the image inside a ScrollView but I can only scroll horizontally or vertically, not both.

Am I missing something obvious? Thanks.

[astreet]

If you are on iOS: use directionalLockEnabled on ScrollView

On Android: There's no native component to do this at this time as ScrollView only supports vertical scrolling (and HorizontalScrollView only supports horizontal scrolling) and only one can handle the gesture at a time. You can roll your own JS component using PanResponder though https://facebook.github.io/react-native/docs/panresponder.html. Hopefully we will be able to make these APIs more consistent in the future.

[mkonicek]

Closing this as @astreet has answered.

For future questions, can you please use Stack Overflow and tag your question with react-native? http://stackoverflow.com/questions/tagged/react-native

Many people from the community hang out on Stack Overflow and will be able to see and likely also answer your question. Using Stack Overflow for questions also helps us use Github issues to keep track of bugs that need to be fixed.

[coodoo]

Will do, thanks for the quick response!

[coodoo]

Just did some quick tests and found out I need to set both directionalLockEnabled and horizontal to true to make it work, which is a bit strange.

<ScrollView style={styles.container}
            directionalLockEnabled={false}
            horizontal={true}
>

[coodoo]

FYI, just built a cross-platform 4-way Scroller View:
https://github.com/coodoo/react-native-scroller

[Hkmu]

Just use two scrollviews. One for horizontal and the other for vertical.

<ScrollView>
    <ScrollView horizontal>
          ....
    </ScrollView>
</ScrollView>

[TimoRuetten]

@Hkmu Am I missing something ? Your solution does not work for me but you got upvotes. Maybe its not working anymore this way ?

[jolancornevin]

@TimoRuetten
This work for me, with [email protected].

You actually have to specify the height and width if your content is not big enough (often the case if you are just testing).

<ScrollView contentContainerStyle={{height: 1000}}>
    <ScrollView horizontal contentContainerStyle={{width: 1000}}>
         ....
    </ScrollView>
</ScrollView>

If this still does not work for you, share a sample of your code, and I'll take a look at it =)

[kamaljit-sharma]

@Hkmu thank you very much, your solution worked for me :+1:

[adarshTS]

You could also give a custom style to the ScrollView and give a property of transform to have a diagonal scroll scrollViewStyle: { transform: [{ rotate: '-12deg' }] }

[6624465]

@jolancornevin,
I have tried with the above options. still having the issue. I am using react native version: @0.49.0
below is my sample code:

Please have a look....
Thanks in advance.

export default class ExpenseSummary extends Component {
constructor(props) {
super(props);
this.state = {
value:{},
isserach:false,
tableHead: ['Expense Date', 'Expenses Code', 'Expenses Type', 'Vendor Name', 'Amount'],
widthArr: [200, 200, 200, 200, 200],
lstExpensesCode:t.enums({}),
}
}
render() {
const state = this.state;
const tableData = [];
for (let i = 0; i < 30; i += 1) {
const rowData = [];
for (let j = 0; j < 9; j += 1) {
rowData.push(${i}${j});
}
tableData.push(rowData);
}

  return (
    <View style={styles.container}>
      <ScrollView horizontal={true}  contentContainerStyle={{width: 1000}}>
        <View>
          <Table borderStyle={{borderColor: '#C1C0B9'}}>
            <Row data={state.tableHead} widthArr={state.widthArr} style={styles.header} textStyle={styles.text}/>
          </Table>
          <ScrollView style={styles.dataWrapper}  contentContainerStyle={{height: 1000}}>
            <Table borderStyle={{borderColor: '#C1C0B9'}}>
              {
                tableData.map((rowData, index) => (
                  <Row
                    key={index}
                    data={rowData}
                    widthArr={state.widthArr}
                    style={[styles.row, index%2 && {backgroundColor: '#F7F6E7'}]}
                    textStyle={styles.text}
                  />
                ))
              }
            </Table>
          </ScrollView>
        </View>
      </ScrollView>
    </View>
  )
}

}

const styles = StyleSheet.create({
container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
header: { height: 50, backgroundColor: '#537791' },
text: { textAlign: 'center', fontWeight: '100' },
dataWrapper: { marginTop: -1 },
row: { height: 40, backgroundColor: '#E7E6E1' }
});