CODEWITHSUNDEEP
androidiosreact-native
Naim Berk Tumer
Naim Berk Tumer

Reputation: 129

Align Button to Bottom in ScrollView

I'm trying to align a button to bottom of the ScrollView and make the ScrollView fill the page. First screenshot is how it looks like and the second one is what I want.

Current Status

What I want

In the screenshots, ScrollView is not used since there aren't enough items but number of items inside of the ScrollView is not fixed.

Render():

<ScrollView style={styles.scrollViewContainer}>
      <View style={{flex: 1, justifyContent: 'space-between', flexDirection: 'column'}}>
        <View style={{flex: 1}}>
          <Text style={styles.bigTitle}>Title</Text>
          <View style={styles.formContainer}>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
          </View>
        </View>
        <SignupButton onPress={this.submit} title="Next Step" image={require("../Images/right_btn.png")} boldText={true} />
      </View>
    </ScrollView>

Style:

  scrollViewContainer: {
    backgroundColor: '#fff',
  },
  formContainer: {
    paddingTop: 10,
    paddingLeft: 50,
    paddingRight: 50,
    paddingBottom: 30,
  },
  bigTitle: {
    fontSize: 24,
    textAlign: 'center',
    marginTop: 20,
    marginBottom: 20,
  },

Upvotes: 3

Views: 9948

Answers (2)

A-J-A
A-J-A

Reputation: 2474

Try adding justifyContent:'space-between' and flex:1 to contentContainerStyle to ScrollView

  <ScrollView style={style.container} contentContainerStyle={[{flex:1,justifyContent:'space-between'}]} >
    <LIST />
    <Button />
  </ScrollView>

Upvotes: 3

Ariel Yust
Ariel Yust

Reputation: 615

Here you go just take it out of the ScrollView and make sure that it's at the bottom, if your parent is Relativeandroid:layout_alignParentBottom="true" to your SignUpbutton, if it's a LinearLayout make sure this is the last View in the xml and that the LinearLayout's height is filling the screen, If it's FrameLayout then I believe you need to use gravity set to bottom :)

<SomeLayout>
    <ScrollView style={styles.scrollViewContainer}>
      <View style={{flex: 1, justifyContent: 'space-between', flexDirection: 'column'}}>
        <View style={{flex: 1}}>
          <Text style={styles.bigTitle}>Title</Text>
          <View style={styles.formContainer}>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
          </View>
        </View>
      </View>
    </ScrollView>
        <SignupButton onPress={this.submit} title="Next Step" image={require("../Images/right_btn.png")} boldText={true} />
</SomeLayout>

SomeLayout is a RelativeLayout or LinearLayout or any other Layout your using...

Upvotes: 0

Related Questions