React Scrollview is not working

Asked

Viewed 699 times

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'
  },
});

javascript react-native

  • 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.

1 answer

0

Try this:

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>
        <View style={styles.contentContainer}>
         {this.state.data.map((item,i) => <Card key={i}><Text>{item.body}</Text></Card>)}
        </View>
      </ScrollView>

      </View>
      );
  }
}

const styles = StyleSheet.create({
  contentContainer: {
    flex: 1,
    flexGrow: 1,
    backgroundColor: '#fff'
  },
});

  • obg. but still no sliding

Browser other questions tagged javascript react-native

You are not signed in. Login or sign up in order to post.