Add a view at bottom of the page in a scrollview

Question

i have put a scrollview over all my view to prevent the keyboard from moving page elements.

So this is the result with the scrollview and without the scrollview:

Without Scrollview

With Scrollview

That work but now i have a new problem. My text" Dont have an account yet? Signup" is supposed to be at the bottom of the screen .

What i have :

I have

What i want :

I want

I would know how to put my view at the bottom of my scrollview.

My css for this view :

signupTextCont: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'flex-end',
  paddingVertical: 16,
  flexDirection: 'row',

},

This line :alignItems: 'flex-end'

Normaly, it's suppose to put the text at the bottom of the screen but because i have a scrollview he won't be at bottom. How i am suppose to do that?

The render:

     <ScrollView style={styles.main_container}>
     <View  style={styles.container} >
       <Text>{'\n'}</Text>
       <View style={styles.container}>
           <TextInput style={styles.inputBox}
           onChangeText={(email) => this.setState({email})}
           underlineColorAndroid='rgba(0,0,0,0)'
           placeholder="Email"
           placeholderTextColor = "#002f6c"
           selectionColor="#fff"
           keyboardType="email-address"
           onSubmitEditing={()=> this.password.focus()}/>

           <TextInput style={styles.inputBox}
           onChangeText={(password) => this.setState({password})}
           underlineColorAndroid='rgba(0,0,0,0)'
           placeholder="Password"
           secureTextEntry={true}
           placeholderTextColor = "#002f6c"
           ref={(input) => this.password = input}
           />

           <TouchableOpacity style={styles.button}>
               <Text style={styles.buttonText} onPress={this.saveData}>{this.props.type}Login</Text>
           </TouchableOpacity>
       </View>
       <View
        style={{
          borderBottomColor: 'gray',
          borderBottomWidth: 1,
          alignSelf:'stretch',
          width: Dimensions.get('window').width-30,
          backgroundColor: 'rgba(164, 164, 164, 0.44)',
          marginBottom:10,
          marginLeft:10,
          marginRight:10
        }}

      />
      <Text
      style={{
        marginBottom:10
      }}
      >or</Text>
       <LoginButton

       publishPermissions={["publish_actions"]}
       readPermissions={['public_profile', 'email', 'user_friends']}
         onLoginFinished={
           (error, result) => {
             if (error) {
               console.log("login has error: " + result.error);
             } else if (result.isCancelled) {
               console.log("login is cancelled.");
             } else {

               AccessToken.getCurrentAccessToken().then((data) => {
                  // Permet d'appeler la fonction _responseInfoCallback pour récupérer les informations demandé à l'api de facebook.
                 const infoRequest = new GraphRequest(
                     '/me?fields=email,name,picture',
                     null,
                     this._responseInfoCallback
                   );
                   // Start the graph request.
                   new GraphRequestManager().addRequest(infoRequest).start();
                 }
               )
             }
           }
         }
         onLogoutFinished={() => console.log("logout.")}/>
       <View style={styles.signupTextCont}>
           <TouchableOpacity onPress={this._signup}><Text style={styles.signupButton}>Dont have an account yet? Signup </Text></TouchableOpacity>
       </View>
     </View >
    </ScrollView>

 );

} }

Css:

const styles = StyleSheet.create({
main_container: {
flexGrow:1,
backgroundColor: 'white',

}, container: { flex: 1, justifyContent: 'center', alignItems: 'center'

},
signupTextCont: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'flex-end',
  paddingVertical: 16,
  flexDirection: 'row',

},
signupText: {
  color: '#12799f',
  fontSize:16,
},
signupButton: {
    color: '#12799f',
    fontSize:16,
    fontWeight: '500',
},
inputBox: {
    width: 300,
    backgroundColor: '#eeeeee',
    borderRadius: 25,
    paddingHorizontal: 16,
    fontSize: 16,
    color: '#002f6c',
    marginVertical: 10
},
button: {
    width: 300,
    backgroundColor: '#4f83cc',
    borderRadius: 25,
    marginVertical: 10,
    paddingVertical: 12
},
buttonText: {
    fontSize: 16,
    fontWeight: '500',
    color: '#ffffff',
    textAlign: 'center'
}

});

Someone have a solution? Thank you!

Answer 1

You can wrap other codes except the signup into View and set the 'space-between' to container style.

<View style={styles.container}>
  <View>
    <Text>{'\n'}</Text>
    ...
    onLogoutFinished={() => console.log("logout.")}/>
  </View>
  <View style={styles.signupTextCont}>
     <TouchableOpacity onPress={this._signup}><Text style={styles.signupButton}>Dont have an account yet? Signup </Text></TouchableOpacity>
  </View>
</View>

container: {
  justifyContent: 'space-between'
}
(you can check 'space-around or 'space-evenly' and you can use anyone if you want.)