DEV Community: Akinn Rosa

How to run Mongo DB local as a replica set

Akinn Rosa — Wed, 21 Dec 2022 01:25:06 +0000

In this post you will see how to run a Mongo DB server with replica set.

For this, we will use mongodb community that you can install from your therminal.

First, create a folder to store your data, like:
mkdir /data/mongodb/db0

Then, start your server with this command.
mongod --port 27017 --dbpath /data/mongodb/db0 --replSet rs0 --bind_ip localhost

After first start, you will need to start the replica set.
Open your SGBD (you can use Mongosh) and run this command:
rs.initiate()

Now, you can restar your server to apply all changes:
Run netstat -vanp tcp | grep 27017 in your therminal to get PID application, and kill then.
kill -9 81094 (modify 81094 to your PID)

Then, run
mongod --port 27017 --dbpath /data/mongodb/db0 --replSet rs0 --bind_ip localhost

That's It!

How to use Swift in your React Native app

Akinn Rosa — Tue, 06 Jul 2021 12:19:33 +0000

In this post, we will integrate a React Native app with share on social media feature on iOS using Swift.

Introduction

If you are not familiar with Native Modules on React Native - and it's ok because this tutorial is for you too! - know that it's most common to integrate a React Native with Objective-C (iOS) and Java (Android), but recently this have changed. With the grew of Swift language, have been popular create Native Modules with Swift for React Native apps on iOS. We still need to use some Objective-C to be able to use Swift, but this thing maybe can change soon.

To follow this tutorial, you will need to have a React Native app, and if you don't have yet, you can start a new one using npx react-native init.

Currently, is not possible to integrate native code with Expo Managed Workflow, but you can use Expo CLI with Bare Worflow if you prefer.

Why Swift Code

Some features available to use on user phones only can be accessed with native code like Camera, Geolocation, Bluetooth, and more. For iOS, you can choose between Swift and Objective-C to implement these features on your app. Mostly React Native code is written with Objective-C because React Native core uses Yoga lib for layout that works better bridging with Objective-C because is written in C++. But how we can see on documentation we also can bridge our application with Swift to use these functionalities. In this article, we will see how to use Swift to integrate our app with Share with social medias native popover.

Creating native method with Swift

The first step, is create the function that you need on native part like an implementation on native apps. We will create a File called RNShare.swift on ios folder from our React Native app. We use RN before module name to indentify that is a Native Module to use on Javascript later.

In RNShare.swift, we need to create class object.



import Foundation

class RNShare : NSObject {
}

Is important to import Foundation on every Swift file in your modules

RNShare.swift will have our all functions that we need to expose to Javascript related to this module.

Let's create a function called _open that open the Share window on our app.



import Foundation

class RNShare : NSObject {
  func _open() -> Void {
    let controller = RCTPresentedViewController();
    let shareController = UIActivityViewController(activityItems: ["Hello React Native"], applicationActivities: nil);

    shareController.popoverPresentationController?.sourceView = controller?.view;

    controller?.present(shareController, animated: true, completion: nil)
  }
}

This function will open a window to share the message "Hello React Native" with the user's installed social medias. We are simply instancing our window with UIActivityViewController, and adding this controller to our React Native view controller (RCTPresentedViewController) and calling method present to present on the screen.

Our goal is to recieve a dynamic message from Javascript and sends this message to social medias. Then, we can add some logic to recieve params with open function.



import Foundation

class RNShare : NSObject {
  func _open(options: NSDictionary) -> Void {
    var items = [String]()
    let message = RCTConvert.nsString(options["message"])

    if message != "" {
      items.append(message!)
    }

    if items.count == 0 {
      print("No `message` to share!")
      return
    }

    let controller = RCTPresentedViewController();
    let shareController = UIActivityViewController(activityItems: items, applicationActivities: nil);

    shareController.popoverPresentationController?.sourceView = controller?.view;

    controller?.present(shareController, animated: true, completion: nil)
  }
}

Now, we are recieving an options object, with an object that our message will be passed (or whatever parameter you want).

Function open was not created with an _ by coincidence. This function is private because we will only call it on Swift object. We need to create another public function that will indicate to call this function on main thread with some extra configs.
Also, we need to create a requiresMainQueueSetup to manage our queue on main thread.



import Foundation

@objc(RNShare)
class RNShare : NSObject {

  @objc static func requiresMainQueueSetup() -> Bool {
      return false
  }

  // Reference to use main thread
  @objc func open(_ options: NSDictionary) -> Void {
    DispatchQueue.main.async {
      self._open(options: options)
    }
  }

  func _open(options: NSDictionary) -> Void {
    var items = [String]()
    let message = RCTConvert.nsString(options["message"])

    if message != "" {
      items.append(message!)
    }

    if items.count == 0 {
      print("No `message` to share!")
      return
    }

    let controller = RCTPresentedViewController();
    let shareController = UIActivityViewController(activityItems: items, applicationActivities: nil);

    shareController.popoverPresentationController?.sourceView = controller?.view;

    controller?.present(shareController, animated: true, completion: nil)
  }
}

Note that we add @objc for open, requiresMainQueueSetup, and RNShare. This means that this code will be called on Objective-C and you need this declarations to work as expected.

Creating bridge between Objective-C and Swift code

The Objective-C code is the code that able to expose native functions to React Native(Javascript). We need to create a file called RNShare.m that will refer to our Swift functions and will expose it to our bridge with Javascript.



#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(RNShare, NSObject)

RCT_EXTERN_METHOD(open:(NSDictionary *)options)

@end

Our class and method are now exposed to Javascript bridge.

Calling native module with Javascript

To be able to use native methods, we need to use NativeModules from react-native. I like to create a folder called native on source code and every file is a different native module.

RNShare.js:



import { NativeModules } from 'react-native';
const { RNShare } = NativeModules;
export default RNShare;

After expose native method, let's call our function in a React Native component.

App.js



import {Button, SafeAreaView} from 'react-native';

import RNShare from './native/RNShare';

const App = () => {

  return (

    <SafeAreaView style={{ flex: 1 }}>

      <Button

        title="Share"

        onPress={() => RNShare.open({message: 'Bridge with Swift Dev.to Tutorial'})}

      />

    </SafeAreaView>

  );

};

Result

That's It! 🎉

Following this guide, you are able to create whatever methods you want in Swift to expose in your React Native apps. If you want to see more about native module integrations, check awesome-native-modules repository on github to see some native integrations with iOS and Android!

How to solve 'BroadcastChannel is not defined'

Akinn Rosa — Mon, 14 Jun 2021 14:49:12 +0000

When using BroadcastChannel with React in your application, you probably will face with this issue if try to run some tests with React Testing Library and Jest:

    ReferenceError: BroadcastChannel is not defined

      51 |
      52 |   useEffect(() => {
    > 53 |     authChannel = new BroadcastChannel('auth')
         |     ^

To resolve this, I tried to mock BroadcastChannel creating a broadcast.ts file inside __mocks__ folder with this content:

jest.mock('BroadcastChannel')

Now, you probably will face with this issue:

    Cannot find module 'BroadcastChannel' from 'src/__mocks__/broadcast.ts'

    Require stack:
      src/__mocks__/broadcast.ts

    > 1 | jest.mock('BroadcastChannel')
        | ^
      2 |

Jest can't find BroadcastChannel because is not a module, then, it is necessary install BroadcastChannel module (this helps your tests and help old browsers support).

yarn add broadcast-channel

Then, import BroadcastChannel where you are using (just add import, your code should be the same).

import { BroadcastChannel } from 'broadcast-channel'

In the last step, you need to change you mock file that you created at start to mock broadcast-channel module:

jest.mock('broadcast-channel')

That's It! 🎉

Now your tests should pass and you can work with jest using BroadcastChannel perfectly.

How to mask Text and TextInput components in React Native and Expo

Akinn Rosa — Wed, 26 May 2021 13:23:24 +0000

In this post, I will show you how to work with custom masks in React Native and Expo, available for iOS, Android, and Web!

We will use a library called react-native-mask-text, is a full javascript library without native code, then you can use with all CLI of React Native environment.

You can simply start a new project with npx react-native init or expo init on your shell.

Let's assume that you already have a React Native CLI or Expo CLI created. You will need to add the mask library:

NPM:



npm i react-native-mask-text

Yarn:



yarn add react-native-mask-text

After the installation, you can import two components from this library:

<MaskedTextInput /> to add a custom mask to React Native TextInput component.

<MaskedText /> to add a custom mask to React Native Text component.

We have a mask prop in our components, then allow us to add a custom mask format passing string with format that we need.

Pattern used in masked components:

9 - accept digit.
A - accept alpha.
S - accept alphanumeric.

In this example, let's see a simple implementation of a custom date mask.
Below you will see the use of each of the two components:

MaskedTextInput with custom mask:



import React, { useState } from "react";
import { StyleSheet, View } from "react-native";
import { MaskedTextInput} from "react-native-mask-text";

export default function App() {
  const [maskedValue, setMaskedValue] = useState("");
  const [unMaskedValue, setUnmaskedValue] = useState("");

  return (
    <View style={styles.container}>
      <MaskedTextInput
        mask="99/99/9999"
        onChangeText={(text, rawText) => {
          setMaskedValue(text);
          setUnmaskedValue(rawText);
        }}
        style={styles.input}
        keyboardType="numeric"
      />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#ecf0f1",
    padding: 8,
  },
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
  },
});

You can see that the component accept same properties of TextInput from React Native, we used style and keyboardType, and you can use your intellisense to discover other props.

MaskedText with custom mask:



import React from "react";
import { StyleSheet, View } from "react-native";
import { MaskedText } from "react-native-mask-text";

export default function App() {
  return (
    <View style={styles.container}>
      <MaskedText mask="99/99/9999" style={styles.paragraph}>
        30081990
      </MaskedText>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#ecf0f1",
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    textAlign: "center",
  },
});

How you can see, we can add native props from React Native Text component to our MaskedText component.

That's it! 🎉

Now, you can add whatever mask you want to your Text and Input components from React Native!
If you enjoy this content, don't forget to give a star for react-native-mask-text library on Github.

https://github.com/akinncar/react-native-mask-text