Category: 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.

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.

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.

DrawerLayoutAndroid

We can add a drawer layout to our Android app with the DrawerLayoutAndroid component.

For instance, we can write:

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

export default function App() {
  const [drawerPosition, setDrawerPosition] = useState("left");
  const changeDrawerPosition = () => {
    if (drawerPosition === "left") {
      setDrawerPosition("right");
    } else {
      setDrawerPosition("left");
    }
  };

  const navigationView = (
    <View style={styles.navigationContainer}>
      <Text style={{ margin: 10, fontSize: 15 }}>I'm in the Drawer!</Text>
    </View>
  );

  return (
    <DrawerLayoutAndroid
      drawerWidth={300}
      drawerPosition={drawerPosition}
      renderNavigationView={() => navigationView}
    >
      <View style={styles.container}>
        <Text style={{ margin: 10, fontSize: 15 }}>
          DrawerLayoutAndroid example
        </Text>
        <Button
          title="Change Drawer Position"
          onPress={() => changeDrawerPosition()}
        />
        <Text style={{ margin: 10, fontSize: 15 }}>
          Drawer on the {drawerPosition}! Swipe from the side to see!
        </Text>
      </View>
    </DrawerLayoutAndroid>
  );
}

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

We have the drawerPosition state to change the drawer’s position.

The Button takes the onPress prop that takes a function that calls the changeDrawerPosition to toggle the position of the drawer.

The DrawerLayoutAndroid component has the drawer.

drawerWidth has the drawer’s width.

drawerPosition sets the drawer’s position.

renderNavigationView is a function that renders the drawer’s content.

Then when we drag left or right, we’ll see the drawer.

PermissionsAndroid

We can add the PermissionsAndroid object to let us request permissions in our app.

For example, we can write:

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

const requestCameraPermission = async () => {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.CAMERA,
      {
        title: "Camera Permission",
        message:
          "Can I use the Camera?",
        buttonNeutral: "Ask Me Later",
        buttonNegative: "Cancel",
        buttonPositive: "OK"
      }
    );
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log("You can use the camera");
    } else {
      console.log("Camera permission denied");
    }
  } catch (err) {
    console.warn(err);
  }
};
export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.item}>Try permissions</Text>
      <Button title="request permissions" onPress={requestCameraPermission} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: Constants.statusBarHeight,
    backgroundColor: "#ecf0f1",
    padding: 8
  },
  item: {
    margin: 24,
    fontSize: 28,
    fontWeight: "bold",
    textAlign: "center"
  }
});

We add the requestCameraPermission function that calls the PermissionAndroid.request method to request permission.

The PermissionsAndroid.PERMISSIONS.CAMERA argument means we want to get permissions for the camera.

The 2nd argument has an object with some properties.

title is the title for the permission request dialog.

message is the message for the permission request dialog.

buttonNeutral is the text that’s shown for the neutral choice.

buttonNegative is the text for the button for denying permission.

buttonPosition is the text for the button for accepting permission.

It returns a promise with the permission choice.

We can check if it’s granted by checking against PermissionsAndroid.RESULTS.GRANTED .

Conclusion

We can add a drawer and request permissions with the React Native library.

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.

ScrollView

The ScrollView lets us display a scrollable container in our React Native app.

For example, we can use it by writing:

import React from 'react';
import { SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollView}>
        <Text style={styles.text}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi.
        </Text>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
  },
  scrollView: {
    backgroundColor: 'pink',
    marginHorizontal: 20,
  },
  text: {
    fontSize: 100,
  },
});

We add the ScrollView inside the SafeAreaView to enable scrolling.

Inside the ScrollView , we have text that overflows the screen vertically, so we can scroll through it because of the ScrollView .

StyleSheet

We can create styles that we can apply to our components with the StyleSheet.create method.

For example, we can write:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>React Native</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: "#eaeaea"
  },
  title: {
    marginTop: 16,
    paddingVertical: 8,
    borderWidth: 4,
    borderColor: "black",
    borderRadius: 6,
    backgroundColor: "lightgreen",
    color: "black",
    textAlign: "center",
    fontSize: 30,
    fontWeight: "bold"
  }
});

We create the container and title properties in the styles object.

Like React, we just create styles with CSS properties and values.

Switch

We can use the Switch component to render a boolean input.

For example, we can write:

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

export default function App() {
  const [isEnabled, setIsEnabled] = React.useState(false);
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
  return (
    <View style={styles.container}>
      <Switch
        trackColor={{ false: "red", true: "green" }}
        thumbColor={isEnabled ? "green" : "red"}
        ios_backgroundColor="#3e3e3e"
        onValueChange={toggleSwitch}
        value={isEnabled}
      />
    </View>
  );
}

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

We add the Switch component to add a toggle switch into our app.

The trackColor is the color of the switch button background.

The false color is displayed when the toggle is false.

The true color is displayed when the toggle is true.

thumbColor is the color of the switch button itself.

ios_backgroundColor is the background color of the switch when it’s in an iOS app.

onValueChange has a function that gets the value of the switch and does something with it.

In our code, we use the useState hook to set the isEnabled state.

Conclusion

We can add a scroll view component to let us scroll through overflowing content.

Also, we can style our app with the StyleSheet object.

The Switch component lets us add a toggle switch.