React Native FlatList nested inside FlatList with same orientation

Question

I Cant create FlatList nested inside FlatList with same orientation;

the result is that the parent is horizontal but the children are vertical;

this is my code:

renderSlides(question) {
    return <View key={question.item.code}
                 style={{flex: 1,width:350}}>
        <FlatList
            ref='scrollPick'
            data={[{k:'A'},{k:'b'},{k:'c'}}]}
            horizontal={true}
            renderItem={(rate)=>{return (
                <View >
                    <Text>{rate.item.k}</Text>
                </View>);}}
            keyExtractor={ (item, index) => index}
        />
    </View>;
}

render() {
    return (
        <View style={CONTAINERS.MAIN_COLUMN_BLUE}>
            <View style={[NAV.CONTAINER_GENERAL, NAV.CONTAINER_ASSESSMENT, {flex: 1}]}>
                <TopBar barType="ex" title={I18n.t('assessment.title')} navigator={this.props.navigator}
                        closeFunction={this.handleClose}></TopBar>
            </View>
            <FlatList
                ref={(ref) => { this.flatListRef = ref; }}
                horizontal={true}
                data={[{k:'1'},{k:'2'},{k:'3'},{k:'4'},{k:'5'},{k:'6'},{k:'q'}]}
                renderItem={this.renderSlides}
                keyExtractor={(item, index) => index}
                horizontal={true}
                getItemLayout={this.getItemLayout}
                contentContainerStyle={{ flexGrow: 1}}
            />
        </View>
    );
}

Has anyone run into this same problem? ( And I can't use scrollView )

Glorious

have you tried to use flexDirection : 'row' on <View> tag like <View style={{flexDirection : 'row'}}> </View> – Ibbetson

its dosent work – Glorious

@AharonVishinsky Did you find the solution? – Mcelhaney

Solution found yet? – Josephina

Answer 1

Finally I have found it!

The First FlatList you import from react-native

import {FlatList} from 'react-native'

And the second (inside-FlatList) you can import from react-native-gesture-handler

import {FlatList as FlatList2} from 'react-native-gesture-handler'

Then you can use the same orientation and it will work.

Inclining

You saved me...I have been looking for a solution for more than 3 days. – Plastometer

it worked on ios like a charm, But doesn't seems to work on android :-( – Abert

This works for me too, but any reason why this is working? – Allot