⚡️ Custom Components

Let's go one step ahead and create our custom components for react native applications!

Split App into Components

Let's split the previously built Todo App into separate components, to make our app more modular. It's fairly simple if you come from a React background for web applications.

Let's start by making a separate folder called components which will hold our individual components for the react native app. We follow the usual naming convention of using a capital letter to name the component here as well (same in React web apps).

GoalItem

components/GoalItem.js

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

const GoalItem = (props) => {
  return (
    <View style={styles.goalItem}>
      <Text>{props.title}</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  goalItem: {
    padding: 10,
    marginVertical: 10,
    borderWidth: 1,
    borderColor: 'black',
    backgroundColor: '#ccc'
  }
})

export default GoalItem

GoalInput

components/GoalInput.js

import React, {useState} from 'react'
import {StyleSheet, TextInput, View, Button} from 'react-native'

const GoalInput = (props) => {
  const [newGoal, setNewGoal] = useState('')
  const goalInputHandler = (goal) => {
    setNewGoal(goal)
  }
  
  return (
    <View style={styles.inputContainer}>
      <TextInput
        style={styles.input}
        placeholder="Todo Goals"
        onChange={goalInputHandler}
        value={newGoal}
      />
      <Button title="ADD" onPress={props.addGoal.bind(this, newGoal)}/>
    </View>
  )
}

const styles = StyleSheet.create({
  inputContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  input: {
    borderColor: 'black',
    borderWidth: 1,
    padding: 10,
    width: '80%'
  }
})

export default GoalInput

App.js

App.js

import React, {useState} from 'react';
import {StyleSheet, View, FlatList} from 'react-native'
import {StatusBar} from 'expo-status-bar'

import GoalInput from './components/GoalInput'
import GoalItem from './components/GoalItem'
const App = () => {
  const [goals, setGoals] = useState([])
  
  const addGoalHandler = (goalTitle) => {
    setGoals((prevState) => [
      ...prevState,
      {uid: Math.random().toString(), value: goalTitle}
    ])
  }
  
  return (
    <View>
      <GoalInput addGoal={addGoalHandler}/>
      <FlatList
        keyExtractor={(item, index) => item.uid}
        data={goals}
        renderItem={itemData => <GoalItem title={itemData.item.uid} />}
      />
      <StatusBar style="auto"/>
    </View>
  )
}

const styles = StyleSheet.create({
  root: { padding: 50 }
})
export default App

Touchable Components

The View component has many different event listeners like onTouchStart, onTouchEnd, etc. To use all these event listeners manually, would be a huge task to perform a very rudimentary event. This is where react native provides us with a custom component called Touchable, which helps us overcome this issue.

The Touchable component does not render anything onto the app, but rather it registers an event listener to the child component that it wraps. This component then gives us more detailed touch events which are pre-configured for us.

Now to be specific, Touchable cannot be used as a component, rather it acts more as a parent class for React Native because there are multiple specific versions of Touchable that we should actually use. For example, TouchableOpacity is now a component that we can use instead of Touchable. So when we try to add event listeners to TouchableOpacity, we see that our code editor (VSCode here) gives us auto-complete suggestions like onPress, onLongPress, etc., which are way more useful.

TouchableOpacity has an activeOpacity property, though which we can control the opacity of the component that it wraps. It accepts a number between 0 and 1.

We have another component called TouchableHighlight, which is almost similar to TouchableOpacity as it helps us use event listeners. This component adds a background color to the child component, whenever there is a touch event on the child component itself.

We can change the background "highlight" color of the child component using underlayColor property. It accepts a string that has a color value, like '#ccc' or 'grey', etc.

Let's see it in action on our Todo App, where we will delete a goal item when we touch the goal item itself.

TouchableOpacity

GoalItem.js

//...
import {..., TouchableOpacity} from 'react-native'

const GoalItem = (props) => {
  return (
    <TouchableOpacity activeOpacity={0.8} onPress={props.deleteGoal}>
      <View style={styles.goalItem}>
        <Text>{props.title}</Text>
      </View>
    </TouchableOpacity>
  )
}

TouchableHighlight

GoalItem.js

//...
import {..., TouchableHighlight} from 'react-native'
const GoalItem = (props) => {
  return (
    <TouchableHighlight underlayColor="#ccc" onPress={props.deleteGoal}>
      <View style={styles.goalItem}>
        <Text>{props.title}</Text>
      </View>
    </TouchableHighlight>
  )
}

deleteGoal

App.js

//...
const deleteGoalHandler = (id) => {
  setGoals((prevState) => prevState.filter(goal => goal.uid !== id))
}

//...
      <FlatList
        keyExtractor={(item, index) => item.uid}
        data={courseGoals}
        renderItem={(itemData) => (
          <GoalItem
            deleteGoal={deleteGoalHandler.bind(this, itemData.item.uid)}
            title={itemData.item.value}
          />
        )}
      />

Other options available for listening to events are:

• TouchableNativeFeedback: This is available only on android devices, where on touch generates a 'ripple' effect.

• TouchableWithoutFeedback: This is available only on android devices, where on touch does not generate any visual effect.

These Touchable components are really important in react native because they allow us to attach the normal high level listeners, like onPress, onLongPress, etc., to any component in react native, and with that we can build our own touchable components, buttons, links, etc.

Modal Overlay

Let's add a modal overlay to our Todo App, where we get a modal in which we can enter our Todo goal, and only display the list of todos and a button to add the new Todo. The button press event will trigger the modal overlay here.

React native has an inbuilt component called Modal, which provides us with a default Modal component, and we can add animation styles to it using the animationType prop to it. To show and hide the Modal, we have another prop called visible, which is a boolean that tells the Modal whether or not to show the modal. We will manage this using a state in our application.

Creating the Modal

App.js

App.js

//...
const App = () => {
  //...
  const [isAddMode, setIsAddMode] = useState(false)
  //...
  return (
    <View>
      <Button title="Add New Goal" onPress={() => setAddMode(true)}/>
      <GoalInput addGoal={addGoalHandler} visiblity={isAddMode}/>
      //...
    </View>
  )
}
//...

GoalInput

components/GoalInput.js

//...
import {Modal, ...} from 'react-native'

const GoalInput = (props) => {
  //...
  return (
    <Modal visible={props.visibility} animationType="slide">
      <View style={styles.inputContainer}>
        //...
        <TextInput style={styles.input}/>
        <Button/>
        //...
      </View>
    </Modal>
  )
}

const styles = StyleSheet.create({
  inputContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  input: {
    //...
    marginBottom: 10
  }
})

With this in place, we can see the Modal component working as expected on button press event. Now, we need to close the modal once the user is done adding the new goal to the list.

Closing the Modal

Now, let's close the Modal, and clear the input from the TextInput component in our GoalInput component. Let's also add a "Cancel" button, to cancel adding a new goal to the list. Below is the complete code for the App and GoalInput components.

We cannot at a style property to a Button component in react native. Instead, we need to wrap our Button within a View and then apply the styles to the Button via this View component. [Please refer below code for an example]

App.js

App.js

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, View, FlatList, Button } from 'react-native';

import GoalItem from './components/GoalItem';
import GoalInput from './components/GoalInput';

const App = () => {
  const [courseGoals, setCourseGoals] = useState([]);
  const [isAddMode, setIsAddMode] = useState(false);

  const addGoalHandler = (goalTitle) => {
    setCourseGoals((prevState) => [
      ...prevState,
      { uid: Math.random().toString(), value: goalTitle },
    ]);
    setIsAddMode(false);
  };

  const deleteGoalHandler = (id) => {
    setCourseGoals((prevState) => prevState.filter((goal) => goal.uid !== id));
  };

  const cancelGoalHandler = () => {
    setIsAddMode(false);
  };

  return (
    <View style={styles.root}>
      <Button
        title="Add New Goal"
        onPress={() => {
          setIsAddMode(true);
        }}
      />
      <GoalInput
        visibility={isAddMode}
        addGoal={addGoalHandler}
        onCancel={cancelGoalHandler}
      />
      <FlatList
        keyExtractor={(item, index) => item.uid}
        data={courseGoals}
        renderItem={(itemData) => (
          <GoalItem
            deleteGoal={deleteGoalHandler.bind(this, itemData.item.uid)}
            title={itemData.item.value}
          />
        )}
      />
      <StatusBar style="auto" />
    </View>
  );
};

const styles = StyleSheet.create({
  root: { padding: 50 },
});

export default App;

GoalInput

components/GoalInput.js

import React, { useState } from 'react';
import { TextInput, View, Button, StyleSheet, Modal } from 'react-native';

const GoalInput = (props) => {
  const [newGoal, setNewGoal] = useState('');

  const goalInputHandler = (newGoal) => {
    setNewGoal(newGoal);
  };

  const onAddGoal = () => {
    props.addGoal(newGoal);
    setNewGoal('');
  };

  const cancelHandler = () => {
    props.onCancel();
    setNewGoal('');
  };

  return (
    <Modal visible={props.visibility} animationType="slide">
      <View style={styles.inputContainer}>
        <TextInput
          placeholder="Todo Goals"
          style={styles.input}
          onChangeText={goalInputHandler}
          value={newGoal}
        />
        <View style={styles.buttonContainer}>
          <View style={styles.button}>
            <Button title="Add" onPress={onAddGoal} />
          </View>
          <View style={styles.button}>
            <Button title="Cancel" color="red" onPress={cancelHandler} />
          </View>
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  inputContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    borderColor: 'black',
    borderWidth: 1,
    padding: 10,
    width: '80%',
    marginBottom: 10,
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    width: '60%',
  },
  button: {
    width: '40%',
  },
});

export default GoalInput;

To checkout a live version of this Todo App, you can refer to this Snack project.

The styling and a few minor things might be different in the Snack Project and the actual code/snippets that I have provided here, but the overall idea and functionality is the same.