React-native: ScrollView doesn't take up 100% width

[niftylettuce]

I have ScrollView with flex: 1 inside a fully stretch container. It only spans the width of the content, not the full width of the container. The only way I can fix this is if I do <ScrollView style={{ width: Dimensions.get('window').width }}>. Is there a better way? I'd like to not have to explicitly declare the width, given that if my app supports screen rotation, then I'd have to resize the layout somehow and adjust that width state.

[ms88privat]

did you set the contentContainerStyle property to flex: 1 too?

[niftylettuce]

@ms88privat yes, all parent containers have flex 1

[ms88privat]

@niftylettuce could you please reproduce it on https://rnplay.org/ ?

[jaygarcia]

Very strange. The only time i've seen this is if a parent had justifyContent : 'center'

[niftylettuce]

Ah, that might be it :) I have parent container with justifyContent
:'center'

On Mon, Nov 2, 2015 at 3:17 PM, Jay Garcia [email protected] wrote:

Very strange. The only time i've seen this is if a parent had
justifyContent : 'center'

—
Reply to this email directly or view it on GitHub
https://github.com/facebook/react-native/issues/3825#issuecomment-153144501
.

[christopherdro]

@niftylettuce Were you able to resolve this?

[christopherdro]

@facebook-github-bot no-reply

[facebook-github-bot]

Closing this issue as more information is needed to debug this and we haven't heard back from the author. Once there's more information we can reopen the issue.

[ashutosh-akss]

Issue still exists, ScrollView is not taking full width of container.

tried this

let questions = this.state.questions.map((question,i)=>{
            return <Question key={i} question={question} />
        })

        return(
            <View style={styles.container}>
                <ScrollView contentContainerStyle={styles.contentContainer}>
                    {questions}
                </ScrollView>
            </View>
        )


const styles = {
    container:{
        flex:1
        justifyContent:'stretch'
    },  
    contentContainer:{
        flex:1

    }
}

still no luck.

[samthui]

Setting ScrollView's style={{width: "100%"}} works for me.

[flikQ]

I found the issue was caused by alignItems: 'center' for set on the parent container.

[GetSource1234]

I have the same issue. The weirdest thing that it occurs only on Mac OS(Sierra 10.12.6) within Android Emulator. The same source code working properly if run it on Windows within Android Emulator.

[pallavbakshi]

Has anyone found a way (not hacks) ?
----UPDATED on 1/1/18-----
I found a solution here: https://github.com/facebook/react-native/issues/4099#issuecomment-354311755

[schreiber2011]

I found the solution in stack overflow, credits to Akhil.
I did a small change from fill_parent to match_parent just to update xmls definitions.
The magic propertie is fillViewPort="true".

android:id="@+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true" >

https://stackoverflow.com/questions/10962602/cant-resize-a-relativelayout-inside-a-scrollview-to-fill-the-whole-screen/10962615#10962615?newreg=2a39f47cfe9d4a3d8738880fcf9f6fc7