React Native — ScrollViews, Style Sheets, and Switches

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.