ScrollView not enabling scrolling in React Native App

Question

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
  }
})

Try paddingVertical: 20 to scrollview container

Sunil Kumar
– Sunil Kumar

2018-03-09 18:12:19 +00:00
Commented Mar 9, 2018 at 18:12 — Sunil Kumar
– Sunil Kumar, Commented Mar 9, 2018 at 18:12

Omar Salah Elboredy · Accepted Answer · 2018-03-09 22:38:46Z

3

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!

edited Mar 9, 2018 at 22:38

Omar Salah Elboredy

4272 silver badges8 bronze badges

answered Mar 9, 2018 at 18:18

Simon Johansson

8266 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Simon Johansson Over a year ago

Please upvote or mark as correct if it was useful. No worries about the junk was quite easy to strip out but. But it makes the question look to long.

haletothewood Over a year ago

So it seemed to work to an extent. It can now scroll but it doesn't 'stick' in that it snaps back to the default position.

Simon Johansson Over a year ago

What do you mean by 'stick'. In my version with two different iOS simulators. I can stop the scroll att any point and it stays in that position.

haletothewood Over a year ago

Yeah that's not happening for me, how weird. I'm using the iPhoneX version, I'll try another.

Collectives™ on Stack Overflow

ScrollView not enabling scrolling in React Native App

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related