React Native gives us style attribute left, right, top, bottom and using them we can stick any view at a particular position on mobile phone screen. Bottom button is mostly used in application where developer needs to show a loading button or loading View at the base of application scree. So in this tutorial we would going to Align Position Button View at Bottom of Screen in both android iOS react native application, This type of View also called as Fixed Footer View in react native application.
Contents in this project Align Position Button View at Bottom of Screen in iOS Android react native app:
1. Import Platform, StyleSheet, View and Text component in your project.
|
1 2 3 |
import React, { Component } from 'react'; import { Platform, StyleSheet, View, Text } from 'react-native'; |
2. Create a Root View in render’s return block, This view would be our main container view.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
render() { return( <View style = { styles.MainContainer }> </View> ); } |
3. Now we would create a BOTTOM view inside main container view. We would call a style class named as bottomView on this View.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
render() { return( <View style = { styles.MainContainer }> <Text> This is Main Container View. </Text> <View style={ styles.bottomView} > <Text style={styles.textStyle}>This is Bottom View.</Text> </View> </View> ); } |
4. Creating Style.
MainContainer : Style class for main root view.
bottomView : Style class for Bottom Fixed Footer View. In this class the main work of fixing footer at the bottom of screen is doing the bottom: 0 attribute of style. This would set its default position at the bottom and margin from bottom is 0(zero), so it will fixed at the bottom of screen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
const styles = StyleSheet.create( { MainContainer: { flex: 1, alignItems: 'center', justifyContent: 'center', paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0 }, bottomView:{ width: '100%', height: 50, backgroundColor: '#FF9800', justifyContent: 'center', alignItems: 'center', position: 'absolute', bottom: 0 }, textStyle:{ color: '#fff', fontSize:22 } }); |
5. Complete source code for App.js File :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
import React, { Component } from 'react'; import { Platform, StyleSheet, View, Text } from 'react-native'; export default class App extends Component<{}> { render() { return( <View style = { styles.MainContainer }> <Text> This is Main Container View. </Text> <View style={ styles.bottomView} > <Text style={styles.textStyle}>This is Bottom View.</Text> </View> </View> ); } } const styles = StyleSheet.create( { MainContainer: { flex: 1, alignItems: 'center', justifyContent: 'center', paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0 }, bottomView:{ width: '100%', height: 50, backgroundColor: '#FF9800', justifyContent: 'center', alignItems: 'center', position: 'absolute', bottom: 0 }, textStyle:{ color: '#fff', fontSize:22 } }); |
Screenshot in Android device:
Screenshot in iOS device: 
using stack navigation is possible to navigate to another page using onPress command( while clicking a button).
i require to navigate to another page when a condition (if) fails (with out pressing a button) .in my componentWillMount() function of my application . kindly provide a solution
Yes Jithin it is possible using Stack Navigation, read this tutorial : https://reactnativecode.com/navigate-second-activity-stacknavigator/
thank you for your grate support
Welcome Jithin 🙂 .
I used similar solution to fix the position of form buttons on footer but had issue when the keyboard layout is open as the main view height would change in Android
Mika then you need to put your all view inside KeyboardAvodingView .
it’s Really work.Thanks