Insta1, Faker package and fake data

For developing mobile application like Instagram with react native and typescript, this writing explains how to configure fake data for development purpose.

1. Set up for iOS and android

• Follow the guideline in https://reactnative.dev/docs/set-up-your-environment

2. Create react native project and make App.tsx

• npx @react-native-community/cli@latest init ProjectName Template

$ npx @react-native-community/cli@latest init FakerTest react-native-template-typescript

• During creating project you will see whether to install CocoaPods. Enter y to install.

✔ Downloading template
✔ Copying template
✔ Processing template
✔ Installing dependencies
✔ Do you want to install CocoaPods now? Needed for running iOS project … yes
⠇ Installing Ruby Gems

• If you didn't install it, don't worry. You can install CocoaPods later as below. CocoaPods is needed for iOS development.

$ cd ios
$ rm -rf Pods Podfile.lock
$ pod install --repo-update

• Make App.tsx as below. This is minimal coding to be compiled and rendered.

import React from 'react'
import {SafeAreaView} from 'react-native'

export default function App() {
  return <SafeAreaView />
}

3. Install Faker package

• Move to your project and install Faker package.
• This package is used only for development purpose so install it with devDependencies. (--save-dev)

$ cd FakerTest
$ npm install --save-dev @faker-js/faker

4. Make directory for project source code (fake data)

• Move directory as below to manage the source code.

$ mkdir src
$ cd src
$ mkdir data
$ cd data
$ touch index.ts IPerson.ts faker.ts util.ts createRandomPerson.ts
$ cd ../..

5. Coding to show fake data

• Make IPerson.ts as below. This is just development purpose with fake data but next time the real data would be transferred from remote server.

src/data/IPerson.ts

export type IPerson = {
  id: string;
  createdDate: Date;
  modifiedDate: Date;
  name: string;
  email: string;
  avatar: string;
  image: string;
  comments: string;
  counts: {
    comment: number;
    retweet: number;
    heart: number;
  };
};

• Make util.ts as below. This will be used for making some random number later for counts of comment etc., and for URL.
• In the URL, picsum is for getting random image and ui-avatars is for getting avatar image.

src/data/util.ts

export const makeArray = (length: number) => new Array(length).fill(null);
export const random = (min: number, max: number): number =>
  Math.round(Math.random() * (max - min)) + min;
export const unsplashUrl = (width: number, height: number): string =>
  `https://picsum.photos/${width}/${height}`;
export const avatarUriByName = (name: string) =>
  `https://ui-avatars.com/api/?name=${name.split(' ').join('+')}`;

• Make faker.ts as below. This is for making fake data with random id, name, avatar, date, comments etc.
• How to use and get some fake data, you can find in this official document: https://www.npmjs.com/package/@faker-js/faker

src/data/faker.ts

import {faker} from '@faker-js/faker';
import * as U from './util';

export const randomId = (): string => faker.string.uuid();
export const randomName = (): string => faker.person.fullName();
export const randomEmail = (): string => faker.internet.email();
export const randomAvatarUrl = (name?: string): string =>
  U.avatarUriByName(name ?? randomName());
export const randomDate = (): Date => faker.date.recent();
export const randomParagraphs = (count: number = 2): string =>
  U.makeArray(count).map(faker.lorem.paragraph).join('\n');
export const randomImage = (): string =>
  U.unsplashUrl(U.random(800, 1000), U.random(800, 1000));

• Make createRandomPerson.ts as below. Import utility and fake data from util.ts and faker.ts and use it for below such as id, createdDate, name, email and counts for comment etc.
• In the App.tsx, this fake data can be called with this function.

src/data/createRandomPerson.ts

import type {IPerson} from './IPerson';
import * as F from './faker';
import * as U from './util';

export const createRandomPerson = (): IPerson => {
  const name = F.randomName();
  return {
    id: F.randomId(),
    createdDate: F.randomDate(),
    modifiedDate: new Date(),
    name,
    email: F.randomEmail(),
    avatar: F.randomAvatarUrl(name),
    image: F.randomImage(),
    comments: F.randomParagraphs(4),
    counts: {
      comment: U.random(10, 100),
      retweet: U.random(10, 100),
      heart: U.random(100, 1000),
    },
  };
};

• Make index.ts as below to make simple import coding in App.tsx

src/data/index.ts

export * from './util';
export * from './faker';
export * from './IPerson';
export * from './createRandomPerson';

• Make App.tsx as below.
• Import everything from ./src/data. Node and typescript find index.ts automatically. Therefore import * from './src/data/index.ts' can be shortened as import * from './src/data'

App.tsx

import React from 'react';
import {SafeAreaView, Text} from 'react-native';
import * as D from './src/data';

const person = D.createRandomPerson()
export default function App() {
  return (
    <SafeAreaView>
      <Text>{JSON.stringify(person, null, 2)}</Text>
    </SafeAreaView>
  );
}

6. Build the application to see it in simulator

• Start the Metro server with: npm start

$ npm start

• When Metro server is ready, in another command window, enter the below commands to build for iOS and Android.

$ npx react-native run-ios

$ npx react-native run-android

• You will see error code 65 in iOS build, which is typical build fail error. This time it is because after installing Faker package, it was not linked to CocoaPods. Link the package as below by reinstall CocoaPods.

$ cd ios
$ npx pod-install
$ cd ..

• Build the iOS and Android in your simulator then you can see as below.
• Now it is just texts with fake data but in next article I will introduce this to render with some structure like insta and image.