0
I can see the components inside it, but the problem is it doesn’t slide up or down, but it has a lot of cards in it.
import React from 'react';
import { StyleSheet, Text, View, ScrollView} from 'react-native';
import { Card, ListItem, Button, Icon} from 'react-native-elements';
import NavigationBar from 'react-native-navigation-bar';
export default class App extends React.Component {
constructor(props){
super(props);
this.state = {
data: [],
};
}
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/posts/1/comments',{
method: 'GET',
headers: new Headers({'Content-Type': 'application/json'}),
})
.then(response => response.json())
.then(data => this.setState({ data }))
.catch(function(error) {
alert(error.message);
});
}
render() {
return (
<View style={{flex: 1}}>
<NavigationBar
title={'Main titl'}
height={50}
leftButtonTitle={'back'}
rightButtonTitle={'forward'}
/>
<ScrollView contentContainerStyle={styles.contentContainer}>
{this.state.data.map((item,i) => <Card key={i}><Text>{item.body}</Text></Card>)}
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
contentContainer: {
flex: 1,
flexGrow: 1,
backgroundColor: '#fff'
},
});
For starters, I would advise using Flatlist instead of Map Cards. You could style the list in a similar way and the Scrollview problem would be solved.
– whallas pimentel