CODEWITHSUNDEEP
reactjsreact-native
haletothewood
haletothewood

Reputation: 105

ScrollView not enabling scrolling in React Native App

Using Expo and the Android App, the <ScrollView> section is not scrolling. I've read through a lot of related questions but can't seem to nail down the issue. Can anyone shed some light for a react native newbie?

On pressing the button the API is requested and then the article headlines are rendered. This all works great but the headlines are not scrollable and don't all fit on the screen. Am I misunderstanding what <ScrollView> does? 

import React from 'react'
import { ScrollView, StyleSheet, Text, View, Footer } from 'react-native'
import { Font } from 'expo'
import { Button } from 'react-native-elements'

export default class App extends React.Component {
  state = {
    fontLoaded: true,
    buttonPressed: false,
    showButton: true
  }

  onPress = (e) => {
    e.preventDefault()
    this.fetchArticlesAsync()
    this.setState({
      buttonPressed: true, 
      showButton: false
    })
  }

  async fetchArticlesAsync() {
    await fetch('http://content.guardianapis.com/search?show-fields=all&api-key=d8d8c012-6484-4bb4-82d7-2770a7c5d029')
    .then(response => response.json())
    .then(responseJSON => {
      return this.setState({
        articleList: responseJSON.response.results
      })
    })
    .catch((error) => {
      console.log(error)
    })
  }

  render() {
    return (
      <ScrollView contentContainerStyle={styles.container}>
      {
        this.state.fontLoaded &&
        <View style={this.state.buttonPressed ? styles.newsContainer : styles.container}>
          <Text style={styles.header}>Newsli</Text>
          {this.state.showButton && 
          <Button buttonStyle={styles.button} onPress={this.onPress} clear text='Feed Me' />}
          {this.state.buttonPressed &&
          <View>
            {this.state.articleList ?
            <View style={styles.articleContainer}>
            {this.state.articleList.map((article, i) => {
              return <View style={styles.articleContainer} key={i}>
                <Text style={styles.text}>{article.webTitle}</Text>
                </View>
            })}
            </View> : <Text style={styles.loading}>Loading</Text>}
          </View>}
        </View>
      }
      </ScrollView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
    alignItems: 'center',
    justifyContent: 'center',
  },
  newsContainer: {
    flex: 1,
    backgroundColor: '#000',
    alignItems: 'center',
    justifyContent: 'flex-start',
    marginTop: 15
  },
  articleContainer: {
    flex: 1,
    backgroundColor: '#000',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    marginTop: 15
  },
  header: { 
    fontSize: 90,
    color: '#fff'
  },
  text: {
    fontSize: 20,
    color: '#fff',
  },
  loading: {
    fontSize: 24,
    color: '#FF69B4'
  },
  button: {
    borderColor: '#fff', 
    borderWidth: 2
  }
})

Upvotes: 2

Views: 2750

Answers (1)

Simon Johansson
Simon Johansson

Reputation: 836

It was quite small mistake. The ScrollView does not know current device's screen size. You need to have ScrollView inside a View component. Try the following...

<View style={styles.container}>
      <ScrollView>
      {...}
      </ScrollView>
</View>

Next time when you submit a question strip out all nonsense code. Like Font fetching. Good luck!

Upvotes: 3

Related Questions