I was unable to scroll to the bottom when using the following configuration:

<View>          <-View1
  <View>        <-View2
    <Text>a</Text>
    (...5lines)
  </View>
  <ScrollView>
    <Text>1</Text>
    <Text>2</Text>
    (...70lines)    
  </ScrollView>
</View>

The same number of lines in View2, the end in ScrollView is not visible.

I've looked into it but I only found hard-coded solutions like padding-bottom. In the first place, it's strange that the end is hidden, so I would like to know how to scroll correctly to the end.

※I'm Japanese. I'm using a translation tool, but I'm sorry for my poor English.

I was unable to scroll to the bottom when using the following configuration:

<View>          <-View1
  <View>        <-View2
    <Text>a</Text>
    (...5lines)
  </View>
  <ScrollView>
    <Text>1</Text>
    <Text>2</Text>
    (...70lines)    
  </ScrollView>
</View>

The same number of lines in View2, the end in ScrollView is not visible.

I've looked into it but I only found hard-coded solutions like padding-bottom. In the first place, it's strange that the end is hidden, so I would like to know how to scroll correctly to the end.

※I'm Japanese. I'm using a translation tool, but I'm sorry for my poor English.

• android
• react-native

Share Improve this question Follow asked Mar 11 at 15:06 user29964711user29964711 1111 bronze badge 3

• is this the solution you want ? :snack.expo.dev/MiPBnEgUGRjJOR6HYI-JM – Suppose Commented Mar 13 at 9:08
• you need to set style with flex:1 to component – Suppose Commented Mar 13 at 9:10
• This was achieved by add style flex:1. Thank you!!! – user29964711 Commented Mar 18 at 5:08

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

This was in the comments section, but I'll post it here as well.
Thank you @Suppose!

This was achieved by add style flex:1.

<View style={{ flex:1 }}>
  <View>
    <Text>a</Text>
    (...5lines)
  </View>
  <ScrollView>
    <Text>1</Text>
    <Text>2</Text>
    (...70lines)    
  </ScrollView>
</View>