react-native position element at the bottom - react-native

Question

I am trying to move a react native component called "forum" to the bottom of the screen, I tried position: fixed, bottom:0 but it didn't work
I also tried 'flex-end' and still didn't work
any idea what's wrong?
here is the expo code:
import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { DrawerNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('DrawerOpen')}>
<Text>Open Drawer</Text>
</TouchableOpacity>
<Text style={{ fontWeight: 'bold', marginTop: 20 }}>Home</Text>
</View>
);
}
}
class Enquiry extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('DrawerOpen')}>
<Text>Open Drawer</Text>
</TouchableOpacity>
<Text style={{ fontWeight: 'bold', marginTop: 20 }}>Enquiry</Text>
</View>
);
}
}
class Batches extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('DrawerOpen')}>
<Text>Open Drawer</Text>
</TouchableOpacity>
<Text style={{ fontWeight: 'bold', marginTop: 20 }}>Batches</Text>
</View>
);
}
}
class Forum extends React.Component {
render() {
return (
<View style={{ flex:1,justifyContent:'center',alignItems: 'center',position:'absolute',bottom:0}}>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('DrawerOpen')}>
<Text>Open Drawer</Text>
</TouchableOpacity>
<Text style={{ fontWeight: 'bold',marginBottom:36}}>Forum</Text>
</View>
);
}
}
const MyDrawerNavigator = new DrawerNavigator(
{
Home: HomeScreen,
Batches:Batches,
Enquiry:Enquiry,
Forum:Forum,
},
{
drawerBackgroundColor: 'rgba(255,255,255,.9)',
contentOptions: {
activeTintColor: '#fff',
activeBackgroundColor: '#6b52ae',
},
}
);
export default MyDrawerNavigator;
I am not allowed to share images but click the link to see
enter image description here

Answer 1

The valid position option in react native is relative or absolute. The default value is relative.
If you want scroll content and fix position of Forum in your screen, you have to separate your view hierarchy like the following and use absolute position.
<View>
<ScrollView>
...anything content
</ScrollView>
<Forum style={{position:'absolute', bottom: 0}}/>
</View>
<...>
<MyDrawerNavigator .../>
<Forum style={{position:'absolute', bottom: 0}} .../>
<.../>