Navigate back to the homepage

How to set button bottom of the screen in react native?

Infinitbility
React Native
January 1st, 2022 · 1 min read
How to set button bottom of the screen in react native?

Hello Friends 👋,

Welcome to Infinitbility.

Sometimes, we need to create on bottom fixed button so users can press button at any level of scrolling they don’t need to go end of the screen to submit a button.

So, Today we will see how we can create bottom fixed button in react native.

First, we will create sample button and then we will add bottom fixed styles to make bottom fixed button.

1import React from 'react';
2import { StyleSheet, Button, View, SafeAreaView, Text, Alert } from 'react-native';
3
4const App = () => (
5 <View style={styles.container}>
6 <Button
7 title="Press me"
8 onPress={() => Alert.alert('Cannot press this one')}
9 />
10 </View>
11);
12
13const styles = StyleSheet.create({
14 container: {
15 right: 10,
16 left: 10,
17 position: 'absolute',
18 bottom: 10,
19 }
20});
21
22export default App;

Output

React native bottom button example
React native bottom button example

Thanks for reading…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo

Tutorials

Categories

More articles from Infinitbility

How to show a component on button click in react native?

How to show a component on button click in react native?

React Native, show component on button click example.

December 31st, 2021 · 1 min read
How to change textinput placeholder text color in react native?

How to change textinput placeholder text color in react native?

React Native, change textinput placeholder color.

December 30th, 2021 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]