I am unable to successfully render my application. It was working about two weeks ago but after I tried running it yesterday and today I run into this error.I run into this error on snack.expo, and also when I run with exp start in cmd. Although I succesfully imported these dependencies it still doesnt work. I had all the modules working previously and I havent tempered with the code so I dont know whats wrong now.
]1
import React from 'react';
import { StyleSheet, Text, View, AppRegistry, TouchableOpacity, TextInput, Image} from 'react-native';
import { DrawerNavigator, DrawerItems } from 'react-navigation'; // 1.2.1
import Forecast from './Forecast.js';
import Settings from './Settings.js';
import moment from 'moment';
import {Container, Header, Body, Content} from 'native-base';
//Get your current Date
let currentDate = new Date();
var newDate = moment(Date(currentDate)).format('dddd, MMMM DD YYYY');
class Count extends React.Component {
state = {
stockAtStart: 0,
stockAtEnd: 0,
}
render() {
return (
<View style={styles.container}>
<View style={(styles.boxContainerToggle, styles.boxOne)}>
<Text style={styles.currentDate}>{newDate}</Text>
</View>
<View style={[styles.boxContainerToggle, styles.boxTwo]}>
<Text style={styles.inventoryParagraph}>start</Text>
<View style={[styles.boxContainerToggle, styles.boxTwo]}>
<TextInput
underlineColorAndroid = 'transparent'
returnKeyType = 'next'
keyboardType = 'numeric'
onChangeText={(text) => this.setState({text})}
style={[styles.boxContainer]}>
<Text style={styles.stockNumber}>{this.state.stockAtStart}</Text>
</TextInput>
</View>
</View>
<View style={[styles.boxContainerToggle, styles.boxThree]}>
<Text style={styles.inventoryParagraph}>end</Text>
<View style={[styles.boxContainerToggle, styles.boxThree]}>
<TextInput
underlineColorAndroid = 'transparent'
returnKeyType = 'done'
keyboardType = 'numeric'
onChangeText={(text) => this.setState({text})}
style={[styles.boxContainer]}>
<Text style={styles.stockNumber}>{this.state.stockAtEnd}</Text>
</TextInput>
</View>
</View>
<View style={[styles.boxContainerToggle, styles.boxFour]}>
<TouchableOpacity style={styles.boxContainer}>
<Text style={styles.paragraph}>COUNT</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const CustomDrawerContentComponent = (props) => (
<Container>
<Header style={styles.headerLogo}>
<Body>
<Image
style={styles.drawerLogo}
source={require('./logo.png')}/>
</Body>
</Header>
<Content>
<DrawerItems {...props}/>
</Content>
</Container>
)
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
margin: 20,
},
boxContainerToggle: {
flex: 1,
justifyContent: 'center',
margin: 20,
},
boxContainer: {
justifyContent: 'center',
},
boxOne: {
flex: 1, // 1:6
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
boxTwo: {
flex: 2, // 2:6
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#cad0bc',
},
boxThree: {
flex: 2, // 2:6
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#a1a696',
},
boxFour: {
flex: 1, // 2:6
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
borderRadius: 50,
borderWidth: 0.5,
borderColor: '#252525',
},
stockNumber: {
fontSize: 100,
fontWeight: 'bold',
textAlign: 'center',
color: '#34495e',
},
paragraph: {
margin: 24,
fontSize: 27,
fontWeight: 'bold',
textAlign: 'center',
color: '#34495e',
},
inventoryParagraph: {
fontWeight: 'bold',
textAlign: 'center',
alignItems:'center',
justifyContent: 'center',
color: 'white',
paddingTop: 5,
},
currentDate: {
fontSize: 18,
fontWeight: 'bold',
paddingTop: 40,
color: '#34495e'
},
drawerLogo: {
height: 200,
width: 200,
justifyContent: 'center',
alignItems: 'center',
},
headerLogo:{
height: 120,
paddingLeft: 30,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff'
}
});
const appScreens = DrawerNavigator({
Count: { screen: Count },
Forecast: { screen: Forecast },
Settings: { screen: Settings }
},{
initialRouteName: 'Count',
contentComponent: CustomDrawerContentComponent,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'
})
AppRegistry.registerComponent('cocoforecast', () => appScreens);
export default appScreens;
Related
So far i have got 2 problems,
1.) I need to have this pulled from a REST api (Which it does and shows the names on the system) but it gives this very funny warning "each child in a list should have a unique key prop" looking thru i know its an issue and somehow i need to solve it
this is what the Error looks like
secondly i want the Flatlist to display like this
Other than that, i get something like this
My code is looking like this
import React, {useEffect, useState} from 'react';
import {
Image,
ImageBackground,
SafeAreaView,
StyleSheet,
Text,
View,
} from 'react-native';
import {Header, Avatar, Icon, Card} from '#rneui/themed';
import {FlatList, ScrollView} from 'react-native-gesture-handler';
const HomePage = () => {
const [transaction_details, setTransaction_details] = useState([]);
const Item = ({title}) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
const ItemData = ({item}) => <Item title={item.name} />;
useEffect(() => {
fetch('https://brotherlike-navies.000webhostapp.com/people/people.php', {
method: 'GET',
headers: {
Accept: 'application/json',
'Content-type': 'application/json',
},
})
.then(response => response.json())
.then(responseJson => {
setTransaction_details(responseJson);
});
}, []);
return (
<View>
<Header
containerStyle={{
backgroundColor: 'transparent',
justifyContent: 'space-around',
}}
leftComponent={
<Avatar
small
rounded
source={{
uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSiRne6FGeaSVKarmINpum5kCuJ-pwRiA9ZT6D4_TTnUVACpNbzwJKBMNdiicFDChdFuYA&usqp=CAU',
}}
onPress={() => console.log('Left Clicked!')}
activeOpacity={0.7}
/>
}
rightComponent={
<Icon
name={'add-circle-outline'}
color={'#00BB23'}
size={32}
onPress={() => console.log('Right Clicked!')}
/>
}></Header>
<View
style={{
flex: 1,
justifyContent: 'center',
borderadius: 9,
alignItems: 'center',
}}>
<ImageBackground
source={{
uri: 'asset:/logo/bg.JPG',
}}
imageStyle={{borderRadius: 6}}
style={{
flex: 1,
width: 350,
height: 150,
borderadius: 9,
justifyContent: 'center',
alignItems: 'center',
marginTop: 15,
}}>
<View
style={{
position: 'absolute',
justifyContent: 'center',
alignItems: 'center',
}}>
<Text style={styles.accText}>Wallet Balance</Text>
<Text style={styles.text}> 250,000 </Text>
</View>
</ImageBackground>
</View>
<View>
<Text
style={{
fontFamily: 'Poppins-Bold',
flexDirection: 'column',
fontSize: 14,
margin: 10,
top: 170,
left: 18,
color: 'gray',
}}>
Recent Transactions
</Text>
</View>
<View>
<FlatList
data={transaction_details}
renderItem={ItemData}
keyExtractor={(item, index) =>item.id}
/>
</View>
</View>
);
};
export default HomePage;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
padding: 20,
},
paragraph: {
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
padding: 20,
},
text: {
top: 50,
fontSize: 30,
color: 'white',
textAlign: 'center',
fontFamily: 'Poppins-Bold',
},
mainContainer: {
flex: 1,
paddingTop: 90,
justifyContent: 'center',
alignItems: 'center',
},
accText: {
top: 50,
paddingTop: 10,
justifyContent: 'center',
alignItems: 'center',
fontFamily: 'Poppins-Medium',
color: 'white',
textAlign: 'center',
},
});
Now i am a bit worried, where can I start from. I need some guidance with this, kind of new with something like this.
Image of Text.
Want to remove the left and right padding of forget password Text.Please Help
import React, { useState } from "react"
import { View, Text, SafeAreaView, Button, StyleSheet, TextInput, TouchableOpacity, Platform } from "react-native"
const Practice = (props) => {
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
function onTappedLogIn() {
}
function onTappedForgetPass() {
}
function onTappedShow() {
}
return (
<SafeAreaView style={styles.containerView}>
<View style={styles.upperView}>
<TouchableOpacity>
<Text style={{ textDecorationLine: 'underline' }}>Sign Up</Text>
</TouchableOpacity>
</View>
<View style={styles.middleView}>
<Text style={[styles.text, { marginTop: 30 }]}>Email Address</Text>
<TextInput style={styles.textInput} onChangeText={(email) => setEmail(email)} />
<Text style={styles.text}>Password</Text>
<View style = {styles.passTextInputView}>
{/* <Text>Show</Text> */}
<TextInput style={styles.textInput} onChangeText={(pass) => { setPassword(pass) }} />
</View>
<TouchableOpacity style={styles.button} onPress={onTappedLogIn()}>
<View>
<Text style={styles.buttonText}>
Log In
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.forgetPass}>Forget Password?</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
containerView: {
flex: 1,
// justifyContent: 'center',
backgroundColor: 'grey'
},
middleView: {
flex: 0.45,
flexDirection: 'column',
backgroundColor: 'white',
marginLeft: 25,
marginRight: 25
},
upperView: {
flex: 0.30,
justifyContent: 'flex-start',
alignItems: 'flex-end',
marginRight: 15
},
text: {
marginLeft: 15,
marginTop: 15,
marginBottom: 20
},
textInput: {
borderBottomWidth: 1,
borderBottomColor: 'black',
marginLeft: 15,
marginRight: 15
},
button: {
padding: 15,
backgroundColor: 'green',
marginTop: 30,
marginLeft: 15,
marginRight: 15,
borderRadius: 25,
marginBottom: 20
},
buttonText: {
textAlign: "center",
fontWeight: 'bold',
color: 'white',
textDecorationLine: "underline"
},
forgetPass: {
textAlign: 'center',
textDecorationLine: 'underline',
includeFontPadding: false,
flex:0
},
passTextInputView:{
// flex:.3
}
})
export default Practice
Probably you need to set the text containers style to flex:0
Apply alignitems:'center' to the text container (sample)
I am trying to implement text change and edit ends in TextInput using react-native but it's not quite working.
See the Screenshot Here
Currently, when changing the price by touch input, the price is not affected when click off.
Here are my files
CartItem.js:
import React from "react";
import {
View,
TextInput,
Image,
TouchableOpacity,
StyleSheet,
Platform,
Alert,
} from "react-native";
//Colors
import Colors from "../../../utils/Colors";
//NumberFormat
import NumberFormat from "../../../components/UI/NumberFormat";
//Icon
import { MaterialCommunityIcons } from "#expo/vector-icons";
import CustomText from "../../../components/UI/CustomText";
//PropTypes check
import PropTypes from "prop-types";
export class CartItem extends React.PureComponent {
render() {
const { item, onAdd, onDes, onRemove } = this.props;
const AddItemHandler = async () => {
await onAdd();
};
const sum = +item.item.price * +item.quantity;
const checkDesQuantity = async () => {
if (item.quantity == 1) {
Alert.alert(
"Clear cart",
"Are you sure you want to remove the product from the cart?",
[
{
text: "Cancel",
},
{
text: "Yes",
onPress: onRemove,
},
]
);
} else {
await onDes();
}
};
return (
<View style={styles.container}>
<View style={styles.left}>
<Image
style={{
width: "100%",
height: 90,
resizeMode: "stretch",
borderRadius: 5,
}}
source={{ uri: item.item.thumb }}
/>
</View>
<View style={styles.right}>
<View
style={{ flexDirection: "row", justifyContent: "space-between" }}
>
<CustomText style={styles.title}>{item.item.filename}</CustomText>
<View>
<TouchableOpacity onPress={onRemove}>
<MaterialCommunityIcons name='close' size={20} color='#000' />
</TouchableOpacity>
</View>
</View>
<CustomText style={{ color: Colors.grey, fontSize: 12 }}>
Provided by Brinique Livestock LTD
</CustomText>
<NumberFormat price={sum.toString()} />
<View style={styles.box}>
<TouchableOpacity onPress={checkDesQuantity} style={styles.boxMin}>
<MaterialCommunityIcons name='minus' size={16} />
</TouchableOpacity>
Code that I would like to be fixed starts here.
<View>
<TextInput
keyboardType='numeric'
onEndEditing={AddItemHandler}
style={styles.boxText}>{item.quantity}</TextInput>
</View>
Code that I would like to be fixed ends here.
<TouchableOpacity
onPress={AddItemHandler}
style={styles.boxMin}>
<MaterialCommunityIcons name='plus' size={16} />
</TouchableOpacity>
</View>
</View>
</View>
);
}
}
CartItem.propTypes = {
item: PropTypes.object.isRequired,
onAdd: PropTypes.func.isRequired,
onRemove: PropTypes.func.isRequired,
onDes: PropTypes.func.isRequired,
};
const styles = StyleSheet.create({
container: {
flex: 1,
marginHorizontal: 10,
height: 110,
borderBottomWidth: 1,
borderBottomColor: Colors.light_grey,
flexDirection: "row",
paddingVertical: 10,
alignItems: "center",
backgroundColor: "#fff",
paddingHorizontal: 10,
borderRadius: 5,
marginTop: 5,
},
left: {
width: "35%",
height: "100%",
alignItems: "center",
},
right: {
width: "65%",
paddingLeft: 15,
height: 90,
// overflow: "hidden",
},
title: {
fontSize: 14,
},
box: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
height: Platform.OS === "ios" ? 30 : 25,
backgroundColor: Colors.grey,
width: 130,
borderRadius: 5,
paddingHorizontal: 15,
marginTop: 5,
},
boxMin: {
width: "30%",
alignItems: "center",
},
boxText: {
fontSize: 16,
backgroundColor: Colors.white,
padding: 5,
},
});
Use onBlur instead of onEndEditing.
How should the input end triggered?
After a time?
When user hits enter?
When user taps anywhere to close software keyboard?
Instead of
onEndEditing={AddItemHandler}
Use:
onBlur={(e) => {AddItemHandler(e.nativeEvent.text)}}
And ensure that AddItemHandler can handle the value in e.nativeEvent.text.
I have this error in my application:
Invariant Violation: Invariant Violation: Element type is invalid:
expected a string (for built-in components) or a class/function (for
composite components) but got: undefined. You likely forgot to export
your component from the file it's defined in, or you might have mixed
up default and named imports.
I don't know why this happens to me, becouse I don't see any problems. Look at my screen code:
import React, { Component } from 'react';
import { Text, View,StyleSheet,TouchableOpacity,TextInput,FlatList,ListItem } from 'react-native';
import { Alert,Input } from 'native-base';
import {BoxShadow} from 'react-native-shadow';
import Dimensions from 'Dimensions';
import Icon from 'native-base';
const DEVICE_WIDTH = Dimensions.get('window').width;
export default class ticketDiaryHours1 extends Component {
constructor(props) {
super(props);
this.state = {
text: '',
textOpombe: '',
data: [
{key: 'Devin Dank'},
{key: 'Jackson Will'},
{key: 'James Jones'},
{key: 'Joel Noah'},
{key: 'John Degenkolb'},
{key: 'Jillian Calmejain'},
{key: 'Jimmy Butler'},
{key: 'Julie Hell'},
],
showList: false,
}
}
onShowStudent() {
if(this.state.showList) {
this.setState({
showList: false,
});
} else {
this.setState({
showList: true,
});
}
}
render() {
const shadowOpt = {
height:40,
width: DEVICE_WIDTH-40,
color:"#000",
border:2,
radius:8,
opacity:0.2,
x:0,
y:3,
style:{marginVertical:3}
};
const {
student,
startTime,
endTime,
headingText,
roomText,
apsent,
finished
} = this.props;
return (
<View style={styles.main}>
<Text>{startTime} - {endTime}</Text>
<Text style={styles.headingText}>{headingText} - {student}</Text>
<Text style={styles.hourContent}>VSEBINA URE </Text>
<BoxShadow setting={shadowOpt}>
<TextInput
style={styles.textInputStyle}
placeholder='Vnesite vsebino ure'
placeholderTextColor="rgba(0,0,0,0.5)"
onChangeText={(text) => this.setState({text})}
value={this.state.text}
underlineColorAndroid='transparent'
/>
</BoxShadow>
<Text style={styles.hourContent}>OPOMBE </Text>
<BoxShadow setting={shadowOpt}>
<TextInput
style={styles.textInputStyle}
placeholder='Vnesite opombe'
placeholderTextColor="rgba(0,0,0,0.5)"
onChangeText={(textOpombe) => this.setState({textOpombe})}
value={this.state.textOpombe}
underlineColorAndroid='transparent'
/>
</BoxShadow>
<View style={styles.markedRow}>
<View style={{flexDirection: 'column', justifyContent: 'center', justifyContent: 'flex-start' }}>
<Text style={styles.textIcon}>OPRAVLJENO</Text>
<TouchableOpacity
style={ [styles.touchable1, styles.iconStyle] }
onPress={this.onShowStudent.bind(this)}>
<Icon name='checkmark' style={{color: '#fff', fontSize: 20, alignSelf: 'center' }}/>
</TouchableOpacity>
</View>
<View style={{flexDirection: 'column', justifyContent: 'center', position: 'absolute', right: 0, top: 15 }}>
<Text style={styles.textIcon}>NEOPRAVLJENO</Text>
<TouchableOpacity
style={ [styles.touchable2, styles.iconStyle] }
onPress={this.onShowStudent.bind(this)}>
<Icon name='close'
style={{color: '#fff', fontSize: 20,alignSelf: 'center'}} />
</TouchableOpacity>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
main: {
paddingLeft: 20,
paddingRight: 20,
flexDirection: 'column',
paddingTop: 15
},
headingText: {
fontWeight: '400',
color: '#000000',
fontSize: 20,
},
hourContent: {
fontWeight: '400',
color: '#000000',
fontSize: 20,
paddingBottom: 15,
paddingTop: 15,
},
textInputStyle: {
backgroundColor: 'white',
paddingLeft: 10,
height: 40,
borderRadius: 8,
width: DEVICE_WIDTH-40,
},
markedRow: {
flexDirection: 'row',
paddingTop: 15,
},
touchable1: {
backgroundColor: '#48BFD3',
justifyContent: 'center',
},
touchable2: {
backgroundColor: '#EE9CA0',
justifyContent: 'center',
},
iconStyle: {
borderRadius: 8,
width: 50,
height: 40,
alignSelf: 'center',
},
textIcon: {
paddingBottom: 10,
fontWeight: '400',
color: '#000000',
fontSize: 20,
},
listItemStyle: {
flexDirection: 'row',
}
});
That is an issue with your import. try import {Icon} from 'native-base';. This is a member import (named import). Member imports are exported with export... and not export default ...
I have a view with 3 textinput and I am trying to center them when the keyboard is opened. I already tried with KeyboardAvoidingView and the result is that all, except the save button disappear. What am I doing wrong?
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
TextInput,
ScrollView,
ListView,
KeyboardAvoidingView,
TouchableOpacity,
AsyncStorage,
} from 'react-native';
import Note from './Note.js';
export default class NoteBody extends Component {
static navigationOptions = {
header: null,
};
constructor(props){
super(props);
this.state = {
noteText: '',
noteTitle: '',
callType: '',
};
}
render() {
return (
<View style={styles.container}>
<View style={styles.header1}>
<Text style={styles.title}>New Note</Text>
</View>
<View style={styles.headerDesign}>
</View>
<View style={styles.header2}>
</View>
<View style= {styles.mainPage}>
<View style={styles.noteBody}>
<TextInput
style = {styles.subject}
placeholder='Raport Number/Note Indentifier'
onChangeText={(noteTitle)=> this.setState({noteTitle})}
value={this.state.noteTitle}
placeholderTextColor='grey'
underlineColorAndroid='transparent'>
</TextInput>
<TextInput
style = {styles.calltype}
multiline = {true}
numberOfLines = {5}
placeholder='Call Type/Other Information'
onChangeText={(callType)=> this.setState({callType})}
value={this.state.callType}
placeholderTextColor='grey'
underlineColorAndroid='transparent'>
</TextInput>
<TextInput
multiline = {true}
numberOfLines = {8}
style={styles.textInput}
placeholder='Notes'
onChangeText={(noteText)=> this.setState({noteText})}
value={this.state.noteText}
placeholderTextColor='grey'
underlineColorAndroid='transparent'>
</TextInput>
</View>
<View style= {styles.footer}>
<TouchableOpacity onPress={ this.addNote.bind(this) } style={styles.addButton}>
<Text style={styles.addButtonText}>SAVE</Text>
</TouchableOpacity>
</View>
</View>
</View>
);
}
addNote(){
const { navigate } = this.props.navigation;
if(this.state.noteText && this.state.noteTitle && this.state.callType){
var d = new Date();
this.props.navigation.state.params.noteArray.push({
'noteName':this.state.noteTitle,
'date':(d.getMonth()+1)+
"/"+d.getDate() +
"/"+ d.getFullYear(),
'callType': this.state.callType,
'note': this.state.noteText
});
this.setState({ noteArray: this.props.navigation.state.params.noteArray });
this.setState({noteText:''});
this.setState({noteTitle:''});
this.setState({callType:''});
AsyncStorage.setItem('arr', JSON.stringify(this.props.navigation.state.params.noteArray));
this.props.navigation.state.params.onNavigateBack();
this.props.navigation.goBack();
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
mainPage:{
flex: 2,
alignItems: 'center',
justifyContent:'center',
},
header1:{
backgroundColor: '#000',
alignItems: 'center',
height: 40,
justifyContent: 'center',
},
title:{
color: '#fff',
fontSize: 20,
},
header2:{
marginBottom: 10,
backgroundColor: '#000',
alignItems: 'center',
height: 40,
justifyContent: 'center',
},
headerDesign:{
backgroundColor: '#0000FF',
alignItems: 'center',
height: 20,
justifyContent: 'center',
},
noteBody:{
flex: 2,
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
zIndex: 10,
alignItems: 'center',
marginBottom: 100,
},
textInput: {
alignSelf: 'stretch',
textAlignVertical: 'top',
backgroundColor: '#fff',
color: '#000',
padding: 20,
borderTopWidth:1,
borderTopColor: '#D3D3D3',
borderBottomWidth:1,
borderBottomColor: '#000',
},
addButton: {
position: 'absolute',
zIndex: 11,
bottom: 20,
alignItems: 'center',
justifyContent: 'center',
width: 200,
backgroundColor: '#0000FF',
height: 40,
elevation: 8
},
addButtonText: {
color: '#fff',
fontSize: 20,
},
subject:{
alignSelf: 'stretch',
textAlignVertical: 'top',
backgroundColor: '#fff',
padding: 20,
borderTopWidth:1,
borderTopColor: '#000',
borderBottomWidth:1,
borderBottomColor: '#D3D3D3',
},
calltype:{
alignSelf: 'stretch',
textAlignVertical: 'top',
backgroundColor: '#fff',
padding: 20,
},
footer:{
flex: 3,
alignItems: 'center',
justifyContent:'center',
}
});
Please, copy the code in your text editor and give it a try. Just replace the wrapping view with KeyboardAvoidingView like so: https://facebook.github.io/react-native/docs/keyboardavoidingview.html#keyboardverticaloffset and tell me what else can I do?
You must insert the KeyboardAvoidingView in a ScrollView.
Like so:
<ScrollView>
<KeyboardAvoidingView styles={styles.container} behavior = 'padding' enabled>
</KeyboardAvoidingView>
</ScrollView>