React Native: Inverting a ScrollView

Sometimes you want to have a ScrollView which scrolls from right to left or from bottom. This can be handy when you use calendar views which often to from present to past.

The React Native documentation gives a good hint how to achieve this in the FlatList documentation. They mention “scale transforms of -1”. What does this mean?

Actually the idea is very simple. First you flip the ScrollView. Then you also flip the content of the ScrollView. That way the ScrollView is flipped and goes now in the opposite direction. The content is flipped twice and therefore looks like it is not flipped at all.

Here is how to achieve this using a ScrollView instead of a FlatList. For a horizontal ScrollView:

 1<ScrollView
 2   style={{ transform: [{ scaleX: -1 }] }}
 3   horizontal={true}
 4>
 5   <View
 6      style={{ transform: [{ scaleX: -1 }] }}
 7   >
 8   ...
 9   </View>
10</ScrollView>

For a vertical ScrollView:

 1<ScrollView
 2   style={{ transform: [{ scaleY: -1 }] }}
 3   horizontal={false}
 4>
 5   <View
 6      style={{ transform: [{ scaleY: -1 }] }}
 7   >
 8   ...
 9   </View>
10</ScrollView>