Skip to content

ScrollView children behave differently on Web and Android #1131

Open
@berickson1

Description

@berickson1

On Android, ScrollView children grow (as seen in Button in screenshot)
On Web, ScrollView children don't grow

This can be fixed by switching the style on the ScrollView div from block to flex. I don't see any immediate issues making this change - but posting here before raising a PR in case anyone has behaviour that relies on existing ScrollView behaviour.

import React, { Component } from "react";
import RX, { Button, View, Text, Styles, ScrollView } from "reactxp";

const buttonStyle = RX.Styles.createButtonStyle({ 
    borderRadius: 4,
    borderColor: 'grey',
    borderWidth: 1,
    padding: 4
})

interface Props {

}

interface State {

}

export default class App extends Component<Props, State> {
    render() {
        let items: JSX.Element[] = [];
        for (let i = 0; i < 100; i++) {
            items.push(<View><Text>{i}</Text></View>)
        }
        // Create a button that appears different on web vs Android
        return (
            <ScrollView>
                <View><Text>This is a Text in a View</Text></View>
                <Button style={ buttonStyle }><Text>This is a Button in a View</Text></Button>
                { items }
            </ScrollView>
        );
    }
}

See the button below in the screenshot
Screen Shot 2019-08-17 at 8 47 39 PM

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugstaleThis ticket may be old, or may no longer be valid, and will be closed if no further activity occurs

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions