0.52.2 Finishing touches

[Pagebakers]

Not sure where to put this since the PR has been merged into master, so here goes :)

Last things I'm running into:

• [x] ListView doesn't scroll

• [ ] Loading images with require('Image.png') doesn't work This seems to be an issue on dev build only though.

• [ ] Padding doesn't work on TextInput I looked into rewriting RCTTextField to RCTSingleLineTextField, but I don't know enough about Mac development nor do I have enough time to figure this out.

Other then that things seem to run pretty solid here!

[ptmt]

Thanks for the feedback. Could you try to replace ListView with FlatList?

[shirakaba]

Just to say that <ListView> scrolls perfectly for me in v0.18.0-alpha.3, with both scrollwheel and trackpad, using the code attached below (TypeScript). However, the rows do become completely white upon click (not the same behaviour as the previous stable release), so it's not all perfect. Not to say I've necessarily written it correctly:

EDIT: click-and-drag doesn't result in scroll. Not sure whether that's desired behaviour or not.

Consumer.tsx

import React, { Component } from 'react';
import {View} from "react-native";
import {SimpleListView} from "./SimpleListView";

interface Props {
}

interface State {
    highlightedRow: number
}

const supportedLanguageIds: string[] = ["ar", "bg", "zh-Hant", "hr", "cs", "da", "nl", "en", "fi", "fr", "de", "hi", "el", "he", "hu", "is", "it", "ja", "ko", "zh-Hans", "nb", "pl", "pt", "ro", "ru", "sk", "es", "sv", "th", "tr", "uk"];
const supportedLanguageIdsColloquial: string[] = [ 'Arabic', 'Bulgarian', 'Cantonese', 'Croatian', 'Czech', 'Danish', 'Dutch', 'English', 'Finnish', 'French', 'German', 'Hindi', 'Greek', 'Hebrew', 'Hungarian', 'Icelandic', 'Italian', 'Japanese', 'Korean', 'Mandarin', 'Norwegian Bokmål', 'Polish', 'Portuguese', 'Romanian', 'Russian', 'Slovak', 'Spanish', 'Swedish', 'Thai', 'Turkish', 'Ukrainian' ];

export default class Consumer extends Component<Props, State> {
    constructor(props: Props){
        super(props);

        this.state = {
            highlightedRow: 0
        }
    }

    render() {
        return (
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: "white"}}>
                <SimpleListView
                    multipleChoice={false}
                    highlight={this.state.highlightedRow}
                    data={supportedLanguageIdsColloquial}
                    onPress={
                        (rowID: string) => {
                            this.setState({ highlightedRow: parseInt(rowID) });
                            console.log("Pressed rowID:", parseInt(rowID));
                        }
                    }
                />
            </View>
        );
    }
}

SimpleListView.tsx

import React, { Component } from 'react';
import {ListView, ListViewDataSource, StyleSheet, Text, TouchableHighlight, View, ImageStyle, TextStyle, ViewStyle} from "react-native";

interface Props {
    multipleChoice: boolean,
    highlight: number,
    data: string[],
    onPress(rowID: string): void;
}

interface State {
    dataSource: ListViewDataSource
}

export class SimpleListView extends Component<Props, State> {
    private pressData: {[key: string]: boolean} = { [this.props.highlight.toString()]: true };

    constructor(props: Props){
        super(props);


        const ds: ListViewDataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

        this.state = {
            dataSource: ds.cloneWithRows(this.genRows(this.pressData))
        }
    }
    
    renderRow(rowData: string, sectionID: number, rowID: number, highlightRow: (sectionID: number, rowID: number) => void) {
        return (
            <TouchableHighlight onPress={() => {
                this.pressRow(rowID.toString());
                highlightRow(sectionID, rowID);
            }}>
                <View>
                    <View style={styles.row}>
                        <Text style={styles.text}>
                            {rowData}
                        </Text>
                    </View>
                </View>
            </TouchableHighlight>
        );
    }

    genRows(pressData: {[key: number]: boolean}): string[] {
        const dataBlob: string[] = [];
        for (let i = 0; i < this.props.data.length; i++) {
            dataBlob.push(`${this.props.data[i]}` + (pressData[i.toString()] ? ` (selected)` : ``));
        }
        return dataBlob;
    }

    pressRow(rowID: string) {
        this.props.onPress(rowID);
        if(this.props.multipleChoice) this.pressData[rowID] = !this.pressData[rowID];
        else this.pressData = { [rowID]: true };
        this.setState({
            dataSource: this.state.dataSource.cloneWithRows(this.genRows(this.pressData))
        });
    }

    renderSeparator(sectionID: number, rowID: number, adjacentRowHighlighted: boolean) {
        return (
            <View
                key={`${sectionID}-${rowID}`}
                style={{
                    height: adjacentRowHighlighted ? 4 : 1,
                    backgroundColor: adjacentRowHighlighted ? '#3B5998' : '#CCCCCC',
                }}
            />
        );
    }

    render() {
        return (
            <ListView
                dataSource={this.state.dataSource}
                renderRow={
                    (rowData: any, sectionID: string | number, rowID: string | number, highlightRow?: boolean) => {
                        return this.renderRow(rowData, sectionID as number, rowID as number, (sectionID, rowID) => highlightRow);
                    }
                }
                renderSeparator={
                    (sectionID: string | number, rowID: string | number, adjacentRowHighlighted?: boolean) =>
                        this.renderSeparator(sectionID as number, rowID as number, adjacentRowHighlighted)
                }
            />
        );
    }
}

interface StyleObject {
    [key: string]: Partial<ComponentStyle>;
}

type ComponentStyle = ViewStyle|ImageStyle|TextStyle;

const styles: StyleObject = StyleSheet.create<StyleObject>({
    row: {
        flexDirection: 'row',
        justifyContent: 'center',
        padding: 10,
        width: 200,
        backgroundColor: '#F6F6F6',
    },
    thumb: {
        width: 64,
        height: 64,
    },
    text: {
        flex: 1,
    },
});

[unmec]

FlatList doesn't scroll when click and drag, but it works when using gestures.

[aleclarson]

@unmec Why do you expect "click+drag to scroll" behavior in a desktop application? I've never seen anyone do that.

[unmec]

@aleclarson Well I believe you certainly have. Just image what would you do when you want to select a big piece of text in Safari? Click, then drag to scroll to when it ends right?

[aleclarson]

@unmec Ah, you didn't mention text selection in the previous comment. Can you open a new issue for that, please?