Unable to position element to the right - react-native

Question

I have a few elements on my app screen and I want the last one to be positioned towards the bottom-right (I'm using the Expo client on Android). Here's the render() function from App.js:
render() {
return (
<View style={styles.container}>
<StatusBar
hidden={true}
/>
<TodoItem/>
<TodoItem/>
<TodoItem/>
<AddTodoButton style={styles.button}/>
</View>
);
}
So, it's the <AddTodoButton\> that I want to position. Here's the styles I'm using:
const styles = StyleSheet.create({
container: {
backgroundColor: '#fcf7e2',
height: '100%',
},
button: {
position: 'absolute',
bottom: 0,
right: 0,
}
});
The code for AddTodoButton is as follows:
const Button = () => (
<Text style={styles.button}>+</Text>
);
const styles = StyleSheet.create({
button: {
fontSize: 30,
paddingLeft: 21,
paddingTop: 7,
width: 60,
height: 60,
backgroundColor: '#FF4456',
borderRadius: 60/2,
overflow: 'hidden',
}
});
I've tried several variations of styles for the button property, but the element doesn't respond and is stuck to the left edge right after the three <TodoItem/> (which are nothing but <Text> as of now).
I'm happy doing this in Flexbox, except that I don't know how to and managed to mess up the layout completely when I tried. :|
Any thoughts?

Answer 1

See if simply adding flex:1 to container style works, if not try the following
render() {
return (
<View style={styles.container}>
<StatusBar
hidden={true}
/>
<TodoItem/>
<TodoItem/>
<TodoItem/>
<View style={styles.buttonContainer}>
<AddTodoButton style={styles.button}/>
</View>
</View>
);
}
// In your styles, do the following
container: {
flex: 1
}
buttonContainer{
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'flex-end',
alignSelf: 'flex-end'
}
Not sure about your AddTodoButton but I'd recommend looking there to see if that's the one not pushing things to the right.

Answer 2

I think you just simply did not apply the style to your button:
const Button = (props) => (
<Text style={[styles.button,props.style]}>+</Text>
);
const styles = StyleSheet.create({
button: {
fontSize: 30,
paddingLeft: 21,
paddingTop: 7,
width: 60,
height: 60,
backgroundColor: '#FF4456',
borderRadius: 60/2,
overflow: 'hidden',
}
});