Category: JavaScript

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.

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.

Alert

We can add alerts with the Alert.alert method.

For example, we can write:

import React from 'react';
import { View, StyleSheet, Button, Alert } from "react-native";

const createTwoButtonAlert = () =>
  Alert.alert(
    "Alert Title",
    "My Alert Msg",
    [
      {
        text: "Cancel",
        onPress: () => console.log("Cancel Pressed"),
        style: "cancel"
      },
      { text: "OK", onPress: () => console.log("OK Pressed") }
    ],
    { cancelable: false }
  );

const createThreeButtonAlert = () =>
  Alert.alert(
    "Alert Title",
    "My Alert Msg",
    [
      {
        text: "Ask me later",
        onPress: () => console.log("Ask me later pressed")
      },
      {
        text: "Cancel",
        onPress: () => console.log("Cancel Pressed"),
        style: "cancel"
      },
      { text: "OK", onPress: () => console.log("OK Pressed") }
    ],
    { cancelable: false }
  );

export default function App() {
  return (
    <View style={styles.container}>
      <Button title="2-Button Alert" onPress={createTwoButtonAlert} />
      <Button title="3-Button Alert" onPress={createThreeButtonAlert} />
    </View>
  );
}

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

We call the Alert.alert method with the alert title, alert message, and an array of objects to render the buttons.

The text property has the button text.

onPress is a function that’s run when we press the button.

style has the style name of the button.

cancelable sets whether we can cancel the button press.

Animated

The Animated library lets us make animations fluid and painless to build.

For example, we can write:

import React, { useRef } from 'react';
import { Animated, Text, View, StyleSheet, Button } from "react-native";

export default function App() {
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const fadeIn = () => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 5000
    }).start();
  };

  const fadeOut = () => {
    Animated.timing(fadeAnim, {
      toValue: 0,
      duration: 5000
    }).start();
  };

  return (
    <View style={styles.container}>
      <Animated.View
        style={[
          styles.fadingContainer,
          {
            opacity: fadeAnim
          }
        ]}
      >
        <Text style={styles.fadingText}>Fading View!</Text>
      </Animated.View>
      <View style={styles.buttonRow}>
        <Button title="Fade In" onPress={fadeIn} />
        <Button title="Fade Out" onPress={fadeOut} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  fadingContainer: {
    paddingVertical: 8,
    paddingHorizontal: 16,
    backgroundColor: "lightblue"
  },
  fadingText: {
    fontSize: 28,
    textAlign: "center",
    margin: 10
  },
  buttonRow: {
    flexDirection: "row",
    marginVertical: 16
  }
});

We call the Animate.timing method to show our animation.

The first argument is the ref for the animation we want to show.

Then we used the fadeAnim object as the value of the opacity property in the Animated.View component.

Whatever is inside Animated.View is animated.

Other methods for show animations include Animated.decay to create an animation that starts with an initial velocity and slows to a stop gradually.

Animated.spring provides us with spring physical model animation.

They take the same arguments as Animation.timing .

We can also compose animations.

Animated.delay starts an animation with a delay.

Animated.parallel starts a number of animations at the same time.

Animated.sequence starts animation in order.

Animated.stagger starts animation in order and in parallel with successive delays.

Combining Animated Values

We can combine 2 animated values with the following methods:

• Animated.add()
• Animated.subtract()
• Animated.divide()
• Animated.modulo()
• Animated.multiply()

We can compose animations by writing:

import React, { useRef } from 'react';
import { Animated, Text, View, StyleSheet, Button } from "react-native";

export default function App() {
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const fadeIn = () => {
    Animated.sequence([
      Animated.delay(3000),
      Animated.timing(fadeAnim, {
        toValue: 1,
        duration: 5000,
        useNativeDriver: true
      })
    ]).start()
  };

  const fadeOut = () => {
    Animated.timing(fadeAnim, {
      toValue: 0,
      duration: 5000,
      useNativeDriver: true
    }).start();
  };

  return (
    <View style={styles.container}>
      <Animated.View
        style={[
          styles.fadingContainer,
          {
            opacity: fadeAnim
          }
        ]}
      >
        <Text style={styles.fadingText}>Fading View!</Text>
      </Animated.View>
      <View style={styles.buttonRow}>
        <Button title="Fade In" onPress={fadeIn} />
        <Button title="Fade Out" onPress={fadeOut} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  fadingContainer: {
    paddingVertical: 8,
    paddingHorizontal: 16,
    backgroundColor: "lightblue"
  },
  fadingText: {
    fontSize: 28,
    textAlign: "center",
    margin: 10
  },
  buttonRow: {
    flexDirection: "row",
    marginVertical: 16
  }
});

In the fadeIn function, we have the Animated.sequence method called with 3000ms.

Then we call Animated.timing to run our fade-in animation.

Conclusion

We can show alerts and animations with React Native.

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.

ToastAndroid

We can show a toast in our Android app with the ToastAndroid component.

For instance, we can write:

import React from 'react';
import { View, StyleSheet, ToastAndroid, Button } from "react-native";
import Constants from "expo-constants";

const showToast = () => {
  ToastAndroid.show("Hello World", ToastAndroid.SHORT);
};

const showToastWithGravity = () => {
  ToastAndroid.showWithGravity(
    "Hello World",
    ToastAndroid.SHORT,
    ToastAndroid.CENTER
  );
};

const showToastWithGravityAndOffset = () => {
  ToastAndroid.showWithGravityAndOffset(
    "A wild toast appeared!",
    ToastAndroid.LONG,
    ToastAndroid.BOTTOM,
    25,
    50
  );
};

export default function App() {
  return (
    <View style={styles.container}>
      <Button title="Toggle Toast" onPress={() => showToast()} />
      <Button
        title="Toggle Toast With Gravity"
        onPress={() => showToastWithGravity()}
      />
      <Button
        title="Toggle Toast With Gravity & Offset"
        onPress={() => showToastWithGravityAndOffset()}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: Constants.statusBarHeight,
    backgroundColor: "#ecf0f1",
    padding: 8
  },
});

We call the ToastAndroid.show method to show a simple toast.

ToastAndroid.showWithGravity shows the toast with gravity.

ToastAndroid.showWithGravity shows a toast with gravity and position offset.

Also, we can show a toast by setting the visibility state manually.

For example, we can write:

import React, { useEffect, useState } from 'react';
import { View, StyleSheet, ToastAndroid, Button } from "react-native";
import Constants from "expo-constants";

const Toast = ({ visible, message }) => {
  if (visible) {
    ToastAndroid.showWithGravityAndOffset(
      message,
      ToastAndroid.LONG,
      ToastAndroid.BOTTOM,
      25,
      50
    );
    return null;
  }
  return null;
};

export default function App() {
  const [visibleToast, setvisibleToast] = useState(false);

  useEffect(() => setvisibleToast(false), [visibleToast]);

  const handleButtonPress = () => {
    setvisibleToast(true);
  };

  return (
    <View style={styles.container}>
      <Toast visible={visibleToast} message="Example" />
      <Button title="Toggle Toast" onPress={() => handleButtonPress()} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: Constants.statusBarHeight,
    backgroundColor: "#ecf0f1",
    padding: 8
  },
});

We created our own Toast component with the visible prop to control the toast’s visibility.

Also, we pass the message into the toast with the message prop.

When the visibleToast state changes, we make it invisible first with the useEffect callback and then make it visible again.

ActivityIndicator

We can add an activity indicator in our app with the ActivityIndicator component.

For example, we can write:

import React from 'react';
import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
export default function App() {
  return (
    <View style={[styles.container, styles.horizontal]}>
      <ActivityIndicator />
      <ActivityIndicator size="large" />
      <ActivityIndicator size="small" color="green" />
      <ActivityIndicator size="large" color="blue" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center"
  },
  horizontal: {
    flexDirection: "row",
    justifyContent: "space-around",
    padding: 10
  }
});

We add the ActivityIndicator component to show it.

The size prop controls the size and the color changes the color.

Conclusion

We can add an activity indicator and toasts with React Native.

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.

SectionList

We can add the SectionList component to display a section list view.

It’s cross-platform and works with horizontal mode.

Also, it has header, footer, and separator support.

We can pull it to refresh the data.

We can load data as we scroll with it.

And it also has multiple columns support.

For example, we can write:

import React from 'react';
import { SafeAreaView, StyleSheet, Text, View, SectionList } from 'react-native';
const DATA = [
  {
    title: "Main dishes",
    data: ["Pizza", "Burger", "Risotto"]
  },
  {
    title: "Sides",
    data: ["French Fries", "Onion Rings", "Fried Shrimps"]
  },
  {
    title: "Drinks",
    data: ["Water", "Coke", "Beer"]
  },
  {
    title: "Desserts",
    data: ["Cheese Cake", "Ice Cream"]
  }
];
const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);
export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <SectionList
        sections={DATA}
        keyExtractor={(item, index) => item + index}
        renderItem={({ item }) => <Item title={item} />}
        renderSectionHeader={({ section: { title } }) => (
          <Text style={styles.header}>{title}</Text>
        )}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 0
  },
  item: {
    backgroundColor: 'pink',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

We add the SafeAreaView and the SectionList to display a list with section headings and each section having their own content.

The sections prop has the data.

keyExtractor is a function that returns the unique index for the item.

renderItem is a function that renders the item.

The renderSectionHeader prop renders the header with a function.

BackHandler

We can use the BackHandler API to handle back button presses.

For instance, we can write:

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

export default function App() {
  useEffect(() => {
    const backAction = () => {
      Alert.alert("Are you sure?", "Are you sure you want to go back?", [
        {
          text: "Cancel",
          onPress: () => null,
          style: "cancel"
        },
        { text: "YES", onPress: () => BackHandler.exitApp() }
      ]);
      return true;
    };

    const backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      backAction
    );

    return () => backHandler.remove();
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Click Back button!</Text>
    </View>
  );
}

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

We attach an event handler for the hardwareBackPress event with BackHandler.addEventListener .

In the backAction event handler function, we show an alert with the Alert.alert method.

It takes the title and the content for the alert as the argument.

The 3rd argument is an array with the objects having the content of the cancel button.

The text property is the text for the button.

onPress is a function that runs when we press the button.

style has the style for the button.

When the component unmounts, we call backHandler.remove() to remove the hardwareBackPress listener.

Conclusion

We can add the SectionList component to add a list with section headings and list items for each section.

Also, we can add a handler for the back button.