my app runs slow on devices is it because of the images that I use and how can I remove hard-coded width and height

Question

In my present code, I have created a custom navigation bar and I use this as my navigation bar when I installed this app on a phone of smaller screen size a button which appears at the right-end of the screen is not shown and I guess this is because of the specific width and height of the buttons that I use in this code

actually, the whole layout of buttons and the images change when I use them in other devices of different screen size

Is there any way remove these hard-coded dimensions and make it work on all the devices with any size

My app is also running slow on devices it takes time to load images is it because of this?

my NavBar.js file:

import {
 View, Image, StatusBar, TouchableWithoutFeedback, Dimensions
} from 'react-native';
import React, { Component } from 'react';
import { Actions } from 'react-native-router-flux';

const w = Dimensions.get('window').width;

class NavBar extends Component {
  render() {
    return (
      <View>
      <StatusBar />
      <View
      style={{
        width: w,
         position: 'absolute',
         flexDirection: 'row',
          backgroundColor: 'transparent',
         }} >
      <TouchableWithoutFeedback onPress={() => Actions.pop()}>
      <Image
    source={require('./Images/back-arrow.png')}
    style={styles.backarrowStyle} />
      </TouchableWithoutFeedback>

      <Image
  source={require('./Images/help.png')}
  style={styles.helpStyle} />


  <Image
source={require('./Images/setting.png')}
style={styles.settingStyle} />
    </View>
</View>
    );
  }

}
const styles = {
  backarrowStyle: {
    resizeMode: 'contain',
    flexDirection: 'row',
    width: 55,
    height: 55,
    left: 0,
    justifyContent: 'flex-start'
  },
  helpStyle: {
    resizeMode: 'contain',
      width: 50,
      height: 50,
      left: 200,
      justifyContent: 'flex-end',
      position: 'relative'

  },
  settingStyle: {
    resizeMode: 'contain',
    width: 50,
    height: 50,
    left: 210,
    justifyContent: 'flex-end',
  position: 'relative',

}
};


export default NavBar;

why don't you try using the percentages for width? `width: 30%` — Jude Niroshan, Aug 11 '17 at 07:06
Possible duplicate of [Make view 80% width of parent in React Native](https://stackoverflow.com/questions/33939974/make-view-80-width-of-parent-in-react-native) — Jude Niroshan, Aug 11 '17 at 07:21
I have tried Dimensions and I also wanted to know why my app runs slow and takes time to load — Adarsh Sreeram, Aug 11 '17 at 07:31

score 2 · Accepted Answer · answered Aug 11 '17 at 07:33

2

You can use Dimensions from react-native to get the window width, and then calculate the desired width and height from that.

const buttonWidth = Dimensions.get('window').width / something

answered Aug 11 '17 at 07:33

Kraylog

7,383
1
24
35

I did this but it's still the same issue with smaller devices one of the two buttons is not visible – Adarsh Sreeram Aug 11 '17 at 07:41
Could you show the code youbuse to calculate the sizes? – Kraylog Aug 11 '17 at 08:06
1

You're using the window width to set the view size, but each Image is getting a hard coded width value from the style. Instead, you can remove the width and height from the style and add a calculated one in the Image tag directly. – Kraylog Aug 11 '17 at 08:42

score 0 · Answer 2 · answered Aug 11 '17 at 08:17

0

There are a few ways to do this, some easier then others and it all depends on what you need.

Using Dimensions from 'react-native' you can fetch the screen and window height, width, fontscale and scale which will allow you to make sure everything resizes properly.

For something that works just as good, you can try using flex to size your navigation bar. for example you used styles for your resizing so you could add width: '100%' to the container view style (just after <StatusBar />) then add flex:1 to helpstyle, backarrowstyle and settingstyle and they would independently take up equal amounts of space within the container.

answered Aug 11 '17 at 08:17

Tierna D. Jack Lawless

443
1
3
13

That's not the solution and it messes out navigation bar completely – Adarsh Sreeram Aug 11 '17 at 08:41
I'd need to know exactly what it messes up. it should only take a few extra styles in the right place. try removing the width for each of the button styles, that will allow flex to completely take over the width dimensions of the buttons. The other problem might be that you need to add flex:1 to the parent of the buttons. – Tierna D. Jack Lawless Aug 11 '17 at 08:57
Just realised how your nav bar is laid out. Try removing `position` and `justifyContent` from your button styles and adding `flex: 7` and `width: null` to the status bar style alongside `flex: 3, width: null` to the `` holding the buttons. That should give the status bar 70% of the container width and 30% of the container width to the buttons. – Tierna D. Jack Lawless Aug 11 '17 at 09:05

my app runs slow on devices is it because of the images that I use and how can I remove hard-coded width and height

2 Answers2