Can height be set in percentages?

[ziga-hvalec]

Right now the only way to set height is to set it as a number.
We would like to add some content under the navigation view so we can't set the height as a number.

Can we set height in percentages to be able to have content under that map?

[ArturoSalazarB16]

Hi @zbillones-navagis @mtrecenio-navagis, can you please take a look at this? is it possible?

[ziga-hvalec]

any update on this? Right now we have to calculate the space we have and then set the height of the maps. It would be very useful to be able to set height 100% and use all space that's available

[mtrecenio-navagis]

Hi @ziga-hvalec , you can set percentage as well in your app.tsx. You can create methods that takes percentage as parameter like this:

const RPW = (percentage: number) => {
const screenWidth = Dimensions.get('window').width;
return (percentage / 100) * screenWidth;
};
const RPH = (percentage: number) => {
const screenHeight = Dimensions.get('window').height;
return (percentage / 100) * screenHeight;
};

and pass it as the height and width of the navView component

const navViewWidth = RPW(50);
const navViewHeight = RPH(50);

cc @ArturoSalazarB16 @zbillones-navagis

[ziga-hvalec]

Maybe i didn't explain this well.

We have a custom header at the top and a button at the bottom. I would like to use the rest of the space for the map.
Right now I have to calculate this space. Full height - header - button.
It would be useful to be able to just say, map use 100% of the remaining space.

Hope this is a better explanation.

[mtrecenio-navagis]

NavigationView can be resized to your desired percentage using the above-mentioned code snippet. With the help of Flexbox, you can achieve the behavior of NavigationView that can take the remaining space without calculating what specific height to set. Just define the height of your header and button and NavigationView will take the rest of the space.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  header: {
    height: 50, // Adjust this according to your header's height
  },
  mapContainer: {
    flex: 1,
  },
  map: {
    flex: 1,
  },
  buttonContainer: {
    height: 50, // Adjust this according to your button's height
  },
});

const FlexboxSample = () => {
  return (
    <View style={styles.container}>
      <View style={styles.header}>
      </View>
      <View style={styles.mapContainer}>
        <NavigationView style={styles.map} />
      </View>
      <View style={styles.buttonContainer}>
        <Button/>
      </View>
    </View>
  );
};

cc @ArturoSalazarB16 @zbillones-navagis

[ziga-hvalec]

Currently both height and width are required or nothing gets rendered at all. Unless this has been changed. Žiga Hvalec Web Developer @d.labs

…

On Mar 18, 2024, 03:23 +0100, mtrecenio-navagis ***@***.***>, wrote: NavigationView can be resized to your desired percentage using the above-mentioned code snippet. With the help of Flexbox, you can achieve the behavior of NavigationView that can take the remaining space without calculating what specific height to set. Just define the height of your header and button and NavigationView will take the rest of the space. const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'column', }, header: { height: 50, // Adjust this according to your header's height }, mapContainer: { flex: 1, }, map: { flex: 1, }, buttonContainer: { height: 50, // Adjust this according to your button's height }, }); const FlexboxSample = () => { return ( <View style={styles.container}> <View style={styles.header}> </View> <View style={styles.mapContainer}> <NavigationView style={styles.map} /> </View> <View style={styles.buttonContainer}> <Button/> </View> </View> ); }; — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

[ArturoSalazarB16]

Can you please take a look at @ziga-hvalec response @mtrecenio-navagis @zbillones-navagis? CC @reignbartolome

[ArturoSalazarB16]

@mtrecenio-navagis - can you please share an updated code sample where height/width are passed to NavigationView? Where we would read these values from is the key

[mtrecenio-navagis]

@mtrecenio-navagis - can you please share an updated code sample where height/width are passed to NavigationView? Where we would read these values from is the key

@ArturoSalazarB16 -

const RPW = (percentage: number) => { const screenWidth = Dimensions.get('window').width; return (percentage / 100) * screenWidth; }; const RPH = (percentage: number) => { const screenHeight = Dimensions.get('window').height; return (percentage / 100) * screenHeight; };

and pass it as the height and width of the navView component

const navViewWidth = RPW(50); const navViewHeight = RPH(50);

@ArturoSalazarB16 - here we created a function to accept value as percentage for both width and height and set it to NavigationView. You can set it to 100 for both width and height and it will occupy the remaining space inside parent component.

[ArturoSalazarB16]

Hi @ziga-hvalec - can you please take a look at @mtrecenio-navagis snippet and see if this suffices?

Thank you!
Arturo

[ziga-hvalec]

the above only works if maps is full screen. we have some of our own ui bellow the map. which makes the map not as tall as the screen.
If full screen then height of map is Dimenstions.get('window').heigth
but if we add our own ui bellow the map then height is Dimenstions.get('window').heigth - our own ui height.

[zbillones-navagis]

Hi @ziga-hvalec, have you tried using the flexbox layout approach? Otherwise, you have to get the height of the corresponding views manually and calculate the exact size you need for the height. as of now, width and height must be defined just like any other views or component. We don't have the automatic width or height distribution as of the moment. cc: @mtrecenio-navagis

[ziga-hvalec]

flexbox doesn't help since NavigationView needs height and width provided as a number.
I am calculating height and width manually right now. but it would be nice if this wasn't needed. similar to the react-native-maps and other packages where we can simply say 100% and no manual calculations are needed.

[ArturoSalazarB16]

Thanks for the context here @ziga-hvalec.
FYI @caio1985 - we can add this to our backlog for next releases

[ArturoSalazarB16]

FYI @jokerttu - this is related to what we discussed today about Flex layouts

[kirtanbodawala]

Are we expecting this to be implemented soon?

[jokerttu]

Hi @nexttrack07
PR #239, will introduce better way to control NavigationView size