React Native fixed footer

Question

I try to create react native app that looks like existing web app  I have a fixed footer at bottom of window  Do anyone have idea how this can be achieved with react native   in existing app it s simple    footer     position  fixed    bottom  0

User · Answer

import  Dimensions  from  react-native   const WIDTH   Dimensions get  window   width  const HEIGHT   Dimensions get  window   height    then on the write this  styles   position   absolute    top  HEIGHT-80   left  0   right  0    worked like a charm

User · Answer

i created a package  it may meet your needs  https   github com caoyongfeng0214 rn-overlaye  lt View style   paddingBottom 100   gt        lt View gt          lt  View gt        lt Overlay style   left 0  right 0  bottom 0   gt           lt View gt  lt Text gt Footer lt  Text gt  lt  View gt        lt  Overlay gt   lt  View gt

User · Answer

When flex is a positive number  it makes the component flexible and it will be sized proportional to its flex value  So a component with flex set to 2 will take twice the space as a component with flex set to 1    x000D   x000D      lt View style   flex  1  gt  x000D               x000D        lt ScrollView gt  x000D            your scroll able content will be placed above your fixed footer content   x000D            when your content will grow bigger and bigger it will hide behind  x000D            footer content   x000D        lt  ScrollView gt  x000D   x000D        lt View style  styles footerContainer  gt  x000D            your fixed footer content will sit fixed below your screen  x000D        lt  View gt  x000D   x000D   lt  View gt  x000D   x000D   x000D

User · Answer

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

User · Answer

For Android problems with this   in app src AndroidManifest xml change windowSoftInputMode to the following        lt activity    android windowSoftInputMode  stateAlwaysHidden adjustPan  gt    I had absolutely no problems with this in ios using react-native and keyboardAwareScroll   I was about to implement a ton of code to figure this out until someone gave me this solution  Worked perfectly

User · Answer

The best way is to use justifyContent property   lt View style   flexDirection  column  justifyContent  flex-end    gt        lt View gt           lt Text gt fixed footer lt  Text gt       lt  View gt   lt  View gt    if you have multiple view elements on screen  then you can use    lt View style   flexDirection  column  justifyContent  space-between    gt        lt View gt           lt Text gt view 1 lt  Text gt       lt  View gt       lt View gt           lt Text gt view 2 lt  Text gt       lt  View gt       lt View gt           lt Text gt fixed footer lt  Text gt       lt  View gt   lt  View gt

User · Answer

I think best and easy one would be as below  just place rest of ur view in a content and footer in a separate view     lt Container gt      lt Content gt        lt View gt        Ur contents      lt  View gt     lt  Content gt     lt View gt    Footer    lt  View gt   lt  Container gt     or u can use footer from native-base    lt Container gt     lt Content gt       lt View gt  Ur contents      lt  View gt     lt  Content gt   lt Footer gt  Footer  lt  Footer gt   lt  Container gt

User · Answer

I m using fixed footers for buttons in my app  The way I implement a fixed footer is like so    lt View style   flex  1   gt   lt View gt  lt Text gt my text lt  Text gt  lt  View gt   lt View style   position   absolute   left  0  right  0  bottom  0   gt  lt Text gt My fixed footer lt  Text gt  lt  View gt   lt  View gt    And if need the footer to move up when a keyboard appears for instance you can use   const    DeviceEventEmitter     React  class 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

User · Answer

if you just use react native so you can use the following code   lt View style   flex 1   gt       Your Main Content     lt View style   flex 3   gt    lt ScrollView gt         Your List View  etc      lt  ScrollView gt    lt  View gt       Your Footer      lt View style   flex 1   gt        Elements     lt  View gt      lt  View gt    also  you can use https   docs nativebase io  in your react native project and then do something like the following   lt Container gt      Your Main Content     lt Content gt    lt ScrollView gt         Your List View  etc      lt  ScrollView gt    lt  Content gt      Your Footer     lt Footer gt        Elements     lt  Footer gt    lt  Container gt    React Native  NativeBase io

User · Answer

The way I did this was to have a view  lets call it P  with flex 1  then inside that view have 2 more views  C1 and C2  with flex 0 9 and 0 1 respectively  you can change the flex heights to required values   Then  inside the C1 have a scrollview  This worked perfectly for me  Example below    lt View style   flex  1   gt       lt View style   flex  0 9   gt           lt ScrollView gt               lt Text style   marginBottom  500   gt scrollable section lt  Text gt           lt  ScrollView gt       lt  View gt       lt View style   flex  0 1   gt           lt Text gt fixed footer lt  Text gt       lt  View gt   lt  View gt

User · Answer

Simple stuff here      Incase you don t need a ScrollView for this approach you can go with the below code to achieve Something like this          lt View style   flex  1  backgroundColor  grey    gt       lt View style   flex  1  backgroundColor   red      gt       lt View style   height  100  backgroundColor   green      gt   lt  View gt

User · Answer

Alexander Thanks for solution  Below is code exactly what you looking for  import React   PropTypes   from  react   import  View  Text  StyleSheet TouchableHighlight ScrollView Image  Component  AppRegistry  from  react-native    class mainview extends React Component    constructor props          super props           render         return         lt View style  styles mainviewStyle  gt           lt ContainerView  gt             lt View style  styles footer  gt             lt TouchableHighlight style  styles bottomButtons  gt                 lt Text style  styles footerText  gt A lt  Text gt             lt  TouchableHighlight gt             lt TouchableHighlight style  styles bottomButtons  gt                 lt Text style  styles footerText  gt B lt  Text gt             lt  TouchableHighlight gt             lt  View gt         lt  View gt                class ContainerView extends React Component   constructor props          super props      render         return         lt ScrollView style    styles scrollViewStyle  gt             lt View gt               lt Text style  styles textStyle  gt  Example for ScrollView and Fixed Footer lt  Text gt             lt  View gt         lt  ScrollView gt                var styles   StyleSheet create     mainviewStyle      flex  1    flexDirection   column      footer      position   absolute     flex 0 1    left  0    right  0    bottom  -10    backgroundColor  green     flexDirection  row     height 80    alignItems  center      bottomButtons      alignItems  center     justifyContent   center     flex 1     footerText      color  white     fontWeight  bold     alignItems  center     fontSize 18     textStyle      alignSelf   center     color   orange     scrollViewStyle      borderWidth  2    borderColor   blue         AppRegistry registerComponent  TRYAPP        gt  mainview    Entry Point    and Root Component of The App   Below is the Screenshot

User · Answer

You might also want to take a look at NativeBase  http   nativebase io    This a library of components for React Native that include some nice layout structure  http   nativebase io docs v2 0 0 components anatomy  including Headers and Footers   It s a bit like Bootstrap for Mobile

User · Answer

Below is code to set footer and elements above   import React    Component   from  react   import   StyleSheet  View  Text  ScrollView   from  react-native   export default class App extends Component       render           return          lt View style  styles containerMain  gt           lt ScrollView gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt             lt Text gt  Main Content Here lt  Text gt           lt  ScrollView gt           lt View style  styles bottomView  gt             lt Text style  styles textStyle  gt Bottom View lt  Text gt           lt  View gt         lt  View gt               const styles   StyleSheet create     containerMain        flex  1      alignItems   center          bottomView        width   100        height  50      backgroundColor    EE5407       justifyContent   center       alignItems   center       position   absolute       bottom  0         textStyle        color    fff       fontSize  18

User · Answer

One could achieve something similar in react native with position  absolute  let footerStyle       position   absolute     bottom  0      There are a few things to keep in mind though    absolute positions the element relative to its parent  You might have to set the width and hight of the element manually  Width and hight will change when orientation changes  This has to be managed manually   A practical style definition would look something like this   import   Dimensions   from  react-native    var screenWidth   Dimensions get  window   width    full screen width  let footerStyle       position   absolute     bottom  0    width  screenWidth    height  60

User · Answer

Here s the actual code based on Colin s Ramsay answer    lt View style   flex  1   gt     lt ScrollView gt main lt  ScrollView gt     lt View gt  lt Text gt footer lt  Text gt  lt  View gt   lt  View gt

User · Answer

Set android windowSoftInputMode  adjustPan  in your manifest file  and it will work as you expect

User · Answer

I found using flex to be the simplest solution    lt View style   flex 1       justifyContent   space-around        alignItems   center       flexDirection   row     gt      lt View style   flex 8   gt        Main Activity    lt  View gt     lt View style   flex 1   gt        Footer    lt  View gt     lt  View gt

User · Answer

You get the Dimension first and then manipulate it through flex style  var Dimensions   require  Dimensions   var  width  height    Dimensions get  window     In render   lt View style   flex  1   gt       lt View style   width  width  height  height - 200   gt main lt  View gt       lt View style   width  width  height  200   gt footer lt  View gt   lt  View gt    The other method is to use flex   lt View style   flex  1   gt       lt View style   flex   8   gt main lt  View gt       lt View style   flex   2   gt footer lt  View gt   lt  View gt

User · Answer

Suggestion 1   gt  Body with fixed footer  lt View style    flex  1  backgroundColor   gray     gt            lt View style    flex  9  backgroundColor   gray  alignItems   center   justifyContent   center       gt             lt Text style   color  white    gt    Header or Body lt  Text gt           lt  View gt             lt View style    flex  1  backgroundColor   yellow   alignItems   center   justifyContent   center      gt             lt Text gt    Footer lt  Text gt           lt  View gt    lt  View gt    Edit 2   gt  Body  amp  Fixed footer with tabs  lt View style    flex  1  backgroundColor   gray     gt            lt View style    flex  9  backgroundColor   gray   alignItems   center   justifyContent   center      gt             lt Text style    color   white     gt    Header or Body lt  Text gt           lt  View gt             lt View style    flex  1  backgroundColor   yellow   alignItems   center   justifyContent   center      gt             lt View style    flex  1  flexDirection   row     gt               lt TouchableOpacity style    flex  1  alignItems   center   justifyContent   center   backgroundColor   white     gt                 lt View gt                   lt Text gt                       Home                lt  Text gt                 lt  View gt               lt  TouchableOpacity gt               lt TouchableOpacity style    flex  1  alignItems   center   justifyContent   center   backgroundColor   white     gt                 lt View gt                   lt Text gt                       Settings                lt  Text gt                 lt  View gt               lt  TouchableOpacity gt             lt  View gt           lt  View gt   lt  View gt    Notes import  TouchableOpacity  from  react-native   Advantages We can use this simple footer without react bottom navigation

[javascript] React Native fixed footer

Examples related to javascript

Examples related to react-native