React Native — Dimensions and Web Views

React Native is a mobile development that’s based on React that we can use to do mobile development.

In this article, we’ll look at how to use it to create an app with React Native.

Dimensions

We can use the Dimensions object to get the window’s dimensions.

For example, we can write:

import React, { useEffect, useState } from 'react';
import { View, StyleSheet, Text, Dimensions } from "react-native";

const window = Dimensions.get("window");
const screen = Dimensions.get("screen");

export default function App() {
  const [dimensions, setDimensions] = useState({ window, screen });

  const onChange = ({ window, screen }) => {
    setDimensions({ window, screen });
  };

  useEffect(() => {
    Dimensions.addEventListener("change", onChange);
    return () => {
      Dimensions.removeEventListener("change", onChange);
    };
  });

  return (
    <View style={styles.container}>
      <Text>{`Window Dimensions: height - ${dimensions.window.height}, width - ${dimensions.window.width}`}</Text>
      <Text>{`Screen Dimensions: height - ${dimensions.screen.height}, width - ${dimensions.screen.width}`}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});

We get the window’s and screen’s dimensions by listening to the change event.

We use the Dimensions.addEventListener to add a listener for the event.

We use the Dimensions.get method with different arguments to get the window and screen dimensions.

KeyboardAvoidingView

We can use the KeyboardAvoidingView component to add a container that moves away from the keyword when it’s present.

For example, we can write:

import React from 'react';
import { View, KeyboardAvoidingView, TextInput, StyleSheet, Text, Platform, TouchableWithoutFeedback, Button, Keyboard } from 'react-native';

export default function App() {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS == "ios" ? "padding" : "height"}
      style={styles.container}
    >
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <View style={styles.inner}>
          <Text style={styles.header}>Header</Text>
          <TextInput placeholder="Username" style={styles.textInput} />
          <View style={styles.btnContainer}>
            <Button title="Submit" onPress={() => null} />
          </View>
        </View>
      </TouchableWithoutFeedback>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  inner: {
    padding: 24,
    flex: 1,
    justifyContent: "space-around"
  },
  header: {
    fontSize: 36,
    marginBottom: 48
  },
  textInput: {
    height: 40,
    borderColor: "black",
    borderBottomWidth: 1,
    marginBottom: 36
  },
  btnContainer: {
    backgroundColor: "white",
    marginTop: 12
  }
});

We add the KeyboardAvoidingView with the TouchableWithoutFeedback component that has the onPress prop.

We pass in the Keyboard.dismiss method to it to let us remove the keyboard from the screen.

Now when we tap on the TextInput , the keyboard shows, and the view will shrink to accommodate the keyboard.

Links

We call the Linking.openURL method to open a web view with the URL we want.

For example, we can write:

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

export default function App() {
  const handlePress = () => {
    Linking.openURL('https://google.com');
  };

  return (
    <View
      style={styles.container}
    >
      <Text onPress={handlePress}>Google</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

to add a piece of text that goes to Google when we tap on it.

Conclusion

We can get the dimensions of the window and screen with React Native.

Also, we can open web views to load a web page with the Linking.openURL method.