0

I have this Component:

    render() {
    return (
        <ScrollView style={styles.container}>
            <View style={styles.body}>
                <View style={styles.LogoContainer}>
                    <Image resizeMode="contain" style={styles.logo} source={require('../../images/logo.png')}/>
                </View>
                <View style={styles.bottomContainer}>
                    <TextInput selectionColor="white" placeholderTextColor="white" placeholder="Email" style={styles.input} underlineColorAndroid='transparent'/>
                    <TextInput selectionColor="white" placeholderTextColor="white" secureTextEntry={true} placeholder="Password" style={styles.input} underlineColorAndroid='transparent'/>
                    <TouchableOpacity onPress={() => {}} style={styles.btn}>
                        <Text style={styles.btnTxt}>LOG IN</Text>
                    </TouchableOpacity>
                </View>
            </View>
            <View style={styles.footer}>
                <TouchableOpacity onPress={() => {}}>
                    <Text style={[styles.footerTxt, {color: '#fff'}]}>Don’t have an account?</Text>
                </TouchableOpacity>
            </View>
        </ScrollView>
    )
}

What I want is to position the latest view with style={styles.footer} (Sticky Footer). I tried to set position: "absolute, bottom:0", but not working. Parent container (ScrollView) has height:"100%" and position:"relative", if this matter for React Native.

gdfgdfg
  • 3,181
  • 7
  • 37
  • 83
  • What do you mean by "not to be fixed" ? Your question needs to further explanation. – Gui Herzog Jan 11 '18 at 18:11
  • Hi I mean not with `position:fixed` at the bottom. Not Sticky Footer. – gdfgdfg Jan 11 '18 at 18:15
  • Care to draw the layout you want? I still don't know what you want. – Gui Herzog Jan 11 '18 at 18:18
  • You need to provide your style as well. "Sticky footer" normally mean _"positioned at bottom of the viewport even with smaller content, but pushed down with bigger content"_, what does it mean to you? – Asons Jan 11 '18 at 18:56
  • I mean if you scroll the footer moves like every other element and if the sum of all content is less than screen height, the footer to be at the bottom. – gdfgdfg Jan 11 '18 at 19:04
  • That is a "Sticky footer", which you say you don't want, so update your question and remove that, along with adding the styles. – Asons Jan 11 '18 at 19:10

1 Answers1

0

I found this way. First remove <View style={styles.body}> element and add contentContainerStyle to the ScrollView like this:

render() {
return (
        <ScrollView contentContainerStyle={styles.container}>
            <View style={styles.LogoContainer}>
                <Image resizeMode="contain" style={styles.logo} source={require('../../images/logo.png')}/>
            </View>
            <View style={styles.bottomContainer}>
                <TextInput selectionColor="white" placeholderTextColor="white" placeholder="Email" style={styles.input} underlineColorAndroid='transparent'/>
                <TextInput selectionColor="white" placeholderTextColor="white" secureTextEntry={true} placeholder="Password" style={styles.input} underlineColorAndroid='transparent'/>
                <TouchableOpacity onPress={() => {}} style={styles.btn}>
                    <Text style={styles.btnTxt}>LOG IN</Text>
                </TouchableOpacity>
            </View>
            <View style={styles.footer}>
                <TouchableOpacity onPress={() => {}}>
                    <Text style={[styles.footerTxt, {color: '#fff'}]}>Don’t have an account?</Text>
                </TouchableOpacity>
            </View>
        </ScrollView>
      )
}

Next add these styles to the ScrollView:

const styles = StyleSheet.create({
container:{
   flex: 1,
   justifyContent: 'space-between',
}, ....

and if needed can be added height to the ScrollView > View.

gdfgdfg
  • 3,181
  • 7
  • 37
  • 83