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: 
Also Read :
React Native JSON FlatList with Images and Text iOS Android Tutorial
React Native Add onLongPress on Button using TouchableOpacity
React Native Collapsible Expandable Animated Header on ScrollView
React Native Generate SHA256 Encoded Hash Key Android iOS Example
Create Global Scope Variables in React Native used between Activities
