React Native

Table of Contents

• ReactNative.dev

• What is React Native?

  • Components in React Native

• Basic Components

• User Interface

• List Views

• Others

• Android and iOS

• CSS in React Native

  • View Component Styles
  • Image Component Styles
  • Text Component Styles

• Button

• Transforms

ReactNative.dev

---

What is React Native?

     React Native allows you to build native mobile apps without using native code. How is this possible? React Native can do this because it compiles the code to the native language of both Android and IOS devices, Java/C++ for Android and Swift for IOS. This means React Native is cross-platform, write your code once and run on any IOS or Android device. You write your app in JavaScript and React code that is very similar to the React code you would write for a web application. The big differences come inside the components, we use native components instead of web components in React Native. Also, you do not render HTML and CSS does not exist in app development.

Components in React Native

     Since there is no such thing as HTML in the native world, our JSX needs to render something that the device can recognize. We use Native Components to do this. A view is the basic UI building block, similar to a div in HTML. React native invokes these native views using the React Native Components. Here is the full list of Core Components, from the React Native Docs.

Basic Components

User Interface

List Views

Others

Android and iOS

     Android and iOS also have some components that are specific to their devices. On iOS there is only one, the ActionSheetIOS. ActionSheetIOS displays the native Action Sheets component for iOS. It is a specific style of alert that appears in response to a control or action and gives the user two or more choices related to the current context. Android has a few components that are specific to their OS. BackHandler detects hardware button presses for back navigation. DrawerLayoutAndroid wraps the DrawerLayout platform that creates content that can be hidden or pulled in from the side. PermissionsAndroid provides access to the permissions model that allows the user to choose what permissions the app should have. Finally, ToastAndroid creates a toast alert notification.

---

CSS in React Native

     Since there is no true CSS in React Native, how do we style our apps? All React Native core components accept a style prop that you can write your styles inline, or import the StyleSheet method that allows you to create classes that . Both provide a JavaScript object of camelCased CSS properties as keys and values. There are also many frameworks out there like Styled Components that would allow you to write more vanilla style CSS. Styles are not inherited the way CSS is in a browser, only Text components within Text components are inherited. So, in most cases you have to specify for each component the styles you want. There are also no units for dimensions (px, em, vw, etc.), you simply don't include them in your styles. There can either be fixed width and height or you can use flex containers to dynamically fit the components. Flexbox is used to layout components and each type of component has its own set of styles that are able to be applied to it.

  <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: "#20232a",
    borderRadius: 6,
    backgroundColor: "#61dafb",
    color: "#20232a",
    textAlign: "center",
    fontSize: 30,
    fontWeight: "bold"
  }
});

View Component Styles

   <View
      style={{
        flexDirection: "row",
        height: 100,
        padding: 20
      }}
    >
    <View style={{styles.box}}>

    const styles = StyleSheet.create({
      box: {
        backgroundColor: 'blue',
        flex: 0.5
      }
});

Image Component Styles

Along with the all of the above props, the Image component adds the following possible properties and methods.

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

const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
  tinyLogo: {
    width: 50,
    height: 50,
  },
  logo: {
    width: 66,
    height: 58,
  },
});

const DisplayAnImage = () => {
  return (
    <View style={styles.container}>
      <Image
        style={styles.tinyLogo}
        source={require('@expo/snack-static/react-native-logo.png')}
      />
      <Image
        style={styles.tinyLogo}
        source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
      />
      <Image
        style={styles.logo}
        source={{
          uri:
            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
        }}
      />
    </View>
  );
}

export default DisplayAnImage;

Text Component Styles

const TextInANest = () => {
  const titleText = useState("Bird's Nest");
  const bodyText = useState("This is not really a bird nest.");

  return (
    <Text style={styles.baseText}>
      <Text style={styles.titleText} onPress={onPressTitle}>
        {titleText}
        {"\n"}
        {"\n"}
      </Text>
      <Text numberOfLines={5}>{bodyText}</Text>
    </Text>
  );
};

const styles = StyleSheet.create({
  baseText: {
    fontFamily: "Cochin"
  },
  titleText: {
    fontSize: 20,
    fontWeight: "bold"
  }
});

Button

     Buttons in React Native have a very limited amount of properties that can be applied to them. They cannot have a direct style prop on a button and it is a self-closing tag. Text is set with the title prop and color can be set, otherwise you can use TouchableOpacity or TouchableNativeFeedback to build your own button. You can also surround a Button with a View container to create a larger margin.

<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>

Transforms

     Transforms are style properties that will modify the appearance of an element.

<View style={[styles.box, {
        transform: [
          { rotateX: "45deg" },
          { rotateZ: "45deg" }
        ]
      }]}>