Reputation: 43

React Native ScrollView doesnt scroll

I can't seem to figure out why a screen in my Android app doesn't scroll at all. I've tried many different solutions but it just wont work... I suppose there is some kind of problem with flexbox in my component structure but cant figure it out. Maybe Im missing something else.. Please help

Here's my code:

import React, { Component } from "react";
import styled from "styled-components";
import {ScrollView,StyleSheet,SafeAreaView,View,StatusBar} from "react-native";

import MenuContentItem from "../components/MenuContentItem";

export default class MenuScreen extends Component {
    static navigationOptions = {
        header: null
};

render() {
    return (
        <SafeAreaView style={styles.container}>
            <StatusBar barStyle="light-content" 
             backgroundColor="#dedede" />
            <ScrollView
                contentContainerStyle={{
                    flex: 1,
                    justifyContent: "space-between"
                }}
            >
            <View style={{flex:1}}>

            <Container>
                    <Header>
                        <Title>Menu</Title>
                    </Header>
                    <Content>
                        <ContentTitle>Recommended</ContentTitle>
                        <ContentWrapper>
                            {MenuItems.map((menuItem, index) => (
                                <MenuContentItem
                                    key={index}
                                    image={menuItem.image}
                                    title={menuItem.title}
                                    subtitle={menuItem.subtitle}
                                />
                            ))}
                        </ContentWrapper>
                    </Content>
                </Container>
            </View>
            </ScrollView>
        </SafeAreaView>
       );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    }
});

const Header = styled.View`
    width: 100%;
    height: 55px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #fff;
    border-bottom-color: #dedede;
    border-bottom-width: 1px;
`;

const Title = styled.Text`
    color: #5600ff;
    margin: 0 auto;
    font-family: "Roboto";
    font-size: 18px;
    font-weight: 400;
`;

const Container = styled.View`
    width: 100%;
    height: 100%;
    flex: 1;
`;

const Content = styled.View`
    width: 100%;
    height: 100%;
    padding: 40px 20px;
    background: #e9edff;
    flex: 1;
`;

const ContentTitle = styled.Text`
    color: #5600ff;
    font-family: "Roboto";
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
    margin-left: 7px;
`;

const ContentWrapper = styled.View`
   width: 100%;
   height: 100%;
   display: flex;
   flex: 1;
   flex-direction: row;
   flex-wrap: wrap;
`;

Upvotes: 3

Answers (4)

Egeberg

Reputation: 45

you should add like this:

<View style={{flex: 1}}>
  <ScrollView>
    <Text> TEST </Text>
    <Text> TEST </Text>
    <Text> TEST </Text>
    <Text> TEST </Text>
       ...    
  </ScrollView>
</View>

so you put flex on a new View you put around your scrollview. This fixed it for me:)

Upvotes: 2

Johncy

Reputation: 504

return(<Container>
                    <Header>
                        <Title>Menu</Title>
                    </Header>
                    <Content>
                        <ContentTitle>Recommended</ContentTitle>
                        <ContentWrapper>
                            {MenuItems.map((menuItem, index) => (
                                <MenuContentItem
                                    key={index}
                                    image={menuItem.image}
                                    title={menuItem.title}
                                    subtitle={menuItem.subtitle}
                                />
                            ))}
                        </ContentWrapper>
                    </Content>
                </Container>)

Otherwise

<SafeAreaView style={styles.container}>
    <ScrollView contentContainerStyle={{height:heightDP('85%')}} showsVerticalScrollIndicator={false}> 

            <Text style={styles.mobText}>{i18n.t('forgetPassword.forgetPassword')}</Text>
            <View>


                <TextInput maxLength={10} onChangeText={(value)=>{this.setState({mobile_number: value});(value.length == 10 ? Keyboard.dismiss() : null)}} underlineColorAndroid='transparent' keyboardType='numeric' blurOnSubmit={true} style={styles.country_no}/>

            </View>
            ....        
            </ScrollView>
    </SafeAreaView>

Container,content.. is from native-base.(the content will act as a scrollview here)

ScrollView.. is from react-native.

Try to use only one..

Upvotes: 0