React Native

3.2 Component Libraries

Module Still Under Development

Like with React web development, there are many open source and commercial component libraries available to help jump-start your application. Not everything needs to be build from scratch.

Vector Icons

Expo comes with a component that you can use to add icons to any app. The Expo Vector Icons component can be used with any project that was created with expo-create-app. It is installed by default.

To add it to a page add the import for the family of icons that you want to use.

import Ionicons from '@expo/vector-icons/Ionicons';

The base path is @expo/vector-icons/ and then you add the family at the end of the path plus the name of the component that you are importing. This will give you access to all the fonts in that family.

List of Icons - you can search for icons on this page.

The icon families include: Ionicons, FontAwesome, FontAwesome5, Entypo, AntDesign, Zocial, SimpleLineIcons, Octicons, EvilIcons, Feather, Fontisto, Foundation, MaterialIcons, and MaterialCommunityIcons.

Once you have imported the set that you want, then you can use the component that you imported in your JSX. Add a name, size, and color attribute to display the icon.

<Ionicons name="md-checkmark-circle" size={32} color="green" />

You can do this as a child component inside a <View>, a <Button>, a <Pressable>, or most other components.

Platform Specific Code

If you are looking to change things in your app based on which OS the user is currently using, then you can do that with the Platform module. It is a built-in React Native module. No install required.

import { Platform } from 'react-native';

The Platform object is not a component to use in your JSX. It is an object that you can use in your JavaScript when deciding what to add to your JSX or its properties.

The Platform object has a lot of different properties that you can access through Platform.constants. but the one property that will be most useful is Platform.OS which will have a value of web, ios, or android.

You can use the value of Platform.OS to change how your component renders.

export default MyComponent()=>{
  let os = Platform.OS;
  let mystyle = {};
  if(Platform.OS === 'ios'){
    mystyle.backgroundColor = 'red';
  }else if(Platform.OS === 'android'){
    mystyle.backgroundColor = 'blue';
  }else{
    mystyle.backgroundColor = 'green';
  }
  return (
    <View style={mystyle}>
        <Text>{os}</Text>
    </View>
  );
}

The above example shows changing a single style property but you can change any properties you want or even generate different JSX based on this value.

Floating Action Button (FAB)

A FAB is a type of button that you will see in a lot of Android apps plus some iOS apps. It is a common design pattern in Material Design.

There is no built-in FAB in React Native or Expo.

You can build your own custom one with the <Pressable> component as the root. Here is a sample:

export FAB (props) => {
    return (
        <Pressable style={styles.container}
            onPress={props.onPress}>
            <Text style={styles.title}>{props.title}</Text>
        </Pressable>
    );
};


const styles = StyleSheet.create({
    container: {
        /* position the content inside the FAB */
        justifyContent: 'center',
        alignItems: 'center',
        paddingHorizontal: 20,
        paddingVertical: 10,
        /* for the FAB itself */
        borderRadius: 10,
        position: 'absolute',
        bottom: 70,
        right: 40,
        backgroundColor: '#26653A',
    },
    title: {
        /* style the text inside the FAB */
        fontSize: 18,
        color: '#fff',
        fontWeight: 'bold',
    },
});

There are also UI Libraries for React Native that will include a FAB component. React Native Elements is an example.

PlatformColor

In your styling for your apps you can use any colour that you would typically use in your CSS.

In your JS code for your React Native app, you can also use the PlatformColor function to access native colors on the target platform by supplying the native color’s corresponding string value. React Native PlatformColor

You pass a string to the PlatformColor function and, provided it exists on that platform, it will return the corresponding native color, which you can apply in any part of your application. The first colour is the default and the others are fallbacks.

PlatformColor(color1, [color2, ...colorN]);

These are colours that you would define within the Android and iOS native settings.

Android R.attr reference Android R.color reference

iOS UIColor Standard Colours iOS UIColor UIElement colors

Available UI Kits

Read this review post to get an idea of what is available. Each UI Kit has their own biases, so treat them as suggestions not requirements.

Try them out for yourself and see which one(s) you like. Consider: price, quality of documentation, simplicity of component APIs, default visual styling, ease of customization/theming.

• React Native UI Kits in 2023 includes the following:
  • NativeBase
  • NativeBase in 2023 has become GlueStack
  • React Native Elements
  • React Native Paper
  • React Native UI Kitten
  • Galio
  • Nachos UI
  • React Native Material UI Kit
  • Shoutem UI
  • Ignite
  • Teaset
  • Lottie (for animations)

Config and Plugins

Start with this page: Using a Plugin in your app.

Plugins are typically modules that you add to your project, which will include native code to support additional features. They will also require configuration settings.

Take the Expo-Camera plugin as an example.

First you need to install the plugin.

npx expo install expo-camera

Then you need to update your app.json file to add this plugin.

{
  "expo": {
    "plugins": [
      [
        "expo-camera",
        {
          "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera."
        }
      ]
    ]
  }
}

The plugins property in app.json accepts an array of plugins that are to be used in the app. The values of the array could all be strings OR sometimes the property is an array with two values. The first value is the name of the plugin and the second value is an Object with key value pairs for things like permissions.

When the npx expo prebuild command is running, it will read these settings and add any necessary settings or files to the native Android and iOS parts of the project.

You will find notes for these settings with each of the APIs and plugins in the Reference section of the Expo website

Exercise

After researching the available React Native UI component libraries, select one to experiment with. You could build a new demo app from scratch or use one of our earlier class exercises as a starting point. The only way you will know if you like a particular library is to try to build something (simple) with it.

Experiment and have fun!