Scribd
Upload
38 views

How To Horizontal Scroll in RN

This document defines a React component that renders a horizontal scrollable view with paging enabled. The scroll view contains three views with different background colors, each centered and containing white text. Styles are defined using React Native StyleSheet to set dimensions, colors, alignments and fonts for the views and text.

Uploaded by

satish menon
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
38 views

How To Horizontal Scroll in RN

This document defines a React component that renders a horizontal scrollable view with paging enabled. The scroll view contains three views with different background colors, each centered and containing white text. Styles are defined using React Native StyleSheet to set dimensions, colors, alignments and fonts for the views and text.

Uploaded by

satish menon
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

import React, { Component } from 'react'

import { Text, StyleSheet, View, ScrollView, Dimensions } from 'react-native'

export default class Horizontal extends Component {


render() {
return (
<ScrollView horizontal={true} pagingEnabled={true} style={styles.c
ontainer}>
<View style={styles.outer}>
<Text style={styles.innerText}> text 1 </Text>
</View>

<View style={[styles.outer, styles.outer2]}>


<Text style={styles.innerText}> text 2 </Text>
</View>

<View style={[styles.outer, styles.outer3]}>


<Text style={styles.innerText}> text 3 </Text>
</View>
</ScrollView>
)
}
}

const styles = StyleSheet.create({


container: {

},
outer:{
backgroundColor: '#249991',
flex: 1,
alignItems: 'center',
justifyContent: 'center',
width: Dimensions.get('window').width,
height: Dimensions.get('window').height

},
outer2:{
backgroundColor: '#dd4b39',

},
outer3:{
backgroundColor: '#007bb6',

},
innerText:{
color: '#fff',
fontSize: 24,
fontWeight: 'bold'
}

})

You might also like