What is ChatGPT?

I asked the same question on Chat-GPT , and here’s what it said. 🤯

ChatGPT is a chatbot model developed by OpenAI that is based on the GPT (Generative Pre-trained Transformer) language model. It is designed to generate human-like responses to text input in a conversational context. ChatGPT uses a combination of machine learning and natural language processing techniques to generate appropriate responses to user input in a way that resembles human conversation.

The ChatGPT model is trained on a large dataset of human conversations, and it is able to generate responses that are coherent, contextually relevant, and often quite similar to those that a human might provide in a similar conversational context. ChatGPT is able to maintain a consistent persona or “character” throughout a conversation, and it can also generate responses to a wide range of topics and content types.

ChatGPT can be used to build chatbots or conversational agents that can engage with users in a variety of settings, including customer service, e-commerce, social media, and more. It is also a useful tool for researchers and developers working on natural language processing and chatbot technology. — From ChatGPT

As you can see, it is very accurate in answering.

In this article, we will see how we can use OpenAI’s API to incorporate ChatGPT into a React Native application to create a Chatbot and text translation app.

For your reference:

1. https://github.com/hrupesh/nextjs-chatgpt-BE
2. https://github.com/hrupesh/RNChatGPTApp

Creating the ServerSide with Nextjs

To utilize ChatGPT in react native, which will be our client side we first need to create a server. The server will have two REST API endpoints ask-a-question and translate . The first endpoint will take in a param called question in the request body and return an answer to question which we will query from the OpenAI’s createCompletion method. The second endpoint will be translate which will take two params query and language . The first param query will store the text which user wants to translate and the second is language which is the desired language user needs to translate into.

Okay, enough talk; Now let’s start to code.

You can find the code in this repository.

To create a new Nextjs project head to your terminal and type the following command.

npx create-next-app@latest

OR Add a typescript flag to create in typescipt

npx create-next-app@latest --typescript

You will be prompted with what name you want to give to your project, enter what you want, and proceed.

After your project is created open the project folder in your preferred Code Editor.

To test run the app, execute the following:

yarn dev 

OR

npm run dev

OR 

next dev

Once your app is running you can view it on http://localhost:3000/

We need to create two API endpoints so we will not touch anything else in the pages folder other than the api folder.

Nextjs treats files under this folder as API endpoints, let’s create our first endpoint.

Create a new file name ask-a-question.ts inside pages/api .

Before we write code in this file, we first need to install openai into our project.

Run the below command to install openai dependency into your project using any package manager.

yarn add openai

OR

npm i openai

Now let’s use it.

We will create a common file that will configure the OpenAiApi

Create a new folder at the root of the project and add a file name config.ts inside it.

mkdir src && touch config.ts

Now add the following code inside this file:

import { Configuration, OpenAIApi } from "openai";

const config = new Configuration({
    apiKey: process.env.OPEN_AI_KEY
});

const openAI = new OpenAIApi(config);

export default openAI;

Also, we need to add the OPEN_AI_KEY in .env file.

touch .env

Now you need to create an API Key for using Open AI’s API, follow this link to do so.

Log in to their website and create your API-KEY.

NOTE: You cannot use Open AI API without apiKey

We will now add the code to handle ask-a-question endpoint, add the below code in ask-a-question.ts file.

import type { NextApiRequest, NextApiResponse } from "next";
import openAI from "../../src/config";

type Data = {
  result?: string | undefined;
  error?: string;
};

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  if (!req?.body?.question){
    res.status(400).json({ error: 'Invalid params' })
  }

  const completion = await openAI.createCompletion({
    model: 'text-davinci-003',
    prompt: req?.body?.question,
    temperature: 0.8,
    max_tokens: 2048,
  });
  res.status(200).json({ result: completion.data?.choices?.[0]?.text });
}

In the above code first, we are checking if request has a valid question parameter value, if not then returning 400 with error message Invalid params . If we get the params correctly then are calling openAI.createCompletion the method which calls the openai API under the hood with the given prompt and specified model and other options.

We are passing the question which we receive in the request body to the API then weawait until it returns. Then we simply return the answer in the response .

The output will be as below:

Now let’s create the second endpoint i.e. for translation.

Create another file in pages/api and name it translate.ts , then add the following code inside.

import type { NextApiRequest, NextApiResponse } from "next";
import openAI from "../../src/config";

type Data = {
  result?: string | undefined;
  error?: string;
};

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  if (!req?.body?.query || !req?.body?.language) {
    res.status(400).json({ error: "Invalid params" });
  }

  const { query = "", language = "English" } = req?.body;
  const completion = await openAI.createCompletion({
    model: "text-davinci-003",
    // We are prompting the API in the below format
    // The ?? after `query` is just a HACK
    prompt: `translate ${query}?? in ${language}`,
    temperature: 0.8,
    max_tokens: 2048,
  });
  res.status(200).json({ result: completion.data?.choices?.[0]?.text });
}

That’s it, we have created two endpoints using Chat-GPT to answer anything.

The output of the above will be:

Yay 🔥 we have completed our application’s Backend.

You can deploy this using Vercel, it is very easy and fast.

Creating Application with React Native

Now let’s create an mobile app to utilize this back end we just created.

If you want to skip the code, here is the repository URL. You also need to download the assets folder from the repo.

We will use React Native to create the mobile app for iOS and Android. Get started by creating a new react native project.

npx react-native init <your-project-name> --template react-native-template-typescript

once project is created, run it on iOS simulator and Android emulator using the below commands

yarn ios
yarn android
  OR
react-native run-android
react-native run-ios

Now you should have a React Native app running on your simulators.

Before we start to write our code, let’s remove the starter code App.tsx file and add the following.

import React, {useState} from 'react';
import {View, Text, StyleSheet, Image, Pressable, TextInput} from 'react-native';

const App: React.FC = () => (
  <View style={styles.container}>
    <Text>Hello React Native!</Text>
  </View>
);

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

export default App;

Now you must see a white screen with text Hello React Native! at the center.

We will now write the code to display a tab bar on app screen, the tab bar will have two options, first will be for Chat (were user can type anything to get appropriate results) second will be translation section.

Add the following code to App.tsx

import React, {useState} from 'react';
import {View, Text, StyleSheet, Image, Pressable, TextInput} from 'react-native';
import {Conversation as ConversationIcon, Translate} from './assets';
import { Conversation, Translation } from './src/components';

interface ContentProps {
  selectedIndex: number;
}

const Content: React.FC<ContentProps> = ({ selectedIndex }) => {
  switch (selectedIndex) {
    case 0: 
      return <Conversation />
    case 1:
      return <Translation />
    default: return <></>;
  }
}

const App: React.FC = () => {
  const [selectedIndex, setSelectedIndex] = useState<number>(0);
  const changeSelection = (selection: number) => () => setSelectedIndex(selection);
  return (
    <View style={styles.container}>
      <Content {...{selectedIndex}} />
      <View style={styles.tabBar}>
        <Pressable onPress={changeSelection(0)}>
          <Image style={styles.tabIcon} source={ConversationIcon} />
        </Pressable>
        <Pressable onPress={changeSelection(1)}>
          <Image style={styles.tabIcon} source={Translate} />
        </Pressable>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  tabBar: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    paddingBottom: 30,
    paddingTop: 20,
    backgroundColor: '#82AAE3',
    width: '100%',
    shadowColor: "#000",
    shadowOffset: {
      height: -6,
      width: 0
    },
    shadowOpacity: 0.2,
    shadowRadius: 10,
  },
  tabIcon: {
    width: 24,
    height: 24,
  },
});

export default App;

As you would have noticed we have not yet created Conversation and Translation components. Let’s go ahead and create these, starting with the Conversation component.

Create a new folder at the root of project named src and another folder named components inside it.

mkdir src && cd src && mkdir components && cd components && touch index.ts
mkdir Conversation && cd Conversation && touch index.tsx && touch styles.ts

Now paste the following code inside index.tsx file of Conversation folder.

import React, {useCallback, useRef, useState} from 'react';
import {
  Image,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  Text,
  TextInput,
  View,
} from 'react-native';
import {Typing} from '../../../assets';
import {getAnswer} from '../../services/api';
import styles from './styles';

export const Conversation: React.FC = () => {
  const [text, setText] = useState<string>('');
  const [loading, setLoading] = useState<boolean>(false);
  const [conversation, setConversation] = useState<Record<string, string>>({});
  const scrollRef = useRef<ScrollView>(null);

  const handleSubmit = useCallback(async () => {
    setTimeout(() => scrollRef?.current?.scrollToEnd({animated: true}), 200);
    setConversation(prev => ({
      ...prev,
      ...{[`sent${Object.keys(prev)?.length}`]: text},
    }));
    setText('');
    setLoading(true);
    const answer = await getAnswer(text);
    setLoading(false);
    setConversation(prev => ({
      ...prev,
      ...{[`received${Object.keys(prev)?.length}`]: answer},
    }));
    setTimeout(() => scrollRef?.current?.scrollToEnd({animated: true}), 200);
  }, [text]);

  return (
    <>
      <ScrollView
        ref={scrollRef}
        keyboardDismissMode="interactive"
        showsVerticalScrollIndicator={false}
        keyboardShouldPersistTaps={'always'}
        contentContainerStyle={styles.scrollView}>
        {Object?.keys(conversation)?.map(keyName => {
          if (keyName?.includes('sent')) {
            return (
              <View
                key={`sent${keyName}`}
                style={[styles.sent, styles.chatBubble]}>
                <Text
                  selectable
                  selectionColor={'purple'}
                  style={styles.msgText}>
                  {conversation?.[keyName]}
                </Text>
              </View>
            );
          }
          return (
            <View key={keyName} style={[styles.received, styles.chatBubble]}>
              <Text selectable selectionColor={'yellow'} style={styles.msgText}>
                {conversation?.[keyName]?.replace('\n', '')?.replace('\n', '')}
              </Text>
            </View>
          );
        })}
        {loading && (
          <View
            key={'typingLoader'}
            style={[styles.received, styles.chatBubble]}>
            <Image
              resizeMode="contain"
              source={Typing}
              style={styles.typingLoader}
            />
          </View>
        )}
      </ScrollView>
      <KeyboardAvoidingView
        style={styles.container}
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
        <TextInput
          blurOnSubmit
          autoCapitalize="none"
          autoComplete="off"
          autoCorrect={false}
          keyboardAppearance={'dark'}
          keyboardType={'web-search'}
          style={styles.input}
          placeholder="Ask me anything...."
          value={text}
          onChangeText={setText}
          onSubmitEditing={handleSubmit}
          placeholderTextColor={'#1116'}
        />
      </KeyboardAvoidingView>
    </>
  );
};

Before we get into the above code, paste the below code in styles.ts file in same folder.

import {Dimensions, StyleSheet} from 'react-native';

export const WIDTH = Dimensions.get('window').width;

export default StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  input: {
    borderWidth: 2,
    borderColor: '#91D8E4',
    width: WIDTH - 40,
    height: 60,
    borderRadius: 12,
    backgroundColor: '#EAFDFC',
    paddingHorizontal: 14,
    fontWeight: '700',
    color: '#000',
    marginBottom: 20,
    shadowColor: '#82AAE3',
    shadowOffset: {
      height: 0,
      width: 0,
    },
    shadowOpacity: 0.4,
    shadowRadius: 4,
  },
  loader: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    zIndex: 999,
    backgroundColor: '#fffc',
    justifyContent: 'center',
    alignItems: 'center',
  },
  scrollView: {
    paddingHorizontal: 20,
    paddingTop: 60,
    paddingBottom: 140,
    width: WIDTH,
  },
  sent: {
    backgroundColor: '#04DE71',
    alignSelf: 'flex-end',
  },
  received: {
    backgroundColor: '#2094FA',
    alignSelf: 'flex-start',
  },
  chatBubble: {
    borderRadius: 20,
    paddingVertical: 12,
    marginBottom: 8,
    maxWidth: WIDTH / 2 + 80,
    paddingHorizontal: 16,
  },
  msgText: {
    fontWeight: '500',
    color: '#FFF',
    letterSpacing: 0.2,
  },
  typingLoader: {
    width: 80,
    height: 20
  }
});

Now let’s discuss what does the code in Conversation component do.

We have done the following in code:

1. We have created three state variable for storing and updating the text , loading state, and conversation . We also created a ref object named scrollRef which we will use to scroll to the bottom of our chat scrollview.
2. Then we have declared a handleSubmit method, this method is responsible for setting the user end of text into conversation and then calling the getAnswer method which calls our backend API and returns the answer from API (We will create this method in next step). Then we are appending the answer we get from API into our conversation state var.
3. Scrollview is used to render all the data in converation variable. We are mapping over it to render all the texts we sent and got from the api.
4. Lastly we have our TextInput wrapped in a KeyBoardAvoidingView so that it doesn’t hide behind device keyboard. This TextInput is responsible for getting input from the user and calling the handleSubmit method when user submits into the TextInput .

This will not work yet as we have not create the getAnswer method yet.

To do so, create a new folder name services in src and inside the folder create another folder named api , then a file name index.ts .

cd src && mkdir services && cd services
mkdir api && cd api
touch index.ts

For calling API’s in our application we will use axios , so lets install it.

yarn add axios
   OR
npm i axios

After the dependency is installed, paste the below code inside index.ts file.

import axios from 'axios';
const BASE_URL = 'http://nextjs-chatgpt-be.vercel.app/api/';

export const getAnswer = async (question: string) => {
  try {
    const res = await axios.post(
      `${BASE_URL}ask-a-question`,
      {question},
    );
    return res?.data?.result;
  } catch (e) {
    console.error(e);
    return 'Something went wrong!! ☹️';
  }
};

export const getTranslatedText = async (query: string, language: string) => {
  try {
    const res = await axios.post(`${BASE_URL}translate`, {query, language});
    return res?.data?.result;
  } catch (e) {
    console.error(e);
    return 'Something went wrong!! ☹️';
  }
};

In the above code we have declared two methods:

• getAnswer for calling the ask-a-question endpoint
• getTranslatedText for calling the translate endpoint (We will use this method in later steps).

After writing all this code our app will look like this:

Isn’t this cool 😎 , we just created a full chatbot in React Native using minimal code.

Let’s move onto the final part, creating the text translation app.

Create a folder named Translation in components folder.

cd components && mkdir Translation && cd Translation
touch index.tsx && touch styles.ts

Add the below code in styles.ts

import {StyleSheet} from 'react-native';
import {WIDTH} from '../Conversation/styles';

export default StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    paddingTop: 80,
  },
  input: {
    borderWidth: 2,
    borderColor: '#91D8E4',
    width: WIDTH - 40,
    height: 60,
    borderRadius: 12,
    backgroundColor: '#EAFDFC',
    paddingHorizontal: 14,
    fontWeight: '700',
    color: '#000',
    marginBottom: 20,
    shadowColor: '#82AAE3',
    shadowOffset: {
      height: 0,
      width: 0,
    },
    shadowOpacity: 0.4,
    shadowRadius: 4,
  },
  translatedText: {
    fontWeight: '700',
    fontSize: 24,
    color: '#000',
    textAlign: 'left',
    alignSelf: 'flex-start',
    letterSpacing: 0.4,
  }
});

Add the following code in index.tsx

import {View, Text, TextInput, Button, ActivityIndicator} from 'react-native';
import React, {useCallback, useState} from 'react';
import styles from './styles';
import {getTranslatedText} from '../../services/api';

export const Translation: React.FC = () => {
  const [text, setText] = useState<string>('');
  const [language, setLanguage] = useState<string>('English');
  const [translatedText, setTranslatedText] = useState<string>('');
  const [loading, setLoading] = useState<boolean>(false);
  const translateText = useCallback(async () => {
    setLoading(true);
    const result = await getTranslatedText(text, language);
    setTranslatedText(result);
    setLoading(false);
  }, [text, language]);
  return (
    <View style={styles.container}>
      <TextInput
        placeholder="Enter text to translate"
        style={styles.input}
        value={text}
        onChangeText={setText}
        placeholderTextColor={'#1116'}
      />
      <TextInput
        placeholder="Enter Language to translate in"
        style={styles.input}
        value={language}
        onChangeText={setLanguage}
        placeholderTextColor={'#1116'}
      />
      {loading ? (
        <ActivityIndicator size={'large'} color={'#2094FA'} />
      ) : (
        <Button title={`Translate to ${language}`} onPress={translateText} />
      )}
      <Text style={styles.translatedText}>{translatedText}</Text>
    </View>
  );
};

This is a very simple component which has two TextInputs to handle two state variables text and language . text is the actual string which user wants to translate and language is the desired language which user wants to translate into.

Then we have a Button which when pressed calls the translateText method. This method calls the getTranslatedText method which fetches the translated text from our API.

Output of above code will similar to below:

Congratulations 🎉 , you just made a ChatBot and Transaltion App using React Native and Nextjs.

Conclusion

As i was getting lazy i used ChatGPT to write the conclusion for this article. 😆

ChatGPT is a powerful chatbot technology that has revolutionized how chatbots interact with people. With its natural language processing capabilities, it can understand the user’s intent and provide relevant responses. As AI technologies continue to evolve, so will ChatGPT. In the future, it can be expected to provide even more intelligent interactions, making it an invaluable tool in the chatbot landscape. — From ChatGPT

Thank you for reading, Cheers 🥃

In this article, we will see how we can implement Layout Animations in React Native using the react-native-reanimated library.

React Native Reanimated is an animation library that runs the animations that we declare on the Javascript thread directly onto the Native / UI thread.

In React Native the components render or appear instantly on the UI which is not as pleasing to the User as compared to something which slowly fades in or with some other animation. Now animating your components while they enter or exit in the UI is very easy thanks to the new version 2.3.0 of reanimated. They have introduced something called Layout Animation which does exactly the same as it sounds. Using this we can now specify which type of animation should happen when a component Mounts / Enters or Demounts / Exits the Screen. There are a lot of predefined animations we can use for Entering and Exiting animations.

We will see how we can implement Layout Animations in our React Native application by creating two animations:

• Animated Flip Counter
• Animated Todo List

Below are the prerequisites you need before starting to code:

• React-Native Version => 0.62+
• React-Native-Reanimated => 2.3.0 or above (As Layout Animations are introduced recently with 2.3.0)

We will start by creating a new react-native project, to create a new react-native project type the below command into your terminal.

You can check out the code in this repository

As of the time I am writing this, the latest react-native version is 0.67

Then change your current working directory into the App we just created

cd <App-Name>

Type the below into terminal to install pods and run the iOS project:

cd ios
pod install
cd ..
yarn ios 

``` 
Use Yarn if you have it installed and if 
not run [ npm run ios ]

```

Run the android project using the below command:

yarn android

Now that our iOS and Android apps are up and running now we will install react-native-reanimated. As this library uses TurboModules we need to do some extra steps to make it work.

Turbo Modules offer a new architecture for initializing native modules. At the runtime of the application, the TurboModules open a bridge that will later allow the js code to initialize any module at its first use.

The setup in iOS is pretty straightforward now as they are not using Turbomodules anymore to register their module.

Run the below command in your terminal window to install reanimated package.

As of the time I am writing this the latest reanimated version is 2.3.1

yarn add react-native-reanimated

```
Once installed cd into ios folder and install pods for RNReanimated
```
cd ios
pod install

```
Now we just need to build the iOS app again
To do that either build from XCode or using below command
```
yarn ios

That’s it we have installed reanimated into our iOS project.

For android, there are some extra steps we need to take:

First, we need to enable Hermes; to do that go to app-level build.gradle file and toggle the enableHermes flag to true.

Then we need to return the Reanimated JSI Module in getJSIModulePackage method, to do that add the below to your MainApplication.java

And now we need to rebuild our Android app for the native changes to reflect

```
Either run the android app from android studio or type the command below 

```
yarn android

Now that reanimated is correctly installed into our project, we can utilize it to create awesome animations.

We will start by creating a simple counter which flips every time as its value is changed.

To utilize the Layout Animations we have these two props which take predefined or Custom created animations as inputs:

• entering : The animation that should take place when a component is Mounted onto the screen.
• exiting : The animation that should take place when a component is demounted from the screen.

In this example, we will create a counter with two buttons [add and subtract] and they do exactly the same as they sound and count is wrapped inside an Animated View which flips every time as the value changes.

This is possible because of the key property in React , so we just need to assign the count value which is a React state to the key prop and rest will be handled by React and Reanimated . We’ll look at how this actually works when we write the code for it.

Paste the below code to your App.js file

import {
  Text,
  SafeAreaView,
  Button,
  View,
  StyleSheet,
  TouchableOpacity,
} from "react-native";
import React, { useState } from "react";
import Animated, {
  FlipInXUp,
  FlipOutXDown,
  SlideInDown,
  SlideOutUp,
} from "react-native-reanimated";

const App = () => {
  const [count, setCount] = useState(0);
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.counterContainer}>
        <Animated.View
          key={count}
          style={styles.counterFlip}
          entering={FlipInXUp.springify()}
          exiting={FlipOutXDown.springify()}
        >
          <Text style={styles.counterText}>{count}</Text>
        </Animated.View>
        <TouchableOpacity
          style={[styles.button, styles.subBtn]}
          onPress={() => setCount(count - 1)}
        >
          <Text style={styles.btnText}>{"-"}</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[styles.button, styles.addBtn]}
          onPress={() => setCount(count + 1)}
        >
          <Text style={styles.btnText}>{"+"}</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#000",
  },
  counterContainer: {
    height: 100,
    backgroundColor: "#EEE",
    width: "90%",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 100,
    marginBottom: 8,
    overflow: "hidden",
    paddingVertical: 8,
  },
  counterText: {
    color: "#FFF",
    fontWeight: "bold",
    fontSize: 54,
    letterSpacing: 2,
    lineHeight: 64,
  },
  button: {
    position: "absolute",
    backgroundColor: "#111",
    borderRadius: 40,
    height: 80,
    width: 80,
    justifyContent: "center",
    alignItems: "center",
  },
  subBtn: { left: 6 },
  addBtn: { right: 6 },
  btnText: {
    color: "#FFF",
    fontWeight: "400",
    fontSize: 54,
    lineHeight: 56,
  },
  counterFlip: {
    backgroundColor: "#000",
    paddingHorizontal: 24,
    justifyContent: "center",
    alignItems: "center",
    height: 90,
    borderRadius: 6,
  },
});

Once you have pasted the code you will see we have Animated.View a component that has Text a component that displays the count value. The major code is here:

We have used count as key for our View , so what happens is when we increment or decrement the count value the key for the component is also changed and that results in demounting of the component and mounts another component with the new key value.

We have used FlipInXUp as entering animation and FlipOutXDown as exiting animation and also we have used springify method on them so that we get a springy animation for our counter view.

Our final output will be:

Now that the counter is complete we can move onto the Animated Todo List component.

This will be a pretty straightforward ToDo List with Delete and Add Todo functions only. If you want you can add more features according to you.

The UI that we will design will look like this:

Let’s start by creating a Component for the Todo’s, create a Todos.tsx or Todos.js file according to your accessibility. And also remove all the code (move the counter component to separate file) that we wrote for Counter in App.js and paste the following code inside it.

We have not yet created Todos component

Paste the following code into your Todos.tsx file

import React, { useState } from "react";
import { ScrollView, StyleSheet, Text, TextInput, View } from "react-native";
import Animated, {
  Easing,
  FadeInDown,
  Layout,
  SlideOutLeft,
} from "react-native-reanimated";

type Todo = {
  id: number,
  text: string,
};

export const Todos: React.FC = () => {
  const [todos, setTodos] = useState<Todo[]>([
    { id: 1, text: "Initial Todo 1" },
    { id: 2, text: "Initial Todo 2" },
  ]);
  const [text, setText] = useState < string > "";

  const removeTodo = (id: number) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  const addTodo = () => {
    if (text?.trim()) {
      setTodos([...todos, { id: todos?.length + 1, text }]);
      setText("");
    }
  };

  return (
    <ScrollView
      contentContainerStyle={styles.container}
      keyboardDismissMode="on-drag"
      keyboardShouldPersistTaps={"always"}
    >
      <Text style={styles.header}>Your To Do's</Text>
      <View style={styles.separator} />
      <TextInput
        style={styles.todoInput}
        blurOnSubmit={false}
        placeholder={"Add ToDo"}
        placeholderTextColor={"#444"}
        value={text}
        onChangeText={setText}
        onSubmitEditing={addTodo}
      />
      <View style={styles.separator} />
      {todos.map((todo, index) => (
        <Animated.View
          key={todo.id}
          style={styles.todo}
          entering={FadeInDown}
          layout={Layout.easing(Easing.bounce).delay(index * 100)}
          exiting={SlideOutLeft}
        >
          <Text style={styles.todoText}>{todo.text}</Text>
          <Text onPress={() => removeTodo(todo?.id)}>{"✅"}</Text>
        </Animated.View>
      ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingVertical: 14,
    paddingHorizontal: 18,
  },
  header: {
    fontSize: 32,
    fontWeight: "800",
    color: "#fff",
    letterSpacing: 1.2,
  },
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: "#444",
    marginTop: 10,
  },
  todo: {
    paddingVertical: 10,
    paddingHorizontal: 18,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: "#444",
    borderRadius: 4,
    marginTop: 12,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  todoText: {
    fontSize: 18,
    fontWeight: "400",
    color: "#ccc",
  },
  todoInput: {
    paddingVertical: 10,
    paddingHorizontal: 18,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: "#bbb",
    backgroundColor: "#111b",
    borderRadius: 4,
    marginTop: 10,
    color: "#fff",
    fontSize: 20,
    fontWeight: "600",
    letterSpacing: 1.4,
  },
});

Now let’s see what have we actually done here:

• We have wrapped the component with a ScrollView to list all the Todo’s here
• Then we have TextInput which modifies our state value text which is used to add a new Todo, and when a user submits from that input then we add that Todo object to our todos array.
• We have mapped over todos array to list the todos in our ScrollView and then we are Rendering the Todo in an Animated.View component.
• Animated.View component is the one where all the magic happens, you must have noticed we have introduced a new prop named layout this prop is responsible to trigger any animation if there is any change in layout, like in our case if any Todo is deleted then all the remaining Todo’s, specifically the ones below it will change their layout, and then we are animating it with Easing bounce function and we have delay for each item of index * 100 this is to achieve the ripple effect so that each component is animated 100ms after the other.

NOTE: Don’t use the delay of index * 100 in large lists as there, it may result into many seconds of delay

• Also, we have “ ✅ “ text, which upon pressed deletes the specified Todo object

And that’s it we have created an Animated Todo List without any other animation-specific code.

The Output will be something like this:

So now we have a working understanding of how Layout Animations in React Native Reanimated works, and how can we easily implement them without writing much code. This is a powerful feature that will change the way we animate in React Native.

Build Layout Animations Using React Native Reanimated was originally published in Better Programming on Medium, where people are continuing the conversation by highlighting and responding to this story.

For those who are not familiar with React Native, it is a cross-platform development framework allowing you to create native apps for iOS and Android. Using React Native, you can maintain two platforms using the same codebase, allowing faster development, iteration, and knowledge-sharing.

With this framework, we have two sides, JavaScript and Native. Between the two is a bridge, allowing bidirectional and asynchronous communication. This is the power of React Native, on top of a multitude of other benefits.

In 2020, we’ve seen the likes of Facebook, Bloomberg, and Shopify using React Native to develop their mobile applications, amongst others in the Fortune 500. With over 11 million JavaScript developers and more companies switching to React Native, releasing your technology for React Native could bring more growth.

What is React Native bridging?

React Native Bridging is a concept that was developed by the React team to help the mobile app developers build their own custom modules, if not provided by the default Components given by React.

React Native provides developers with a variety of modules that developers can use to create functionality in the application. For example, React Native provides its own “Net Info” module to check for Internet Connectivity in applications. However, sometimes an app needs access to a platform API for which React doesn’t have a module yet. Or maybe the app needs a custom functionality that cannot be achieved using default React Native modules.

Hence, React Native allows us to write Native Code (Android and iOS) and communicate between native code and React Native JavaScript code to achieve custom-developed functionality.

According to the documentation, React Native team believes that if React Native doesn’t support a native feature that you need, you should be able to build it yourself by using Bridging.

There are two ways to bridge native code to JavaScript:

1. Native Modules
2. Native UI Components

But in this article, we are only going to discuss about native modules.

Native Modules can be used to access native iOS and Android features.

We will see how to create Native modules for both iOS and android separately by creating a demo application.

An overview of steps to create a native android module:

1. Create a java class file that will contain all the native logic you want to execute and variables and callbacks you want to export to JavaScript.
2. Create a java package for the java class you just created in the previous step and register the module in this package.
3. Now the last step is to make the package available in the JavaScript code. To do so add your package in the return array of getPackages() method in the MainApplication.java file.
4. That’s it you have now exported your native module to javascript, to access it we will use NativeModules from React Native.

We’ll understand this process in more detail by practically implementing a native module.

So now let’s directly jump into some code and practical implementation.

For this example, we will be creating a native module in android that alters with sound to reproduce a funny one. For example, we can make a person sound like an alien or a kid.

• Let’s start by first creating a new React Native project:

Type the below command into your terminal window to create a new React Native Project from scratch

react-native init VoiceChanger

Here I have named the project “VoiceChanger” you are free to name it whatever you like.

• Change your current working directory to the new project we just created

Type below command in your terminal window

cd VoiceChanger

For the sake of simplicity of this article, I will use a static mp3 file that we are going to modify in our native code, but you can also record the audio through the phone’s microphone and alter that.

Our UI is going to be straightforward and looking something like this on iOS and Android devices:

When the user taps any effect button then that type of voice will be played.

For example, if a user taps on the alien icon, then an alien-type voice will be played, and likewise for the child icon.

We will also cover how we can change the speed of audio, that is, we will be playing audio at 2x speed and 0.5x speed.

• Modify your App.js to look something like this:

We have commented ,

const { VoiceChangingModule } = NativeModules;

because we have not created a native module yet. Once we have created NativeModule named “VoiceChangingModule” we will uncomment that line

Now we will be creating a Native Android Module, for that follow the below steps

• Open Android studio in your project’s android directory
• If you have opened the project correctly you will see something like this in your project files on the left side in android studio.

• Navigate to the folder containing MainApplication.java
• Right-click the folder name > Go to New Option > Select Java Class

• Enter Java Class File Name

I have named the file as VoiceChangingModule, this is a module file that will contain all of our native android logic.

• Paste this code in your VoiceChangingModule Class:

As you can notice we have a getName() method which returns a String, this is a name with which we can access our module in JavaScript code

• Now we need to wrap our module in a package that will be exported to javascript for that we will create a new java class file

I am going to name this File “VoiceChangingPackage”

• Edit the package VoiceChangingPackage file to create and return the module we just created

• Add the package in PackageList of getPackages() method of MainApplication.java

Yayyy!! That’s it we have successfully exported our Native Android module to Javascript.

Now let’s access the module from javascript, but before doing so let’s just add 4 methods to our VoiceChangingModule.java file

• changeVoiceToAlien
• changeVoiceToChild
• speedUpVoice
• slowDownVoice

After adding these methods our final VoiceChangingModule.java will look something like this.

As you can see, we have just tweaked a little bit of Pitch and speed of voice playback to achieve these kinds of voice effects.

Now let’s access these methods in javascript.

• Get the Module in Javascript from NativeModules provided by react-native

const { VoiceChangingModule } = NativeModules;

Uncomment the above line in our App.js which we commented earlier.

• Now add these functions in App.js which will be called on each voice effect icon’s press

Note: As we have only created this native module in android only so we can access this module in android platform only.

That’s it we have made a native android module and utilized it in javascript.

Now let’s run this example, in your command line type:

npx react-native run-android

Note: If you have done changes in native side and those are not reflecting you need to rebuild the project because you have changed native code.

Now that we have created a native android module, let’s take a look at how we can create a native iOS module?

An Overview of Steps to create a native iOS module:

1. Create a swift class which will contain all the native logic and variable and callbacks you want to export to the javascript
2. Create a bridging header file that will help communicate between swift and objective C, now import RCTBridgeModule in this file while providing an interface to register the bridge module.
3. Create an objective C file and export module we created in the first step by using RCT_EXTERN_METHOD
4. Now we can access the native module we just created in our javascript code

Like in the previous section of creating a native android module we’ll now similarly understand this process by creating a native iOS module.

So, we will now create an iOS native module for the same functionality that we achieved in android, i.e., adding voice effects to a sound.

• We do not need to create a new project as we are going to add a native module in iOS in the same project that we created above in the native android module part.

If you have not followed (Native Android Module) then please refer above and set up a bare react native project

• Open the project folder then navigate to the iOS folder and find VoiceChanger.xcodeworkspace and open it

VoiceChanger -> iOS -> VoiceChanger.xcodeworkspace

• After opening the XCode project you will see something like this

NOTE: Appearance may vary based upon the version of XCode you are using.

• The next step is to create a new swift file in the project, which will contain our native swift logic

File -> New -> File

• After clicking the new file option a popup will appear asking us to select which type of file we want to create. As we want to create a swift file, select swift and click next

Swift -> Next

• After clicking next, we will be asked for the name of the file we want to create, enter the name of the swift file, in my case, it is “VoiceChangerModule”. And select where do you want to create this file, select your projects folder, typically this folder contains all the native iOS logic and also AppDelegate file.

• Click create, you will be prompted to if you want to create a bridging header file. Select Yes.

Bridging header file basically acts as a communicator between swift code and objective C code.

• If you have clicked on creating a bridging header, you will have a “VoiceChanger-Bridging-Header.h” file. Paste the following code into that file.

RCTBridgeModule provides us an interface to register our bridge module

• Download any mp3 or any audio file and place it in our project folder. Here I have named my sound file “sound_sample.mp3” so it would be better if you follow that.

• Edit your “VoiceChangingModule.swift” file to write voice changing logic in it

• As you can see, we have four functions:

1. changeVoiceToAlien()

2. changeVoiceToChild()

3. speedUpVoice()

4. slowDownVoice()

• These four functions use a helper function playModifiedSound() which takes two parameters:

1. value — Takes Float value — Describes how much value to be used, in this case, rate or pitch
2. rateOrPitch — Takes String value — is used to just know whether to change rate of Audio or Pitch

We can also see we have requiresMainQueueSetup() function which returns true. This function is used to tell native code that we want to run our module on mainQueue Thread.

• Now that we have written our native logic in our functions, it is time to export them to javascript. For that, we will create a new Objective-C file.

Go To File -> New -> File -> Select Objective-C type of file -> Enter File Name -> Click Next

• Now that we have created an Objective-C file, let’s edit it to export our module and its functions to javascript

That’s it! We have now created and exported a native iOS module to javascript. Let’s see how will we access it in javascript.

But before that, we need to enable audio service for our iOS app.

For that Go To:

Add Capability Button in Signing and Capabilities tab in project details -> select Background Modes -> then check these two options

Do not forget to build the project from XCode after doing changes.

• After you have built the application from XCode go to your App.js file and edit it to call the native module methods that we just created on each button press.

Notice that we are calling differently for each platform with just one change, i.e., in android, we call the native module method with a parameter and in iOS without any parameter.

Yay!!, That’s it, we have made Native Android and iOS modules in React Native to use native code and achieve similar behavior in both platforms.

Thus, this is how we can create a bridge between React Native JavaScript code and native android/iOS Code.

If you want to skip the code and want to see the code in action, then feel free to download the demo of this project from below repository

https://github.com/mobile-simformsolutions/react-native-bridging

Conclusion: As we saw react-native bridging is a quite powerful feature for accessing native features that are not available in react native environment and it provides developers an option to develop their features natively if they want.

Hope you found this article helpful, if so then please don’t forget to give some claps 👏🏻 and share it with your other fellow developer friends.

Thank You!

Bridging for iOS and Android in react-native was originally published in Simform Engineering on Medium, where people are continuing the conversation by highlighting and responding to this story.