React Native fixed footer React Native fixed footer javascript javascript

React Native fixed footer


Here's the actual code based on Colin's Ramsay answer:

<View style={{flex: 1}}>  <ScrollView>main</ScrollView>  <View><Text>footer</Text></View></View>


Off the top of my head you could do this with a ScrollView. Your top-level container could be a flex container, inside that have a ScrollView at the top and your footer at the bottom. Then inside the ScrollView just put the rest of your app as normal.


I'm using fixed footers for buttons in my app. The way I implement a fixed footer is like so:

<View style={{flex: 1}}><View><Text>my text</Text></View><View style={{position: 'absolute', left: 0, right: 0, bottom: 0}}><Text>My fixed footer</Text></View></View>

And if need the footer to move up when a keyboard appears for instance you can use:

const {  DeviceEventEmitter } = Reactclass MyClass {  constructor() {     this.state = {       btnLocation: 0     }  }  componentWillMount() {     DeviceEventEmitter.addListener('keyboardWillShow', this.keyboardWillShow.bind(this))     DeviceEventEmitter.addListener('keyboardWillHide', this.keyboardWillHide.bind(this))  }  keyboardWillShow(e) {    this.setState({btnLocation: e.endCoordinates.height})  }  keyboardWillHide(e) {    this.setState({btnLocation: 0})  }}

Then use {bottom: this.state.btnLocation} in your fixed footer class. I hope this helps!