Breaking News: Grepper is joining You.com. Read the official announcement!

react native scrollview item bottom

Beautiful Bee answered on May 16, 2022 Popularity 10/10 Helpfulness 3/10

answer react native scrollview item bottom

react native scrollview item bottom

Comment

-1

/*
The key is the contentContainerStyle property
(doc: https://facebook.github.io/react-native/docs/scrollview#contentcontainerstyle).
"These styles will be applied to the scroll view content container which wraps all of the child views. "

After setting flexGrow: 1, justifyContent: 'space-between',
flexDirection: 'column' in contentContainerStyle,
one can set justifyContent: 'flex-start' for the upper container view 
with the text, and justifyContent: 'flex-end' for the lower 
container view with the buttons. 
*/

<ScrollView
  contentContainerStyle={{ flexGrow: 1, justifyContent: 'space-between', flexDirection: 'column' }}
  style={{ backgroundColor: 'white', paddingBottom: 20 }}
>
  <View style={{ flex: 1, justifyContent: 'flex-start' }}>
    <Text>Some text with different length in different cases, or some input fileds.</Text>
  </View>
  <View style={{ flex: 1, justifyContent: 'flex-end' }}>
    <View>
      <TouchableOpacity style={[commonStyles.greenButton, styles.buttonPadding]}>
        <Text style={commonStyles.greenButtonTitle}>Next</Text>
      </TouchableOpacity>
    </View>
    <View>
      <TouchableOpacity style={styles.cancelButtonContainer}>
        <Text style={styles.cancelButton}>Cancel</Text>
      </TouchableOpacity>
    </View>
  </View>
</ScrollView>

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: javascript react-native scrollview

Link to this answer
Share Copy Link

Contributed on May 16 2022

Beautiful Bee

0 Answers Avg Quality 2/10

react native scrollview item bottom

Contents

More Related Answers

react native scrollview item bottom

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.