Using a ScrollView
The ScrollView is a generic scrolling container that can contain multiple components and views. The scrollable items need not be homogeneous, and you can scroll both vertically and horizontally (by setting the horizontal property).
This example creates a vertical ScrollView with both images and text mixed together.
import React, { Component } from 'react';
-import { ScrollView, Image, Text } from 'react-native';
+import React from 'react';
+import { Image, ScrollView, Text } from 'react-native';
-export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
- render() {
- return (
- <ScrollView>
- <Text style={{fontSize:96}}>Scroll me plz</Text>
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Text style={{fontSize:96}}>If you like</Text>
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Text style={{fontSize:96}}>Scrolling down</Text>
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Text style={{fontSize:96}}>What's the best</Text>
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Text style={{fontSize:96}}>Framework around?</Text>
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Text style={{fontSize:80}}>React Native</Text>
- </ScrollView>
- );
- }
-}
+const logo = {
+ uri: 'https://facebook.github.io/react-native/img/tiny_logo.png',
+ width: 64,
+ height: 64
+};
+
+export default App = () => (
+ <ScrollView>
+ <Text style={{ fontSize: 96 }}>Scroll me plz</Text>
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Text style={{ fontSize: 96 }}>If you like</Text>
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Text style={{ fontSize: 96 }}>Scrolling down</Text>
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Text style={{ fontSize: 96 }}>What's the best</Text>
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Text style={{ fontSize: 96 }}>Framework around?</Text>
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Text style={{ fontSize: 80 }}>React Native</Text>
+ </ScrollView>
+);
EditUsing a ScrollView
The ScrollView is a generic scrolling container that can contain multiple components and views. The scrollable items need not be homogeneous, and you can scroll both vertically and horizontally (by setting the horizontal property).
This example creates a vertical ScrollView with both images and text mixed together.
-import React, { Component } from 'react';
-import { ScrollView, Image, Text } from 'react-native';
+import React from 'react';
+import { Image, ScrollView, Text } from 'react-native';
-export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
- render() {
- return (
- <ScrollView>
- <Text style={{fontSize:96}}>Scroll me plz</Text>
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Text style={{fontSize:96}}>If you like</Text>
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Text style={{fontSize:96}}>Scrolling down</Text>
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Text style={{fontSize:96}}>What's the best</Text>
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Text style={{fontSize:96}}>Framework around?</Text>
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
- <Text style={{fontSize:80}}>React Native</Text>
- </ScrollView>
- );
- }
-}
+const logo = {
+ uri: 'https://facebook.github.io/react-native/img/tiny_logo.png',
+ width: 64,
+ height: 64
+};
+
+export default App = () => (
+ <ScrollView>
+ <Text style={{ fontSize: 96 }}>Scroll me plz</Text>
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Text style={{ fontSize: 96 }}>If you like</Text>
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Text style={{ fontSize: 96 }}>Scrolling down</Text>
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Text style={{ fontSize: 96 }}>What's the best</Text>
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Text style={{ fontSize: 96 }}>Framework around?</Text>
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Image source={logo} />
+ <Text style={{ fontSize: 80 }}>React Native</Text>
+ </ScrollView>
+);