CODEWITHSUNDEEP
react-native
TJ Gillis
TJ Gillis

Reputation: 507

Programmatically add child view

I'm trying to create a grid and I want to do this in a loop. Here's some code that clearly doesn't work. The part I'm stuck on is what should "views[j].addView" to to add a view to a parent?

I can't find anything in the documentation about doing this but I'm assuming it's possible somehow. If not, is there another way to achieve this?

Thanks!

render() {
    var views = [];

    for(let j=0;j < 5; j++) {
        views.push(<View style={{flex:1, flexDirection:'row'}}></View>)

        for (let i = 0; i < 5; i++) {
            views[j].addView(
                <View style={styles.box}>
                    <View style={styles.innerBox}/>
                </View>
            )
        }
    }

    return (
        <View style={{flex:1, flexDirection:'column'}}>
            {views}
        </View>
    );
}

Upvotes: 1

Views: 2528

Answers (1)

TJ Gillis
TJ Gillis

Reputation: 507

I was able to achieve my desired outcome by using flexWrap. 

render() {
    let views = [];

    for(let j=0;j < this.props.cellCount; j++) {
        views.push(
            <View key={j} style={styles.box}>
                <View style={styles.innerBox}/>
            </View>
        )
    }

    return (
        <View {...this.props}>
            <View style={{ flex: 1, flexDirection: 'row', flexWrap: 'wrap' }}>
                { views }
            </View>
        </View>
    );
}

Upvotes: 6

Related Questions