CODEWITHSUNDEEP
react-native
Kid
Kid

Reputation: 1240

React Native Bottom Bar Height

First, I am not sure if it is correct to write as Bottom Bar.

Anyhow, I am going to place a button at the bottom and it's not working as expected because of the phone.

First one is iphone 11 and 2nd is iphone 8.

So as I wanted some gap from the bottom, the first image looks good. That's what I want but 2nd image is not. (NOTE: I am using SafeAreaView)

enter image description here enter image description here

I've attached the code for the component. (the yellow button)

import React, {memo} from 'react';
import {TouchableOpacity, Image, StyleSheet} from 'react-native';

const NextButton = ({goNext, ...props}) => (
  <TouchableOpacity onPress={goNext} style={[styles.container, props]}>
    <Image style={styles.image} source={require('../assets/arrow_next.png')} />
  </TouchableOpacity>
);

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    bottom: 0,
    right: 0,
  },
  image: {
    width: 48,
    height: 48,
    backgroundColor: '#d0cf22',
    borderRadius: 10,
  },
});

export default memo(NextButton);

Upvotes: 5

Views: 7756

Answers (2)

SKeney
SKeney

Reputation: 2301

To add to @DevLover answer as he is exactly correct. I typically might use a method similar to below for applicable screens.

import { useSafeAreaInsets } from 'react-native-safe-area-context';

Of which I can get the insets using in the component

const insets = useSafeAreaInsets();

And check bottom inset using insets.bottom.

Upvotes: 11

Shing Ho Tan
Shing Ho Tan

Reputation: 951

I think you wrapped that button in SafeAreaView so there's some space in iPhone X.

I think you should get the safe area bottom size and set the margin depends on it.

import SafeArea, { type SafeAreaInsets } from 'react-native-safe-area'

//Retrieve safe area insets for the root view

SafeArea.getSafeAreaInsetsForRootView()
.then((result) => {
   console.log(result)
   // { safeAreaInsets: { top: 44, left: 0, bottom: 34, right: 0 } }
})

Reference : How to know the useful height of an iOS device in React Native?

Upvotes: 1

Related Questions