Sign in

Trying to Solve Problems with Code @ timeless.co. Open sourcing the solutions when possible.

Hello everyone! Let's try to add a React Native Project to the App Store.

Make sure you have a Developer Account in Apple and a React Native Project.

Head over to App Store Connect.

Let us now add our first app.

Click on the ‘+’.


Okay, let's get started by creating a sample project.

npx react-native init SampleProject

Once created open Xcode -> Select project from Mac (SampleProject.xcworkspace).

Download the simulators for iOS version 14.4.


3D Render by Udhaya Chandran

This is just a series of steps on how I integrated react native with firebase for notifications in my app.

Let us start by installing the Firebase app module into our project.

In your terminal :

# Using npm
npm install --save @react-native-firebase/app

# Using Yarn
yarn add @react-native-firebase/app

Once done let us head to the Firebase console and create a Project.

After entering your Project name and hitting continue you would have successfully created a Firebase project.

I have created a project called DemoProject for this blog.


Let us build a custom stepper component from Scratch.

3D Render by Udhaya Chandran

Tools used :

Design of Stepper Component :


3D Render by Udhaya Chandran

To build it the required prerequisites are

  1. A React Native Project
  2. Zustand integrated — You can get it here. It is a simple, small, and scaleable state-management solution.
  3. A bottom sheet component — I am using this.

Building out the store : 🏗

So the store will have toast details like
- toastMessage: string;
- toastIcon: ReactComponent — if we want to have different icons for different toast message
- showToast : boolean

And a function
- setShowToast : a function to set toast values.

Our store will look something like this:

Creating the toast component : 👨🏻‍🎨

The…


Last year my colleague was working with ProtoPie to achieve a different type of Text Input in Forms. This blog is all about how I achieved that interaction in React Native.

3D Render by Udhaya Chandran

Setting up React Native Project.

(Skip to next section, if already done..)

Go ahead to this link https://reactnative.dev/docs/environment-setup#docsNav and follow the steps on creating a new react native project.

npx react-native init RNAnimatedTextInput

To start the application run npx react-native run-ios inside your React Native project folder. Open your project in VS Code and head to the file named App.js.And remove the code under the return statement and replace it with:

return { <>…


Let us build a switch component from scratch.

3D Render by Udhaya Chandran

Tools used :

  • React Native
  • React Native Reanimated
  • Figma

Design level dissection of Switch Component


Let us try to build an iOS-like Custom Search Component in React Native.

You can also find an updated npm package here for the same with the Dark mode feature.

3D Render by Udhaya Chandran

Setting up React Native Project.

(Skip to next section, if already done..)

Go ahead to this link https://reactnative.dev/docs/environment-setup#docsNav and follow the steps on creating a new react native project.

npx react-native init RNSearch

To start the application run npx react-native run-ios inside your React Native project folder. Open your project in VS Code and head to the file named App.js.And remove the code under the return statement and replace it with:

return { <> <View>…


Startup or MNC?

Large Team or Small Team ??

Think, Innovate, and Develop or Just Finish Assigned Tasks ???

Develop Skillset or Experience ????

Photo From Unsplash by @clarktibbs

Every individual who has completed his/her Under Graduate program in Computer Science and Engineering can often be found in a dilemma of whether to join an MNC or a Startup.

Here are some thoughts which you can consider in making a decision.

A startup is energetic and dynamic whereas MNC is quite relaxed comparatively.

If you are looking for a steadfast exponential growth in your career choose a startup, on the other hand, if you require…


Let us try to build a Segmented Control with React Native.

You can also find an updated npm package here for the same with Dark mode feature.

3D Render by Udhaya Chandran

Setting up React Native Project.

(Skip to next section, if already done..)

Go ahead to this link https://reactnative.dev/docs/environment-setup#docsNav and follow the steps on creating a new react native project.

npx react-native init RN-SegmentedControl 

To start the application run npx react-native run-ios inside your React Native project folder. Open your project in VS Code and head to the file named App.js.And remove the code under the return statement and replace it with:

return {
<>
<View>
</View>
<>
}

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store