Category: React Native Answers

Sometimes, we want to set the width of a View to 80% of parent in React Native.

In this article, we’ll look at how to set the width of a View to 80% of parent in React Native.

How to set the width of a View to 80% of parent in React Native?

To set the width of a View to 80% of parent in React Native, we can set the flexbox and width styles.

For instance, we write:

import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Card } from 'react-native-paper';

const widthProportion = '80%';
const heightProportion = '40%';

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#5A9BD4',
  },
  box: {
    width: widthProportion,
    height: heightProportion,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'orange',
  },
  text: {
    fontSize: 18,
  },
});

const App = () => {
  return (
    <View style={styles.screen}>
      <View style={styles.box}>
        <Text style={styles.text}>hello world</Text>
      </View>
    </View>
  );
};
export default App;

to add the box style that sets the width and height of the box.

We set the width to '80%' to make the box fill 80% of the width of the parent.

Then we set justifyContent and alignItems to 'center' to center align the View box horizontally and vertically respectively.

Conclusion

To set the width of a View to 80% of parent in React Native, we can set the flexbox and width styles.

Sometimes, we want to set absolute positioning horizontal center with React Native.

In this article, we’ll look at how to set absolute positioning horizontal center with React Native.

How to set absolute positioning horizontal center with React Native?

To set absolute positioning horizontal center with React Native, we can set the position and flexbox styles.

For instance, we write:

import * as React from 'react';
import { View, Text } from 'react-native';
import { Card } from 'react-native-paper';

const App = () => {
  return (
    <View
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Text>Centered text</Text>
    </View>
  );
};
export default App;

to set the position of the view to 'absolute' to add absolute positioning.

Then we set top, left, right, and bottom to 0 to set the position,

And then we set justifyContent and alignItems to 'center' to center align horizontally and vertically respectively.

Conclusion

To set absolute positioning horizontal center with React Native, we can set the position and flexbox styles.

Sometimes, we want to set responsive font size with React Native.

In this article, we’ll look at how to set responsive font size with React Native.

How to set responsive font size with React Native?

To set responsive font size with React Native, we can use the Dimensions object to get the values to calculate the font size.

For instance, we write:

import * as React from 'react';
import { View, Text, Dimensions, Platform, PixelRatio } from 'react-native';
import { Card } from 'react-native-paper';

const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');

const scale = SCREEN_WIDTH / 320;

const normalize = (size) => {
  const newSize = size * scale;
  if (Platform.OS === 'ios') {
    return Math.round(PixelRatio.roundToNearestPixel(newSize));
  } else {
    return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2;
  }
};

const App = () => {
  return (
    <View>
      <Text style={{ fontSize: normalize(30) }}>hello</Text>
    </View>
  );
};
export default App;

to define the normalize function that calculates newSize by multipklying size and scale`.

We get the scale by dividing SCREEN_WIDTH by a number.

Then we return the actual font size depending on the platform.

We use PixelRatio.roundToNearestPixel to round to the nearest pixel.

Finally. we set the fontSize of the Text.

Conclusion

To set responsive font size with React Native, we can use the Dimensions object to get the values to calculate the font size.

Sometimes, we want to open a URL in default web browser with React Native.

In this article, we’ll look at how to open a URL in default web browser with React Native.

How to open a URL in default web browser with React Native?

To open a URL in default web browser with React Native, we can use the Linking.openURL method.

For instance, we write:

import * as React from 'react';
import { View, Text, Linking } from 'react-native';

import { Card } from 'react-native-paper';

const App = () => {
  const onPress = async () => {
    const url = 'https://example.com';
    await Linking.canOpenURL(url);
    Linking.openURL(url);
  };

  return (
    <View>
      <Text onPress={onPress}>open</Text>
    </View>
  );
};
export default App;

to define the onPress function that calls Linking.canOpenURL to check if the url can be opened.

If it resolves to true, then we call Linking.openURL with the url to open the link in the default browser of the device.

Conclusion

To open a URL in default web browser with React Native, we can use the Linking.openURL method.

Sometimes, we want to get the screen width in React Native.

In this article, we’ll look at how to get the screen width in React Native.

How to get the screen width in React Native?

To get the screen width in React Native, we can use the Dimension object.

For instance, we write:

import * as React from 'react';
import { View, Text, Dimensions } from 'react-native';

import { Card } from 'react-native-paper';

const App = () => {
  const dims = {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  };

  return (
    <View>
      <Text>{JSON.stringify(dims)}</Text>
    </View>
  );
};
export default App;

We call Dimensions.get with 'window' to get the screen dimensions in an object.

Then we can use the width and height properties to get the width and height of the screen.

Conclusion

To get the screen width in React Native, we can use the Dimension object.