CODEWITHSUNDEEP
javascriptreactjsreact-nativescrollview
Vladimir
Vladimir

Reputation: 89

ScrollView in React Native

I created a simple app, that shows a few pictures with titles. It is something like a film gallery, where you can observe all enable films. But when I try to add ScrollView element it doesn't work when I try to scroll on my emulated Android device. How can I fix it? My code looks like this:

import React, { Component } from 'react'
import { View, ScrollView, StyleSheet } from 'react-native'
import { Header, ImageCard } from './src/components/uikit'

const url = 'https://s3.eu-central-1.wasabisys.com/ghashtag/RNForKids/00-Init/data.json'

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      title: 'STAR GATE',
      data: []
    };
  }

  componentDidMount = async () => {
    try {
      const response = await fetch(url)
      const data = await response.json()
      this.setState({ data })
    }
    catch (e) {
      console.log(e)
      throw e

    }
  }

  render() {
    const { title, data } = this.state
    const { container } = style

    return (
      <View>
        <Header title={title} />
        <ScrollView>
          <View style={container}>
            {
              data.map(item => {
                return <ImageCard data={item} key={item.id} />
              })
            }
          </View>
        </ScrollView>
      </View>
    )
  }
}

const style = StyleSheet.create({
  container: {
    marginTop: 30,
    flexDirection: 'row',
    flexWrap: 'wrap',
    flexShrink: 2,
    justifyContent: 'space-around',
    marginBottom: 150
  }

})

I made it with a guide, so it should work. (Youtubes author hasn't this problem on his video).

Upvotes: 0

Views: 103

Answers (1)

Vlad L
Vlad L

Reputation: 1685

The View inside ScrollView looks problematic. Try something like:

        <ScrollView contentContainerStyle={container} >
            {
              data.map(item => {
                return <ImageCard data={item} key={item.id} />
              })
            }
        </ScrollView>

Upvotes: 1

Related Questions