Categories
React Native Developers

React Native Bridge For iOS

React Native is developed in such a way that we can create a bridge between the Native Language and the JavaScript code. A bridge is nothing but a way to set up communication between native platforms and React Native.

But why do we need it?

Let’s assume you want to reuse some existing Objective-C/ Swift code or library without having to reimplement it in JavaScript.

Yes, you guessed it right!

You can use it in your React Native application with the help of Native Bridge and at some point in time, to make a production-level application you will most probably use Native Bridge.

As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some specific cross-language mechanisms that would allow us to pass information between them.

Source: official react native docs

What we will learn in this article?

We will separate this article into two parts:

  • Native Modules
  • Native UI Components

Native Modules

A Native Module is just a set of javascript functions that are implemented natively for the individual platform. Native Modules are used when React Native doesn’t have that required module yet, or when the native performance is significantly better.

To understand this concept better, we will define some functions in Swift which will control the status of a torch (whether it is “on” or “off”) and we will call these functions from React Native.

Let’s start:

Before you start you should have Xcode and Node.js installed on your computer.

Open your terminal and follow along:

npx react-native init ReactNativeBridgeIos

cd ReactNativeBridgeIos

  • Now- Open ReactNativeBridgeIos.xcodeproj file in the iOS folder (It would automatically open your iOS code in Xcode).
  • Now- Create a Swift file torch.swift in the ReactNativeBridgeIos folder. It will also ask for creating a Bridge Header file- accept that- a file named ReactNativeBridgeIos-Bridging-Header.h will be created.
  • Now- Add the following line in the ReactNativeBridgeIos-Bridging-Header.h file
#import "React/RCTBridgeModule.h"

RCTBridgeModule will just provide an interface to register a bridge module where RCT is just an abbreviation of ReaCT.

Now- Open ‘Torch.swift’ and add the following code:


import Foundation
@objc(Torch) class Torch: NSObject {
  @objc static func requiresMainQueueSetup() -> Bool {return true}
  
  @objc static var isOn = false
  
  @objc func turnOn() {
    Torch.isOn = true
  }
  @objc func turnOff() {
    Torch.isOn = false
  }
  @objc func getTorchStatus(_ callback: RCTResponseSenderBlock) {
    callback([NSNull(), Torch.isOn])
  }
}

A Torch class is created which is inherited from NSObject.

NSObject: The root class of most Objective-C class hierarchies, from which subclasses inherit a basic interface to the runtime system and the ability to behave as Objective-C objects.”

source: developer.apple.com

A static variable “isOn” is created to set the status of the torch which will accept boolean values. Two functions “turnOn” and turnOff are created just to change the status of our torch. And a getTorchStatus function, which will accept a callback parameter to get the status of the torch which we will call from javascript.

RCTResponseSenderBlock” accepts only one argument – an array of parameters to pass to the JavaScript callback. And, NSNull() is passed as the first element which we have considered as an error in the callback.

A function requiresMainQueueSetup is made to make this code run on MainQueue. Else, it will give a warning about the same.

You may have already noticed that we have used “@objc” before the class and the functions (this is just to make the class, functions, or variables available to Objective-C).

Now- Create an Objective-C file named Torch.m by pressing cmd + N and add the following code:


#import <Foundation/Foundation.h>
#import "React/RCTBridgeModule.h"
@interface RCT_EXTERN_MODULE(Torch,NSObject)
RCT_EXTERN_METHOD(turnOn)
RCT_EXTERN_METHOD(turnOff)
RCT_EXTERN_METHOD(getTorchStatus: (RCTResponseSenderBlock)callback)
@end

To expose the functions of native to react javascript, we have to do that explicitly by using RCT_EXTERN_METHOD()

Now- To access the torch class from javascript, we have to import {NativeModules} from ‘react-native’. add the following code in the App.js file.


import React, {Component} from 'react';
import {StyleSheet, Text, View, NativeModules, Button} from 'react-native';
const {Torch} = NativeModules;
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOn: false,
    };
    this.updateTorchStatus();
  }
  turnOn = () => {
    Torch.turnOn();
    this.updateTorchStatus();
  };
  turnOff = () => {
    Torch.turnOff();
    this.updateTorchStatus();
  };
  updateTorchStatus = () => {
    Torch.getTorchStatus((error, isOn) => {
      this.setState({isOn: isOn});
    });
  };
  render() {
    return (
      <View style={styles.container}>
        <Text style={{fontSize: 24}}>
          Torch is {this.state.isOn ? 'ON' : 'OFF'}
        </Text>
        {!this.state.isOn ? (
          <Button onPress={this.turnOn} title="Switch ON " color="green" />
        ) : (
          <Button onPress={this.turnOff} title="Switch OFF " color="red" />
        )}
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#d3d3d3',},
});

In the above code, the state of the torch is set by the updateTorchStatus function which is using the Native function getTorchStatus and passing a callback to it. A button is made which on pressing toggle the status of the torch in the Native code.

Now, you can start the application by running the following command:

npx react-native run-ios

You will see something like this:

After clicking the button:

So, you can see that we have created a Native Bridge for iOS.

So this is all about Native Modules, now let’s head over to the second part of this article which is Native UI Components.

Native UI Components

There are tons of native UI widgets out there ready to be used in the latest apps. Fortunately, we can wrap up these existing components for seamless integration with our React Native application.

Without further ado, let’s head over to the practical part.

First, Let’s create a simple SwitchApp example using react-native CLI.

npx react-native init SwitchApp

cd SwitchApp

Let’s create a Switch UI component:

  • For that open SwitchApp.xcodeproj file (from iOS folder, in Xcode just like we did in the Native Module section).
  • Then, create a SwitchView.swift file from

file (from tab bar)> new > file > Cocoa Touch Class

and name that SwitchView and also accept the “Create Bridging Header” when prompted, which will create a file SwitchApp-Bridging-Header.h. This will help to communicate between Swift and Objective C code.

Now, add the following import statements in SwitchApp-Bridging-Header.h file.


#import "React/RCTBridgeModule.h"
#import "React/RCTViewManager.h"
#import "React/RCTEventEmitter.h"

RCTBridgeModule will just provide an interface to register a bridge module where RCT is just an abbreviation of ReaCT.

Now, open ‘SwitchView.swift’ and add the following code:


import UIKit
class SwitchView: UIView {
  
  @objc var isOn: Bool = false  {
    didSet {
          button.backgroundColor = isOn ? .yellow : .black
          button.setTitle(String(describing: isOn ? "I am ON" : "I am OFF"), for: .normal)
     }
  }
  override init(frame: CGRect) {
    super.init(frame: frame)
    self.addSubview(button)
  }
  required init?(coder aDecoder: NSCoder) {
    fatalError("init has not been implemented")
  }
  lazy var button: UIButton = {
      let button = UIButton.init(type: UIButton.ButtonType.system)
      button.autoresizingMask = [.flexibleWidth, .flexibleHeight]
      button.titleLabel?.font = UIFont.systemFont(ofSize: 20)
      button.addTarget(
        self,
        action: #selector(toggleSwitchStatus),
        for: .touchUpInside
      )
      return button
    }()
  @objc func toggleSwitchStatus() {
    isOn = !isOn as Bool
  }
}

In the above code: We created a Switch View which is inherited from UIView. A boolean variable “isOn” is defined for the status of the Switch whether it is on or off. Also, color, title, size, etc. are defined.

On clicking the button the “toggleSwitchStatus” method is called, which does nothing but toggle the value of “isOn” variable to true or false.

Now, create a Switch.swift file and add the following code:


import Foundation
@objc(Switch)
class Switch: RCTViewManager {
  
  override func view() -> UIView! {
    return SwitchView()
  }
  
  override static func requiresMainQueueSetup() -> Bool {
    return true
  }
}

A Switch class inherited from RCTViewManager is created.

“Native views are created and manipulated by subclasses of RCTViewManager. These subclasses are similar in function to view controllers, but are essentially singletons – only one instance of each is created by the bridge. They expose native views to the RCTUIManager, which delegates back to them to set and update the properties of the views as necessary.”

Source: official react-native docs

A function “requiresMainQueueSetup” is made to make this code run on MainQueue. Else, it will give a warning about the same.

Now- Create an Objective-C file with the name of Switch.m and add the following code:


#import "React/RCTViewManager.h"
@interface RCT_EXTERN_MODULE(Switch, RCTViewManager)
RCT_EXPORT_VIEW_PROPERTY(isOn  , BOOL)
@end

To expose the functions of native to react javascript- we have to do that explicitly by using RCT_EXTERN_MODULE(). By that, we have exposed Switch class and properties to our javascript code.

Now, to use the Switch UI button in javascript we have to import {requireNativeComponent} from ‘react-native’,

Add the following code in the App.js file


import React, {Component} from 'react';
import {StyleSheet, View, requireNativeComponent, Text} from 'react-native';
const Switch = requireNativeComponent('Switch');
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Switch style={styles.nativeBtn} isOn={false} />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'pink',
    alignItems: 'center',
    justifyContent: 'center',
  },
  nativeBtn: {
    height: 100,
    width: 300,
    backgroundColor: 'yellow',
  },
});

The requireNativeComponent function takes the name of the native view. In this case, we used the name “Switch” and now <Switch> component is ready to be used.

Now we have a button which is made in Swift and shown in the app through javascript.

Now, run the app by-

npx react-native run-ios

You will be seeing the button like this:

After clicking on it:

In this article, we have created both the Native Modules and Native UI components and use them through the react-native javascript code.
For react native bridge for android, refer this article https://codersera.com/blog/react-native-bridge-for-android/


Frequently asked questions

Categories
React Native Developers React Native Web

React Native Bridge For Android

React Native is developed in such a way that we can create a bridge between the Native Language and the JavaScript code. A bridge is nothing but a way to setup communication between native platform and React Native.

But why do we need it?

Let’s assume you want to reuse some existing Java code or library without having to reimplement it in JavaScript. Yes, you guessed it right, you can use it in your React Native application with the help of Native Bridge. At some point of time, to make a production level application you will most probably need to use Native Bridge.

“As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some specific, cross-language mechanisms that would allow us to pass information between them.”

What we will learn in this article?

We will separate this article in two parts which are:

  • Native Modules
  • Native UI Components

In this article, we are talking about android only.

Native Modules

A Native Module is just a set of javascript functions that are implemented natively for individual platform. Native Modules are used when React Native doesn’t have that required module yet, or when the native performance is significantly better.

To understand this concept better we will implement a toast mechanism in which the toast would be coming from the native android and we will call it from a button made in React Native. In case you are wondering “what a toast is?”, think of it as an alert message for your app.

Let’s start:

Before you start you should have Android Studio and Node.js installed in your computer.

Open your terminal and follow along

npx react-native init ReactNativeBridgeDemo

cd ReactNativeBridgeDemo

Where ReactNativeBridgeDemo is the folder name which will be created.

You will find a folder named ‘android’ in your project. Open that in Android Studio.

From there go to app> java > com.reactnativebridgedemo

There create two files with names ToastModule.java and MyPackage.java. You will understand in a bit that why we named that that way.

In ToastModule.java write the following code:

package com.reactnativebridgedemo;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import android.widget.Toast;

public class ToastModule extends ReactContextBaseJavaModule {
    //constructor
    public ToastModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }
    //Mandatory function getName that specifies the module name
    @Override
    public String getName() {
        return "ToastModule";
    }
    //Custom function that we are going to export to JS
    @ReactMethod
    public void showToast(String message) {
        Toast.makeText(getReactApplicationContext(), message, Toast.LENGTH_SHORT).show();
    }
}

We have created a ToastModule class which is inherited from ReactContextBaseJavaModule. ReactContextBaseJavaModule requires a function named getName whose purpose is to return the string name of the NativeModule which represents this class in the javascript.

@ReactMethod is used to expose a function in javascript as all functions are not exposed to JavaScript explicitly. These methods are of void return type.

ShowToast is the function we will be calling in react-native javascript code to create a native toast.

The next step in Java is to register the module, if a module is not registered it will not be available from JavaScript.

Now, in the MyPackage.java file, which we have created already, write the following code:

package com.reactnativebridgedemo;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.Arrays;
import java.util.Collections;
import java.util.List;
public class MyPackage implements ReactPackage  {
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
    
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Arrays.<NativeModule>asList(
                new ToastModule(reactContext)
        );
    }
}

We Override the createNativeModules function and added the ToastModule object to modules array. It needs to be added here to be available in javascript.

We are going to ignore the createViewManagers function for now as it will be covered in the UI Components part later in this article.

This MyPackage needs to be provided in the getPackages method of MainApplication.java file.

Now, open the MainApplication.java file and just add the following line in the getPackages function.

packages.add(new MyPackage());

just like, @Override

protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
  // Packages that cannot be autolinked yet can be added manually here, for example:
  // packages.add(new MyReactNativePackage());
  packages.add(new MyPackage());  //<---- ADD THIS LINE
  return packages;
}

Now, to access the showToast function we made in the ToastModule.java, we will make a button in react-native javascript which on clicking will invoke the showToast function.

This will be done by importing {NativeModule} from ‘react-native’ just like the following code in app.js.import React, {Component} from ‘react’;

import {Button, View} from 'react-native';
import {NativeModules} from 'react-native';
const {ToastModule} = NativeModules;
export default class App extends Component {
  _showToast() {
    ToastModule.showToast('This is a native toast!!');
  }
  render() {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Button onPress={this._showToast} title="Toast Btn" />
      </View>
    );
  }
}

This exposes the native ToastModule as a JS module.

On pressing the button the _showToast JS function will be invoked which will call the native showToast function in the ToastModule.js which will take a string which is nothing but the toast message.

Thats It.

Now, you can just start the application by the command:

npx react-native run-android

If it does not start the emulator for some reason, you can directly run it from the Android Studio by clicking the ‘run’ button in the toolbar.

You will be seeing the toast just like this,

The great thing is that we have created a Native Bridge for android. So, this was Native Modules, now let’s head over to the second part of this article which is Native UI Components.

Native UI Components

There are tons of native UI widgets out there ready to be used in the latest apps. Fortunately, we can wrap up these existing components for seamless integration with our React Native application. Without further ado, let’s head over to the practical part.

First, Let’s create a simple SwitchApp example using react-native CLI.

npx react-native init  SwitchApp

cd  SwitchApp

Now, Let’s create a Switch UI component. For that open this SwitchApp project in Android Studio just like we did in the Native Module section.

From there go to app> java > com.switchappand

There create three files with names Switch.java, SwitchManager.java and SwitchPackage.java. You will understand in a bit that why we named that that way.

Now, open the Switch.java file and write the following code:

package com.switchapp;
import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.widget.Button;
public class Switch extends Button {
    public Switch(Context context) {
        super(context);
        this.setTextColor(Color.BLUE);
        this.setText("This button is made in JAVA");
    }
    public Switch(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public Switch(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }
}

Here we have created a Switch java class which is inherited from a Button, and the constructor is overwritten. Button text color and text is also customized.

Now, we need a SwitchManager to expose the Switch.java class. So, write the following code in SwitchManager.java:

package com.switchapp;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
public class SwitchManager extends SimpleViewManager<Switch> {
    @Override
    public String getName() {
        return "Switch";
    }
    @Override
    protected Switch createViewInstance(ThemedReactContext reactContext) {
        return new Switch(reactContext);
    }
}

Here, we have inherited SwitchManager class from SimpleViewManager. Native views are created and manipulated by extending ViewManager or more commonly SimpleViewManager. A SimpleViewManager is convenient in this case because it applies common properties such as background color, opacity, and flexbox layout.

We always need this custom Manager which should be inherited from ViewManager or SimpleViewManager.

Every Manager class, should have the following:

  • getName() method, which returns a string name, which we will use to call in javascript.
  • createViewInstance(ThemedReactContext reactContext) method in which we create an instance and return the object.

This SwitchManager will also be used in passing props from React Component.

Now, the next step in Java is to register the module, if a module is not registered it will not be available from JavaScript. This step is very much similar to the step we did in NativeModule section.

Now, in the SwitchPackage.java file, which we have created already, write the following code:

package com.switchapp;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.modules.toast.ToastModule;
import com.facebook.react.uimanager.ViewManager;
import java.util.Arrays;
import java.util.Collections;
import java.util.List;
public class SwitchPackage implements ReactPackage  {
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Arrays.<ViewManager>asList(
                new SwitchManager()
        );
    }
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

We Override the createViewManagers function and added the SwitchManager object to modules array. It needs to be added here to be available in javascript. That’s why we ignored  createViewManagers in the Native Modules section as it is for the UI components.

This SwitchPackage needs to be provided in the getPackages method of MainApplication.java file.

Now, open the MainApplication.java file and just add the following line in the getPackages function.

packages.add(new SwitchPackage());

just like,

@Override

protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
  // Packages that cannot be autolinked yet can be added manually here, for example:
  // packages.add(new MyReactNativePackage());
  packages.add(new SwitchPackage());  //<---- ADD THIS LINE
  return packages;
}

Now to use this UI button, we have just made in Java, in react-native javascript.

This will be done by importing {requireNativeComponent} from ‘react-native’ just like the following code in app.js.

import React, {Component} from ‘react’;

import {StyleSheet, View, requireNativeComponent} from 'react-native';
const Switch = requireNativeComponent('Switch');
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Switch style={styles.javaBtn} />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'pink',
    alignItems: 'center',
    justifyContent: 'center',
  },
  javaBtn: {
    height: 100,
    width: 300,
    backgroundColor: 'yellow',
  },
});

The requireNativeComponent function takes the name of the native view. In this case, we used the name “Switch” and now <Switch> component is ready to be used. Now we have a button which is made in Java and shown in the app through javascript.

You will be seeing the button just like this,

We have successfully rendered a UI button <Switch> which we made in Java.

Now, we will enhance this component to accept props from the javascript code, which we are going to use the change the color of the button deciding whether the switch is ON or OFF.

First, let’s pass a prop name isTurnedOn in the <Switch> component like:

<Switch style={styles.javaBtn} isTurnedOn={true} />

isTurnedOn will take boolean values which when true, the color of the button will be yellow and when false then the color  would be grey.

Now, open SwitchManager.java and add the following method in the SwitchManager class.

@ReactProp(name="isTurnedOn")
public void setSwitchStatus(Switch switchView, Boolean isTurnedOn) {
    switchView.setIsTurnedOn(isTurnedOn);
}

Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with @ReactProp (or @ReactPropGroup). Setter method should take view to be updated (of the current view type) as a first argument and property value as a second argument. In the above example, we are calling the setIsTurnedOn method with a boolean value as argument which we got as prop from the react-native javascript code. We will define this method in Switch.java.

Now open Switch.java and update the following code:

package com.switchapp;
import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.View;
import android.widget.Button;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.uimanager.events.RCTEventEmitter;
public class Switch extends Button {

    public Boolean isTurnedOn = false;

    public void setIsTurnedOn (Boolean switchStatus){
        isTurnedOn = switchStatus;
        changeColor();
    }
    public Switch(Context context) {
        super(context);
        this.setTextColor(Color.BLUE);
        this.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                isTurnedOn = !isTurnedOn;
                changeColor();
            }
        });
        changeColor();
    }
    
    private void changeColor() {
        if (isTurnedOn) {
            setBackgroundColor(Color.YELLOW);
            setText("I am ON");
        } else {
            setBackgroundColor(Color.GRAY);
            setText("I am OFF");
        }
    }
    
    public Switch(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public Switch(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }
}

Here we defined the setIsTurnedOn method and called the function changecolor to change the color and text of the switch button according to the prop which we provided in javascript. An onClickListener is also set up for changing the color and text of the button on clicking event.

That’s it!!

Now, try to run the app in the android emulator. You’ll see something like this:

And after clicking on the button:

You can try to change the value of the isTurnedOn prop in the javascript code and see the results for yourself.

In this article, we have created both the Native Modules and Native UI components and used them through the react-native javascript code.

Categories
React Developers React Native Developers React Native Web ReactJS

Running react-native-web using expo in 2020

Since expo sdk version 33, expo supports react-native-web.

In this blog, we’ll see how to set up your react-native-web project using expo.

Installing expo


// install expo-cli
npm i -g expo-cli

// create expo project
expo init

Install expo-cli if you don’t have it installed already, you can use nvm and yarn as well instead of npm.

After running expo init you’ll be presented with a few options to choose the starter kit from.

You can choose any one of those, but for this blog, we’ll use the first one, which is the blank project in javascript. Now, it will prompt you to enter the project name and the slug. Slug is the URL part that’s needed when you try to publish the app on the expo server.

cd into the project directory and run the expo start --web

If you want to quickly jump and see the code, check this GitHub repo [master branch]


cd rn-web
expo start --web

It should launch the webapp in your browser.

expo with react native web

Let’s make some changes in the App.js file and check if hot reloading works.


// App.js
export default function App() {
  return (
    <View style={styles.outer}>
      <Header/>
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app! let me do some change</Text>
      </View>
    </View>
  );
}

You should see the browser reflecting the changes automatically. If you’d like to see my hussle with react-native-web setup check this video.

Adding components to react-native-web

Let’s add a few components to our app now.
Create a Header.js file in components folder


// components/Header.js

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

const {width, height} = Dimensions.get('window');

function Header () {
        return (
            <View  style={styles.header}>
                <Text>I'm header</Text>
            </View>)
}
const styles = StyleSheet.create({
        header: {
               height: height/10,
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: 'red',
        },
});
export default Header;

And include Header.js in your App.js file.


// App.js

import React from 'react';
import {Dimensions, StyleSheet, Text, View} from 'react-native';
import Header from './components/Header';
const {width, height} = Dimensions.get('window');

export default function App() {
  return (
    <View style={styles.outer}>
      <Header/>
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app! let me do some change</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({

  outer: {
    flex: 1,

  },
  container: {
    height: height*9/10,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

react-native-web

On the terminal, press i and it will launch the ios simulator or press a and it will launch android emulator, and you should see the app running in the mobile device as well.

react-native-web-expo

If you want to avoid using terminals, Expo also provides you with the browser UI interface which looks like this.

expo in browser

This is the beauty of react-native and react-native-web, you need to write the code once and can run it on multiple platforms. Like react-native-web there are other packages like react-native-windows which lets you run react native apps on the windows phone and PC.

Similarly, react-native-macos let’s your run the app on mac os.

In the next blog, we’ll integrate the navigation library into react-native-web as navigation is an important part of any frontend framework.

Categories
React Developers React Native Developers React Native Web

How to do navigation in React native web in 2020

“React Native for Web” makes it possible to run React Native components and APIs on the web using React DOM.

It is as simple as that!!
So, if you have an app and you want to build a web version of it, or if you are planning to build a website along with an app, you should definitely learn React native web.

Setting up navigation in reactnativeweb is challenging as the navigation system works quite differently in apps vs browser.

In this article, we’ll set up the most popular react-navigation on to react-native-web.

Using React navigation in react native web

React navigation is the most famous library for navigation in reactnative. In this section, we’ll try to integrate react-navigation in reactnativeweb.

Prerequisite

For this setup, we’ll be using expo as the platform on which we’ll be building our reactnative app, which will run on android, ios, and the web.
Make sure you have expo-cli installed already.

To set up your codebase using expo, check this GitHub link [master branch]. Simply clone the branch and do run expo start

If you are looking for a quick code, then you can check this GitHub link [NOTE: the branch is reactnavigationsetup and not master.]

Installation

Run the following command to install reactnavigation along with other needed packages including reactnavigationstack.


expo install react-navigation react-native-gesture-handler react-native-reanimated react-native-screens


npm i react-navigation-stack
npm i @react-navigation/web

Check your package.json files to ensure all of the above packages are installed, make sure reactnavigation is version 4+. If you are wondering, why did we use expo instead of NPM/yarn while installing reactnavigation, then the reason is that expo would look for the correct version of the reactnavigation libraries that’d work with the expo version that’s installed in your project.

If you look into the printed console it uses NPM underneath.

Create a few screens

Now, let’s set up a few screens to test our navigation flow:

  • Profile screen
  • Post screen

// feed screen

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

export default class Feed extends React.Component {

    render() {
        return <View style={styles.container}>
            <Text>This is the feed screen</Text>
           <Button
                    title="Go to Profile"
                    onPress={() => this.props.navigation.navigate('Profile')}
            />


        </View>
    }
}

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

The above is the code for FeedScreen, which is a simple text, and a button. The button when clicked should go directly to the profile screen.


// Profile screen

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

export default class Profile extends React.Component {

    render() {
        return <View style={styles.container}>
            <Text>This is the profile screen</Text>
            <Button
                title="Go to Feed"
                onPress={() => this.props.navigation.navigate('Feed')}
            />

        </View>
    }
}

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

The Profile screen is the same as the Feed screen. Both the screens have a button which takes to the other screen.


Let’s also create stack navigation to connect these two screens together:

// Home.js, just a name of the stack navigation

import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer} from 'react-navigation';

import Feed from "../screens/Feed";
import Profile from "../screens/Profile";


const Home = createStackNavigator(
    {
        Profile: Profile,
        Feed: Feed,
    },
    {
        navigationOptions: {
            headerTintColor: '#fff',
            headerStyle: {
                backgroundColor: '#000',
            },
        },
    }
);

const container = createAppContainer(Home);

export default container;

Since the object that’s passed to CreateStackNavigator Profile comes first, the Profile screen is the default screen of this stack navigator.

Now, in the App.js file, simply render the Home Navigation.


// App.js

export default function App() {
  return (
    <View style={styles.outer}>
      <Home/>
    </View>
  );
}

Just run the app using command expo start , and it should launch the expo bundler for you.

If you press i to launch the Expo app in the IOS simulator in the terminal, the following screen comes up on display, if everything goes well.

When you click on the Go to Feed button, it should take you to the feed screen.

To run the same setup on to the web, simply press w in your terminal, it will launch the web app in your default browser.

The click functionality also works on the web as well. The top border is for the screen title, you can add it by adding navigationOptions to the feed and profile screen like this.


export default class Feed extends React.Component {
    static navigationOptions = {
        title: "Feed"
    }
...

But there is one problem with the web navigation, the URL doesn’t change when you go from the profile to the feed screen.
In the web navigation, it is extremely important to have the change in page reflecting in the URL as well.

In the app, there is no way a user can directly jump to a screen other than the default screen, but in the browser it is possible, a user can enter a URL.

The good part of reactnavigation is that it supports URL updates when the screen changes. The way navigationOptions is added inside the screen class similarly you can also add title.


export default class Feed extends React.Component {
    static navigationOptions = {
        title: "Feed"
    }

    static path = "feed";

    render() {
...

For the profile screen, you can keep the path as empty static path = "".


When you go to http://localhost:19006/feed, the web app would understand that you want to go to the feed screen and will render that for you. Try going to http://localhost:19006/feed directly, and it should render the feed page for you.

But when you click on the Go to Feed button, the URL won’t change.

There are a few other things that we need to do to make this work:
@react-navigation/web also provide Link module which gets converted into a tag on to the web.

And, this module doesn’t work when you try to run the app. So, we use Platform module provided by reactnative to differentiate between web and app.


// feed screen

import React from 'react';
import {View, Text, StyleSheet, Button, Platform} from 'react-native';
import {Link} from "@react-navigation/web";

const isWeb = Platform.OS === 'web';


export default class Feed extends React.Component {
    static navigationOptions = {
        title: "Feed"
    }

    static path = "feed";

    render() {
        return <View style={styles.container}>
            <Text>This is the feed screen</Text>
            {
                !isWeb ? <Button
                    title="Go to Profile"
                    onPress={() => this.props.navigation.navigate('Profile')}
            />:  <Link routeName="Profile">Go Profile</Link>

            }


        </View>
    }
}

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

Here, we are conditionally rendering the Link and the Button.

You need to do similar changes for the Profile screen as well. Also, in the navigation container, instead of createAppContainer you need to use createBrowserApp for the web.

Here is the code for the navigation:


// Home.js, just a name of the stack navigation

import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer} from 'react-navigation';
import {createBrowserApp} from '@react-navigation/web';

import Feed from "../screens/Feed";
import Profile from "../screens/Profile";
import {Platform} from "react-native";

const isWeb = Platform.OS === 'web';


const Home = createStackNavigator(
    {
        Profile: Profile,
        Feed: Feed,
    },
    {
        navigationOptions: {
            headerTintColor: '#fff',
            headerStyle: {
                backgroundColor: '#000',
            },
        },
    }
);

const container = isWeb ? createBrowserApp(Home): createAppContainer(Home);

export default container;

Try running the app in the browser, Go to feed button click should change the URL to http://localhost:19006/feed.

Also, the app should be running fine on the simulators as well.

In the following videos, I have done the walkthrough of the reactnavigation setup on react native web.

Categories
React Developers React Native Developers

12 Places To Hire Top React Developers In 2020

When building/ growing a new company or managing an established business, one aspect that affects the overall success of an organization is to learn to hire an efficient workforce that fits the bill perfectly for the company’s growth.

It becomes even more crucial to select great people when you are hiring for a new business. Hiring top react developers has become even more difficult in the last few years because of its growing popularity and usability amongst companies of all sizes.

Hire top react developers

React developer’s salary trends are also showing a stable rise and currently, an average React.Js Developer salary in the USA is $125,000 per year or $64.10 per hour. Entry-level positions start at $68,250 per year while most experienced workers make up to $183,500 per year.

This new Javascript development framework eases the data management and content maintenance of the websites. As new reports suggest ‘React.js‘ is powering more than 45% of internet websites which is a fairly bigger market proportion to capture, considering it is a fairly new technology.

Since every new business-like ‘Paypal‘ or stalwarts like ‘BBC‘ or ‘Newyork Times‘ and many others are using React.js to build their mobile applications etc., the demand to hire top react developers is on an all-time high. Also, it makes sense to work on React technology because of the super successful advantages it lends to the react developers.

React technology
Hiring top react developers with great skills is getting difficult day by day

An additional advantage of working with talented best developers is that a lot of your stress and hassles are efficiently taken care of by hard-working team members, who take the ownership to deliver the end product and deliver it at the right time. This creates a pleasurable, smooth working experience for both the employee and the employers.

Let’s see some of the best places to hire top react developers for your next project, which will help you build a top-notch, great performing team and business and simplify your search for talented react developers. The list is prepared on many crucial factors like customer satisfaction, employer satisfaction, third-party websites, company portfolio, keyword analysis tool, and much more useful considerations.

LinkedIn

This American business and employment-oriented service is the wholly-owned subsidiary of Microsoft and has 630 million registered members in 200 countries. It is mainly used for professional networking, where employers post jobs and job seekers post their CVs.

LinkedInfor react developer
LinkedIn offers many opportunities to hire top react developers

Angelist

This platform is on a mission to democratize the investment process and to help startups with their challenges in fundraising and talent.  It is primarily a US based site for job-seekers, startups, and angel investors. Angelist is providing 2 million plus tech and start-up job opportunities and making high-quality candidates accessible to employers. They have 2,300,000+ candidates including 750,000+ developers, 170,000+ designers, and thousands more every day.

Angelist to hire react developer
Top global website for job-seekers, start-ups and angel investors

Codersera

If you are looking for the best React experts for your projects then go Codersera, it is a wonderful platform to hire top react developers. Codersera is a fresh start-up and has earned a quick reputation for its stringent work ethics with structured and matured work policies.

Hire top react developer
A wonderful platform to hire superior quality React developers for projects of any size

Overall it is a great platform, quite superior from other such platforms in terms of professionalism, technical knowledge, work ethics, passion and dedication for their taken projects. Codersera is suitable for projects of any size as they have developers of many skill levels. Their 24/7 dedicated team of highly skilled technocrats, hired through a 5-tier rigorous screening procedure assures a quality product delivery.

Arc.dev

Previously known as CodementorX, arc.dev is a community of over 2k expert React freelancers across the globe. It is a sisterly branch of learning platform Codementor.

They allot one project manager specifically for your project and a shortlist of candidates, which one is free to interview for trial runs. After that you get to directly work with the chosen developer and be asured to get a quality product delivered absolutely on time.

When you have an urgent requirement for a developer, it definitely is the best place to visit. And there are no extra fees except for the payment you make for the hiring of your project.

React developer
Great platform to hire top react freelancers

Toptal

Toptal helps you in finding a perfect freelancer for your project and that too at an economical price and they guarantee a highquality product delivered by refined expertise.

Toptal also has a rigorous screening process to hire their developers which only 3% of applicants clear through which means that a great quality work will be done. It simplifies many things, making it easier to hire top react developers and get started.

Hire react developer
Toptal is renowned for providing high-end quality product delivered at economical prices

X-Team

X-Team provides high-performing, great team of React developers and is catering to many successful projects through their great teamwork and passion for development.

Hire react developer
X-Team specialises in React.js development

The XTeam gives out an open call to freelancers, inviting the talented and brightest minds to be a part of X-Team. One of their main specialties is React.js and many of their React experts have worked with Twitter, Fox, and riot games.

Workopolis

Workopolis is a leading Canadian career website providing job services to millions for over 15 years now. Workopolis is committed to making best talent pool reach their target employers without any hassles.

Hire react native developer
Workopolis is committed to providing best talent pool

Dice

Dice connects people to companies. Dice is a high-end recruiting platform that’s perfect for large projects requiring only the best. Hiring from Dice is slightly expensive, but its all worth for the extra features one gets to enjoy. Social recruiting, email advertising, access to resumes, includes applicant screening, so one doesn’t has to bother about all these.

React developers salary
Dice connects workforce to companies

Monster

Monster.com is a global gigantic employment website providing jobs to millions every day and if someone looking to hire react developers for their projects, this job search engine is a must visit.

Hire top react developer

Monster.com is a must visit search engine to hire top react developers

StackOverflow

Stack Overflow is a great place to find talented React developers of all skill levels. Stack Overflow is one of the most reliable job boards on the net, where employers can hire locally or remotely.

Hire react developer
Stackoverflow is considered a great place to hire top react developers of all skill levels

Valuecoder

Valuecoders are renowned for providing high-end quality software development services to build web and mobile applications. They outsource dedicated software development teams for various project needs of your businesses.

Hire top react developer
Valuecoders outsource dedicated software development teams for various projects


With over 4k projects under their belt, they have extensive experience of delivering successful projects.

Glassdoor

Glassdoor is a website where current and former employees anonymously review companies. Glassdoor allows users to search and apply for jobs as well as anonymously submit and view salaries on its platform. The company was acquired by the Japanese firm, Recruit Holdings in 2018 and is headquartered in California, with additional offices in cities around the world.

Glassdoor is used to apply for jobs as well as review companies


SUMMARY

React is a relatively new javascript library, used for building beautiful user interfaces and is designed for front-end development of single page and mobile applications. React is rapidly overtaking other front-end development frameworks like Angular etc. and it is getting very difficult to find talented people who know the technology very well. Hopefully, you find this list a great relief in simplifying your search to get connected to the best React developers for your business needs. The list has emphasized on providing a detailed data about hiring top React freelance developers as well as full-time employees for your React technology projects.

Categories
React Developers React Native Developers

Is Expo Eject a Good Idea?

What is Expo?

Expo is a framework/ platform for React applications providing a set of tools built around React Native and native platforms. It helps developers build, deploy, develop and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase.

React native with expo

Use case of expo eject

Are you planning to eject expo from your react-native app? If yes, I hope the following are the use cases that you’d have.

    1- You want to add an “NPM” package to your project which requires a reactnative link. And as a rule of thumb, if the documentation for a third-party package states that you need to run the command react-native link as part of the setup process, then this package can’t be used with expo.


    2- You are more of a native (Java/Kotlin/Swift/Objective C) person, and want to integrate native module into your Reactnative app but couldn’t find a way to do it in the expo, so want to get rid of it?


    3- You want to add an awesome push notification library like OneSignal in your app which expo doesn’t support.

Are there some other reasons? If yes, write in the comment box below, and I’ll personally look and reply.


Before ejecting Expo, let’s have a look at the drawbacks that you’d face:


Once you eject expo, you can’t inject it back. So, all the great development experience that you had with expo is gone now. Typically to develop a feature in non-expo takes almost 3x the time as compared to expo.

If the developer chooses to eject from Expo, these great development features of the Expo are lost and it takes almost 3x the time as compared to the expo to develop those features in the non-expo state.

Some Advantages Of Using Expo


Expo is kind of an extension to ReactNative that offers a bunch of components and libraries already included to facilitate the development of mobile apps with React Native. Let’s see a few of them:

  • Fast and simple project installation.
  • Opens a convenient utility Expo CLI in a browser and facilitates ‘app status’ checking on the device it runs on, scan QR code, send the link via email to open the app in Expo Client, or switch the production/ development mode and publish your app on expo server.
  • Develop from Windows/macOS or whatever you just only need Nodejs and an internet connection.
  • Library linking with reactnative links not necessary as everything is covered by the expo.
  • Expo client is an app that is easily installed from the Google Play Store or Apple Store on your phone. It allows the opening of projects without build via XCode or Android Studio during the development process. With Expo Client, the apps can be sent to others for review which is greatly required when testing without any need of creating APK or IPA files.
  • The app can be updated over the air without repeated deployment on Google Play Store or Apple Store. When users open the app, it will automatically update the app by pulling the recent js bundle published on the expo server.
  • Automatic management of certificates and app signatures.
  •  Easy to use and gives the intermediate results fast.
  •  Test directly on the device for both iOS and Android.
  •  One can develop apps for ios without macOS with ios device and test them with Expo client
  • Expo SDK offers the collection of ready solutions, such as working with the device accelerometer, camera, notifications, geolocation, etc.

The expo team regularly updates the SDK with new solutions which is very useful for the user.


Let’s look into each use case of “expo eject” one by one:

1. Want to add an “NPM” package that requires linking: The thing that you should ask yourselves is, are there some other packages which don’t require linking and still solves the purpose? Most of the time, you’d find that such a solution already exists. The Expo community has already included many useful packages in the build and the users are just not aware of it. Be it SVGs, animation, or video, most of the packages are already in the expo. If you couldn’t find the replacement package in expo, then there is no way apart from expo eject.

2. You want to add your written custom native module: When writing your reactnative bridge and of which the ‘NPM’ package doesn’t exist yet, for such a scenario the Expo eject is the only way and it has to be done.

3. Third-party notification library like OneSignal: Before integrating any awesome push notification service, you’d first explore the push notification service of expo. Although, Expo’s push notification service isn’t great but it solves the purpose in most of the cases. If you don’t like it, and still want to integrate OneSignal or other notification services, then expo eject is the way out.

So far we have seen that in some of the cases, expo eject has to be done. And expo itself says that here

But wait, what if I tell you that there is a way in which you can add custom native modules in expo without ejecting it.
Well, my above statement is not totally true. You have to eject it, but you won’t lose any of the benefits that you were getting with expo. You can still use the modules provided by expo, you can still have the same development flow, you don’t need to re-build native modules over and over again, you don’t need to worry about pod files, swift, kotlin etc.

Won’t that be great? In the following blog, I have described in detail how you can run expo along with custom native modules, or simply do react-native link with expo


Categories
Development Frontend Developers React Developers React Native Developers React Native Web ReactJS Top Coder

How To Make React VR Apps

VR web apps can be built with the React VR apps. WebVR is an experimental API enabling the creation and viewing of VR experiences in your browser. This new technology enables you to grant access to virtual reality regardless of the devices at hand.

The only thing you need to make a React VR app is a headset and a compatible browser. If you are just viewing a web VR application then you don’t need even for a headset. React VR is a great framework to build VR websites or apps on JavaScript. It utilizes the same design as React Native and lets you make virtual reality tours and under interfaces with the provided components.

Complete Example

is a headset and a compatible browser. If you are just viewing a web VR application then you don’t need even for a headset. React VR is a great framework to build VR websites or apps on JavaScript. It utilizes the same design as React Native and lets you make virtual reality tours and under interfaces with the provided components.

Technical Requirements


Before getting started with React VR, You required a proper setup for the dependencies that will be used to build and manage a React VR app. These are Node.js and the React VR CLI.

You need to install Node.js, ensure that the latest version is used. If not, do the following:

  • MacOS: Install Node.js using Homebrew
  • Windows: Install it from the nodejs.org
  • Linux: Use sudo apt-get install nodejs command

Then you have to install the React VR CLI using npm:

npm install -g react-vr-cli.

Getting Started


Navigate to the directory where you wish to create a new project and run the react-vr init MyFirstReactVR command.

Change the directory name to something like MyFirstReactVR and run npm start .

Click and try to drag your cursor around. Also, in browsers that support WebVR, you’ll be able to explore this VR environment with a headset in full virtual reality mode.

VR Tour Sample Using React VR


Now let’s make a VR tour with a few scenes and navigations in them. First of all, you need to prepare the architecture. In this example, we will make buttons within each scene for navigations and declare this in the constructor of a React component named index.js.vr:

constructor(props) {
    super(props);
    scenes: [{
        scene_image: 'initial.jpg',
        step: 1,
        navigations: [{
            step: 2,
            translate: [0.73, -0.15, 0.66],
            rotation: [0, 36, 0]
        }]
    }, {
        scene_image: 'step1.jpg',
        step: 2,
        navigations: [{
            step: 3,
            translate: [-0.43, -0.01, 0.9],
            rotation: [0, 140, 0]
        }]
    }, {
        scene_image: 'step2.jpg',
        step: 3,
        navigations: [{
            step: 4,
            translate: [-0.4, 0.05, -0.9],
            rotation: [0, 0, 0]
        }]
    }, {
        scene_image: 'step3.jpg',
        step: 4,
        navigations: [{
            step: 5,
            translate: [-0.55, -0.03, -0.8],
            rotation: [0, 32, 0]
        }]
    }, {
        scene_image: 'step4.jpg',
        step: 5,
        navigations: [{
            step: 1,
            translate: [0.2, -0.03, -1],
            rotation: [0, 20, 0]
        }]
    }]
}

Also, declare current_scene in the state in the constructor:

constructor(props) {
        this.state = {
            ...
            current_scene: {}
                ...
        }

For rendering, change the render() method, as seen below:

render() {
    return ( < View >
        < Pano source = {
            asset(this.state.current_scene['scene_image'])
        }
        style = {
            {
                transform: [{
                    translate: [0, 0, 0]
                }]
            }
        }
        /> {
            this.state.current_scene['navigations'].map(function(item, i) {
                return <Mesh key = {
                    i
                }
                style = {
                        {
                            layoutOrigin: [0.5, 0.5],
                            transform: [{
                                translate: item['translate']
                            }, {
                                rotateX: item['rotation'][0]
                            }, {
                                rotateY: item['rotation'][1]
                            }, {
                                rotateZ: item['rotation'][2]
                            }]
                        }
                    } >
                    < VrButton
                style = {
                        {
                            width: 0.15,
                            height: 0.15,
                            borderRadius: 50,
                            backgroundColor: 'blue'
                        }
                    } >
                    < /VrButton> < /Mesh>
            })
        } < /View>
    )
}

The last step to make this work is to set the current_scene state to the first element of the scenes array componentWillMount function:

componentWillMount() {
    this.setState({
        current_scene: this.state.scenes[0]
    });
}

The result should be like this on screen:

Now add a simple animation for the button and implement the logic to navigate between scenes. First of all, for navigation, you need to subscribe to the onInput event for our Mesh element, bind this function to this in constructor, and implement it:

...
constructor(props) {
    ...
    this.onNavigationClick = this.onNavigationClick.bind(this);
    ...
}
...
onNavigationClick(item, e) {
        if (e.nativeEvent.inputEvent.eventType === "mousedown" && e.nativeEvent.inputEvent.button === 0) {
            var new_scene = this.state.scenes.find(i => i['step'] === item.step);
            this.setState({
                current_scene: new_scene
            });
        }
    }
    ...
render() {
    var that = this;
    ... < Mesh key = {
            i
        }
        ...
    onInput = {
            e => that.onNavigationClick(item, e)
        }
        .... >
        ...
}

Then added a simple animation try it out. For this, you have added one more button inside the existing one in the render method and changed the size of it. Use native JS requestAnimationFrame function:

const DEFAULT_ANIMATION_BUTTON_RADIUS = 50;
const DEFAULT_ANIMATION_BUTTON_SIZE = 0.05;
constructor(props) {
        ...
        this.state = {
                ...
                animationWidth: DEFAULT_ANIMATION_BUTTON_SIZE,
                    animationRadius: DEFAULT_ANIMATION_BUTTON_RADIUS
                    ...
            }
            ...
        this.animatePointer = this.animatePointer.bind(this);
    }
    ...
componentWillUnmount() {
    if (this.frameHandle) {
        cancelAnimationFrame(this.frameHandle);
        this.frameHandle = null;
    }
}
componentDidMount() {
    this.animatePointer();
}
animatePointer() {
        var delta = this.state.animationWidth + 0.002;
        var radius = this.state.animationRadius + 10;
        if (delta >= 0.13) {
            delta = DEFAULT_ANIMATION_BUTTON_SIZE;
            radius = DEFAULT_ANIMATION_BUTTON_RADIUS;
        }
        this.setState({
            animationWidth: delta,
            animationRadius: radius
        })
        this.frameHandle = requestAnimationFrame(this.animatePointer);
    }
    ...
render() {
    ... < VrButton
    style = {
            {
                width: 0.15,
                height: 0.15,
                borderRadius: 50,
                justifyContent: 'center',
                alignItems: 'center',
                borderStyle: 'solid',
                borderColor: '#FFFFFF80',
                borderWidth: 0.01
            }
        } >
        < VrButton
    style = {
            {
                width: that.state.animationWidth,
                height: that.state.animationWidth,
                borderRadius: that.state.animationRadius,
                backgroundColor: '#FFFFFFD9'
            }
        } >
        < /VrButton> < /VrButton>
        ...
}

Now let’s implement manipulations with the animated button and its rotation. It will rotate the button on an X-Y-Z axis. To do so, you need to subscribe to the onInput event for the Pano component and change the rotation via arrow-up, arrow-right, and arrow-down buttons.

The last thing is to implement messaging of the VR thread and Main thread to exchange data. Below is the subscription code on receiving messages and posting a message when a scene changes or an image starts/ends loading.

componentWillMount() {
      window.addEventListener('message', this.onMainWindowMessage);
      ...
  }
  onMainWindowMessage(e) {
      switch (e.data.type) {
          case 'newCoordinates':
              var scene_navigation = this.state.current_scene.navigations[0];
              this.state.current_scene.navigations[0]['translate'] = [e.data.coordinates.x, e.data.coordinates.y, e.data.coordinates.z]
              this.forceUpdate();
              break;
          default:
              return;
      }
  }
  onNavigationClick(item, e) {
      ...
      postMessage({
          type: "sceneChanged"
      })
      this.state.animationWidth = DEFAULT_ANIMATION_BUTTON_SIZE;
      this.state.animationRadius = DEFAULT_ANIMATION_BUTTON_RADIUS;
      this.animatePointer();
      ...
  }
  sceneOnLoad() {
      postMessage({
          type: "sceneLoadStart"
      })
  }
  sceneOnLoadEnd() {
      postMessage({
          type: "sceneLoadEnd"
      })
  }
  render() {
      ... < Pano...
      onLoad = {
          this.sceneOnLoad
      }
      onLoadEnd = {
              this.sceneOnLoadEnd
          }
          ... / >
  }

In client.js, implement a zoom with the mouse wheel and a position change with a double-click. you need to store the VR instance and VRcamera instance to implement the logic above.

function init(bundle, parent, options) {
    const vr = new VRInstance(bundle, 'TMExample', parent, {
        // Add custom options here
        ...options,
    });
    vr.render = function() {
        // Any custom behavior you want to perform on each frame goes here
    };
    // Begin the animation loop
    vr.start();
    window.playerCamera = vr.player._camera;
    window.vr = vr;
    return vr;

Then subscribe to ondblclick and onmousewheel and implement the zoom and change position logic.

function onRendererDoubleClick() {
      var x = 2 * (event.x / window.innerWidth) - 1;
      var y = 1 - 2 * (event.y / window.innerHeight);
      var coordinates = get3DPoint(window.playerCamera, x, y);
      vr.rootView.context.worker.postMessage({
          type: "newCoordinates",
          coordinates: coordinates
      });
  }
  function onRendererMouseWheel() {
      if (event.deltaY > 0) {
          if (window.playerCamera.zoom > 1) {
              window.playerCamera.zoom -= 0.1;
              window.playerCamera.updateProjectionMatrix();
          }
      } else {
          if (window.playerCamera.zoom < 3) {
              window.playerCamera.zoom += 0.1;
              window.playerCamera.updateProjectionMatrix();
          }
      }
  }

get3DPoint is your custom function to transform screen coordinates to world coordinates using Three.js, implemented in cameraHelper.js.

import * as THREE from 'three';
export function get3DPoint(camera, x, y) {
    var mousePosition = new THREE.Vector3(x, y, 0.5);
    mousePosition.unproject(camera);
    var dir = mousePosition.sub(camera.position).normalize();
    return dir;
}

Sometimes, loading scene images takes time. thus, you have implemented the loader to show this process. In index.html, add a loader and CSS based on this w3cschool example.

<style>
    body { margin: 0; }
    #loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    }
    @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
    }
    @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }
    .animate-bottom {
    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 1s;
    animation-name: animatebottom;
    animation-duration: 1s
    }
    @-webkit-keyframes animatebottom {
    from { bottom:-100px; opacity:0 }
    to { bottom:0px; opacity:1 }
    }
    @keyframes animatebottom {
    from{ bottom:-100px; opacity:0 }
    to{ bottom:0; opacity:1 }
    }
    #myDiv {
    display: none;
    text-align: center;
    }
</style>
<body>
    <div id='content' style="width:100%; height:100%">
        <div id="loader"></div>
    </div>
    <script src="./client.bundle?platform=vr"></script>
    <script>
        ReactVR.init('../index.vr.bundle?platform=vr&dev=true', document.getElementById('content'));
    </script>
</body>

And don’t forget message in client.js from the VR thread to enable/disable animation:

function init(bundle, parent, options) {
    ...
    vr.rootView.context.worker.addEventListener('message', onVRMessage);
    ...
  }
  function onVRMessage(e) {
    switch (e.data.type) {
      case 'sceneChanged':
      if (window.playerCamera.zoom != 1) {
        window.playerCamera.zoom = 1;
        window.playerCamera.updateProjectionMatrix();
      }
      break;
      case 'sceneLoadStart':
        document.getElementById('loader').style.display = 'block';
      break;
      case 'sceneLoadEnd':
        document.getElementById('loader').style.display = 'none';
      break;
      default:
      return;
    }
  }

Check your index.html or client.js.

Get The Complete Github Code Here

Categories
Business Development Frontend Developers React Native Developers Resume Startup Top Coder

Challenges Software Developers Face Today.


The Creative Minds behind the computer programmes are software developers. They develop complex softwares to perform the specific task in devices.

But it’s not that easy to develop software for any software developer, especially for beginners. Initially, they might face a lot of challenges while developing any software.

Software development is a dynamic industry today and building a high-quality product is the goal of every organization which creates challenges on every step for software developers. Thus they are struggling to be on top of new technologies for their profession.

Technical Challenge


Technical challenges are what you face normally while associating the core coding of software development. Some major challenges are:-

Not Understanding The Project:


Users may have their own opinion to build software but it creates difficulties for a developer as they barely get to interact with them directly.
The same problem occurs when you work on the unestablished project because every development project required a test and pre-production. Sometimes you get some complex project and it’s hard to cope up and work on each and every part of the project, single-handedly. In some cases, you might have to work on code written by another developer. This situation can cause problems for new developers.

Planning a project:


Planning a code is one of the important parts of software development. For building a good product you need proper planning. Because sometimes you might not get expected output after executing the code.

If you are a beginner so here are some tips to avoid such scenarios-

  • Always start with putting your ideas on paper rather than carrying them around in your head. It will help you to focus on what you are about to code.
  • Once you figure out the idea, start addressing the problems which your product will resolve.
  • As you get the problems, now think about the solutions for those problems.

Debugging:


When a software failed to execute properly. A developer debugs the software to identify and analyze the bug to resolve. It is considered as the most complex part because errors need to be resolved at all stages of debugging.

Usually, New programmers found these bugs ( App is crashing or some button is not working or not clickable ) from QA.
But some bugs are not easy to debug. This can lead to lost development time and endless frustration for new developers.

But bugs are common in programming, even best-written code can have them and they can be fixed.

Reproducing is a great idea to understand the errors and it will give you a good idea on how to resolve them. The tester who found the issue can help you to reproduce it.

Integration:


There are a lot of different technologies, systems and application which are integrated to third party application. But biggest problem in Integration is remained hidden during the development process. As a result, it leads to extra cost, delays, lower quality and sometimes even failure of the project.

Software developers should keep remembering these keys to perform software solution for the system-

  • Proper understanding of user requirement
  • Discover and research new technologies, design and develop a new solution and test them to ensure integration
  • Give more time research, development testing, and prototyping.

Security Challenges:


Data is one of the crucial and valuable element of any organization. Some people might try to steel it. Security breaches are very high nowadays and almost every applications contain some kind of vulnerability.
Every client wants to keep their data safe from these threats and that is biggest responsibility of every developer.

* Few key points you should know:

  • Look beyond technology to improve the security of your software.
  • Perform all the essential core activities to produce a secure application.
  • Always use the latest version of programming language to develop software.

Operational Challenges


Operational challenges are less known in software development but they are more difficult to handle. These operational challenges also hit your technical challenges.

Being Collaborative:


Poor communication is a very common problem among new developers. Imagine you stuck somewhere while doing coding and you are unable to explain that issue with your team that could affect project cost, time and productivity.

This problem became more challenging when you have to work with different teams altogether. Despite having a sharp deadline you have to deliver a project in time while fixing the issues and bugs that occur during the testing period at a given time.

Keep Learning New Technologies:

learning new technology


This challenge is about learning new programming languages, the frameworks, the systems and algorithms. As technology update and expands, developers need to keep themselves updated with them because framework, tools, libraries became outdated with time.
Updates version are better than the previous ones and come with new features that make your job easier. Developers need to quickly adapt to them but new developers struggle a bit more because of less time.


Practising new codes will make you better in creating codes and can develop more innovative products.

Dealing with Mangement :

The software development industry is popular for its highest rate of projects failure. Most of them are over-budgeted, over timed and get low customer satisfaction due to poor managing staff.
Developers have to give an explanation to management staff if any projects failed or overbudgeted and anything else.

Requirements volatility:

Requirements Volatility (RV) is claimed to be a major source of risk to the management of software projects. Investigating the sources of, reasons for, and impacts of requirements changes is an important prerequisite for understanding the characteristics of requirements volatility.

A constant change in a project makes it more complex. This complexity became the biggest challenge for new developers as they are almost a learner.

There are some steps which can reduce their complexity –

  • Create a clear requirement document and confirm your understanding of the requirement.
  • define and understand the scope of the project.
  • You should consider UX from a start while developing a new project.
  • create prototypes for confirming and refined your final project requirements.

Quality:


Developers practice best code development to meet the requirements in a more efficient manner. Not reviewing the code or suppression errors will damage the quality assurance of the project.

A product goes through unit testing during the development. Testing the software or app or product in a separate test environment is critical for your software’s success. Developers have to make sure the test plan covers all the requirements in the test cycle to provide a quality product.

Key Challenges Faced By A Software Engineer


There are four key challenges for software engineer but these challenges need new tools and techniques as well as innovative ways of combining and using existing software engineering methods.

The Heterogeneity Challenge:


Heterogeneity is a composition of a software system which is made up of different languages and running on different systems by using different standard for communication. There’s simple variation between the components that run the software.
Systems are required to operate as a distributed system across the internet, including different types of computer and different types of supporting systems. Developing these techniques for building software that can cope with heterogeneous platforms and execution environment is key challenges for software engineers.

The Legacy Challenge:


The legacy challenge is a challenge of maintaining and updating software in such a way that excessive cost can be avoided and essential business service continues to be delivered.
The software systems which performs a critical business function now, were developed many years ago. We need to maintain and update them with time.

The Delivery Challenge:


Delivery is another biggest challenge for engineers. Some traditional techniques are time-consuming because they required to achieve software quality. But today’s business is dynamic and responsive hence software also needs to change equally.
You have to design a large and complex software system in a short time without compromising with system quality.

The Trust Challenge:


The software must be trusted. It is important that we trust the software we are using. Especially for those software systems which is accessed through by the web page or web service.
Engineers have to make sure about their developing techniques and demonstrate that, the software can be trusted by its user.


“The purpose of software engineering is to control complexity not to create it” –

Pamela Zave
Categories
Business Development Frontend Developers React Native Developers Startup

Native Apps vs Web Apps Which Is Best For Your Business?

Mobile App Development is a complex process that requires a lot of research and planning. The stages of making a successful app begin with an idea. Then the idea goes through a thorough analysis followed designing, development, testing, and launch. It is then marketed to reach your target audience.

In the analysis phase, there is one question where most people get caught up, whether to go with a platform-specific app or not?

A platform-specific app is nothing but an app developed for individual platforms like iOS or Android exclusively. These are more popularly referred to as Native apps. Web apps, on the other hand, are applications that are accessed via a web browser.


Native App Development


Native mobile applications are the most common type of applications. These are built for specific platforms and are written in languages. For example, Swift and Objective-C for native iOS apps and Java or Kotlin for native Android apps. Native apps are also built using the specific Integrated Development Environment(IDE) for the selected operating system.

Both Apple and Google app developers with their own development tools, interface elements, and SDK. Most companies will invest in native mobile app development because of the multitude of benefits offered in comparison to web apps.


Advantages of Native Apps

  • Native apps deliver the best performance of all other development approaches.

  • It receives complete support from app stores and the overall app marketplace.

  • Native development allows developers to access the full feature set of the selected operating system.

  • The user experience of a native app is far superior to web apps. To the user, the flow is more natural because of each mobile operating system’s specific UI guidelines and standards.

  • A native app must be approved by its respective operating system.

Disadvantages of Native Apps

  • Native apps use difficult programming languages that require experienced developers.

  • Expenses are more costly upfront for native apps compared to web apps.

  • Native apps are not the best option for simple applications.

The initial cost of native app development may be higher than other options but this development approach will save money over time. Native Apps offer a great user experience, better performance, and accessibility because of that native apps are able to offer users a more personalized product.

Web App Development


Web apps are different from websites. A website typically offers more information than a web app can display, therefore web apps condense website content to improve functionality. A web app loads in Web browsers like Chrome, Safari, or Firefox, and doesn’t need to be downloaded from app stores like native mobile apps. Web apps also don’t take up storage on the user’s device.

If your goal is to offer mobile-friendly content to a wide range of users, a web app might be the appropriate development path. Web apps are a cost-effective way to put your product in the hands of a lot of users. keep in mind, users have incredibly high user experience and functionality standards that web apps sometimes can’t deliver. Users are easily frustrated with performance and usability issues like load times, small images and network availability.

Web application development


Advantages Of Web Apps

  • Web apps are relatively easy to maintain because they use a common code base across multiple mobile platforms.

  • Web apps can be built for all platforms as long as they can run in an appropriate web browser.

  • Compared to native apps, web apps are less expensive upfront.

  • Web apps don’t adhere to standard operating system protocols and don’t require approval from the app marketplace; they can be released at any time and in any format.

  • Updates to web apps don’t need to go through an app store meaning the user doesn’t have to manage updates manually. The newest version always loads when a user opens a web app.

Disadvantages Of Web Apps

  • Web apps have a much smaller scope when it comes to leveraging device features and hardware.

  • They are slower and much less responsive than native apps.

  • Web apps are less interactive and intuitive compared to native apps.

  • There are fewer branding opportunities with web apps. An app store listing presents an invaluable opportunity to convey an app’s unique value proposition.

Where your focus should be while choosing an app type?


The path you will take when it comes to native and web apps will depend on many factors, and two businesses will rarely answer these questions the same.

Before we get to the factors that will affect your decision, let’s first cover some of the key differentiations between native and web applications.

  • Programming languages they are built-in

    This can vary from native device languages such as Switch and Java to web-based technologies with HTML, CSS, and JavaScript.

  • Access to native device APIs

    This implies the ability of the app to use the device’s native features and other available APIs.

  • Distribution method

    This defines the channel through which the app will be findable- app stores or web.

  • Multi-platform support

    This simply means that different types have different abilities to run on iOS and Android.

Before we get deep into it make sure you know the answers of all the following questions :

  • How fast do you need the app to be developed?
  • What budget are you working with?
  • What are you trying to accomplish with the app?
  • What features do you need in order to do that?
  • What experience do you want to convey with your app?
  • What are your options for in house and outsourced development?

Native App vs Web App: Best Fit For Your Bussines


If you have answered the questions about what matters to you when developing your app, you should now have a clearer picture of which app type might suit your app needs. They vary in cost, Time and resourcing, as well as their abilities to fulfill different business needs.

Time To Market


The time takes to develop an app is the shortest for web apps and the longest for native apps. Native apps take extra time because of two separate development processes for iOS and Android.

Another factor that may affect time to market for native apps is the app store approval process, so it’s crucial to account for this early in development and optimize to ensure a smooth and quick launch.

Target Audience And User Experience


Who you are targeting makes all the difference. Based on your audience’s preferences, context and pain points, some app types will fulfill their needs better than the others.

For example, if your app needs a frequent update – and your audience counts on it, web apps will work better than native apps.

On another hand, if you know your audience will need the practicality of downloading an app and accessing it offline, native is the way to go.

Features Of The App


A huge role in this decision-making process are the key features you want your app to have. First of all, there is a clear distinction between web and native from their ability to use device’s native APIs.

Some apps may be perfectly functional without relying on native phone features, but others may be unusable in that case. Knowing what functionalities you need at this stage will make your decision easy.

Another element you need to focus on is the device’s ability to run the app with all its features and layers, as well as any future capabilities you may want to add to it later on. This way, you can make sure to allow yourself space for growth and not restrict yourself because of an app type.

Available Budget


The cost of development primarily depends on the programming languages and the desired time frame. Native apps are by far the most costly as they require hiring experienced developers and a longer time to develop, and the costs may be double because of two platforms and most often two developers or developers team.

If other factors indicate that a web app will be good enough to accomplish your app’s aim, it is a good path budget-wise.

Discoverability


Your marketing strategy may largely affect your app type choice because of your app’s ability to be organically discovered. While web apps are not present in-app stores, they are easily shared as websites using email, social and any other channels that have proven successful for your business.

On the contrary native apps live in apps live stores and can be optimized for search and app store rankings because of descriptions, reviews, screenshots, and more. Web apps are deprived of that opportunity and their distribution heavily relies on classic digital marketing.

If your app needs to execute more heavy-duty tasks and its speed and performance are the key to its success, native apps are your ideal choice and worth the time and the budget you will invest. This definitely includes games or any apps that rely on the use of photos or videos.

Or if you want your app to work in real-time and be straightforward, easily updated and isn’t performance stressed, web apps are the way to go. They don’t require access to the native layer and are quick and relatively cheap to develop, allowing you to reach your mobile marketing goals sooner while fulfilling your user’s needs.

Bottom Line


These two app types each carry their own benefits and downfalls, and the choice you make will impact the course of your growth. this is why the key to this process is understanding your assets and limitations and using them to get the best return in the form of your app.

And after you have considered your options and made your choice, It is crucial you work with developers that can visualize your idea and bring it to life on your budget and according to the core goal of your business. It is important to work with a team that is knowledgeable and experienced in the exact technology that supports your choice so your app can achieve its full potential.

Categories
Development React Developers React Native Developers Startup Top Coder

9 Reasons Startups Struggle In An Early-Stage.


A startup starts in a room which changes into the big company or an empire. All you need to do is build, believe and boost yourself for the startup struggles that every start-up company face in their life.

A startup is a struggle in early age, if you’re struggling with your startup here is how to coup-up with your startup conflicts and problems. What are the startup and the main motives of the startup in today’s scenario? Here you will get a comprehensive description of the startup’s struggle that faced by the new businessmen or developers at an early stage. As well as you find how to ignore or overcome the problems and struggles of the startup.

There are many companies to put the extensive amount of money in their startups but fail in the end and close their company. We all know the tech world is super competitive as every other day some new technology invented or some new product launched in the market. The client and customers want to buy or operate only new and trendy things.

Let take a small kind of example:
Sometimes, there some big companies who fail to impress their customers or clients with their products. Whereas new startup companies in the market impress the customers and clients with their new and exclusive products. Whether it is a new application or any new product.

startup


What Is A Startup?


A startup is a young company founded by one or more entrepreneurs in order to develop a unique product or service and bring it to market. By its nature, the typical startup tends to be a fastener operation, with initial funding from the founders or their families.

Nowadays mostly people from tech background are heading around towards startups. They build their own company and hire a few coders. Work with them on different and challenging projects and show their productivity.

Startup tech companies are following the pattern, where they use to welcome small projects on simple programming languages like Java, Javascript, and HTML or SQL kind of. Only when they establish themselves then they put their hands on big projects on advanced programming languages. But to establish your company is really not a simple task.

codersera: startup struggle

What do you understand by an early stage in the startup?

Startups are like a growing plant, it is the stage where the seed converts into a small tiny plant if the gardener doesn’t take care of the plant, it will die. Here the gardener is the person and the seed is an idea which generates into a new starting named as your startup company.

Why Startups Are Important?

  • The startup is a new idea that influences people towards it because it is new in the market so comparatively they have the buckle of ideas and working power to establish in the market. Basically, the tech companies are the sector who stand in this startup race.
  • So, it is important. There are many unemployed people who get jobs in startup companies. As well as nowadays, startup companies are not just in the room but they hire developers for the remote worker or as freelancers and they hire the right talent. So to provide jobs, startup play a significant role in it.

What do you understand by the tech startup?

Tech startups are based on the technologies that introduce in the market. There are a lot of programming languages like:

  • Java,
  • JavaScript,
  • Angular,
  • HTML,
  • React,
  • React-Native,
  • React-Native-Web,
  • Python, and
  • Ruby on Rail

that are used by the Tech startup companies to build a platform in the market. The main purpose of the Tech startup companies to bring or serve technology products and services in the market. Like Codersera.

Codersera is also a Tech startup company, it established a year ago, but they are the best and carry top developers in their circle. It is a platform who help other startup companies to hire the right talent for them.

They help the companies and organizations to find out the best and top coders as remote developers and freelancer who work from home. Codersera also follows the strict hiring process which helps the developers to enhance their work and skills.

Reasons: Why Startup Companies Struggle In An Early Stage?

The struggles are part of every startup. Because it is so difficult to establish your company’s name in the market. Also, struggle teaches us how to handle the crisis.

Success needs lots of hard work and faith in yourself as well as in your team. Below, there are few struggles faced by the startup companies in early time and these points help you how to manage your struggles in the early stage of the stage.

1. Lack of Time Management

Everything requires time and proper time management which gives you the full package of profit. It is the first startup struggle faced by every individual while setup the company. Time-Management is important, it decides what is your step towards your company.

codersera  time management
  • Time is a big player in the marketing game if you don’t management the time it may affect you with unpleasant loss. In time management prioritize decision making is important: what you think, what your next move as well as postpone dates all comes in the time management. By which you have to deal with.
  • Give your proper time towards your startup and show all the dedication on your projects are the real thing that expects by the market from any startup company. On-time submission of your client’s order, increase your chances to establish your new startup company.
  • So, start your startup without any distraction and with proper time management.

2. Poor Creativity With Fundings

In a startup, funds are so limited and the utilization of the small amount to any business is quite difficult. It is the second startup struggle that every individual faced in an early stage. So, Be creative with fundings and carefully deal with the investors. Sometimes mistakenly many startups have an issue with cash flow. It may be on expenditure or workers’ stipend.

  • But the main thing is there are so many fraud investors in the market so be careful with them even firstly divide the money into to parts, that on which you spend how much so plan a budget and act according to that.
  • You need to get an expert and trusted person with you who handle all your accounts and manage the cash flow. The person who knows where to invest and deal with market strategies.
  • Be creative as well as smart with your funds because in startup company fund are so important resource to increase and expense the company name. Only spend on the main and useful things. And try to increase your cash flow with your work.

3. Not working with The Right Talent

In startup companies, skills and talent matter a lot for the company members. Every client wants his/her project should be in the right hand. So, every company whether it is established or startup requires a skilled person in the team.

But sometimes in a startup company, there is a lack of hiring the right talent. This is the third startup struggle that frequently startup companies faced. Not working with the right talent may cause you many unpleasant losses.

  • There are many startup companies who hire unskilled and non-talented people who had less knowledge of programs and other things. According to the requirement of the market, the company should hire a person who had the proper knowledge and had decent behavior toward the market strategies and updated with new and latest technologies.
  • There are many platforms who help to hire the right talent for your startup company like Codersera. It is the platform where you find the best and top developers as well as the top remote team who handle your projects.
  • For startup companies, freelancers and remote developers are the best for working and in less price, you can hire an advanced developer. This also helps the companies to hires the right talent for them.

4. Lack Of Marketing And Sales Strategies

New companies had less experience in marketing and selling and sometimes fail to understand the strategies of the market. The lack of effort in marketing and selling shows is the fourth reason, why the startup companies struggle in the early stage.

Sometimes many startup companies are not familiar with the strategies of marking like a new trend or where to invest, later this causes them a huge loss to startup companies.

There are many startup companies who fail to follow the common marketing and selling strategies like-

  • Brand promotion:
    It is really important to promote your brand around the world so that people know more about your startup company. There are different ways and many platforms where you can promote your startup company to get projects.

    Also, work with freelancers and remote developers because it is also a way of promoting your company in different countries. So, it is also a kind of brand promotion around the world. This prevents from startup struggle if the startup companies follow it from the beginning.
  • Digital marketing:
    It is a huge concept and the fastest platform to interact as well as attract people toward your startup company. It includes-

    – Content marketing
    – Search engine optimize (SEO)
    – Search engine marketing (SEM)
    – Social media marketing
    – E-mail marketing

  • Public relations (PR):
    It is similar to the advertising also it is used to promote and build a healthy relationship with the clients and other companies. Public Relation is important for every company whether it is startups or established. It handles all your external problems like marketing areas.

    Through PR department your startup company can grow successfully. The PR person who handles all your media accounts and manages the relationship between the companies should be skilled and able to handle all the crisis if occur.

5. Improper Planning


When we planning to construct a house which builds by planning which called the blueprint or a structural layout. So, when the construction starts there is nothing lift behind. Similarly, when a person plans a startup company builds the whole planning or it can be like a small blueprint of the startup company.

But sometimes lack of planning or some mistakes cause a huge loss to startup companies. It the fifth reason which leads towards startup struggle in the early stage. And yes! it is also the main as well as an important factor that affects the companies.

  • It is important to plan the whole structure of the startup companies which help you to build your brand name in the market.
  • Improper planning and plotting mess up your project work and also include the time management which brief in above.
  • The startup is not the easy thing to do, it takes lots of planning by which a startup company successful in the market. Also, it takes lots of hard work and strategies to establish your company. For every tech startup planning things which directly help to build the projects.
  • A proper business planning is a must for every startup company to prevent themselves from startup struggle in early as well as every stage.

6. Fail To Beat Your Competitors

There is a huge competition between firms, everyone opts to start a startup company and now it became a trend to be your own boss. sometimes, with few mistakes and avoiding some data. It is the sixth point which leads to failing to beat your competitors occurs startup struggle in early-stage because everybody wants to run and want they become successful over a night which is not possible for anyone.

  • GET-SET-GO! Life is a run but in a startup, you have to be calm and relaxing for success. Running make you healthy but not your startup plan. The main objective of the startup companies should be the focus on the client’s satisfaction that leads to positive feedback from them.
  • The most important part of every startup company is their competitors who have the same platform but what make them different is?
    – Abilities,
    – Skills, and
    – Knowledge
    these three things which make them different from each other, as well as make the competition tough.
  • And it is important to maintain this difference and be the original by work.

7. Team balancing

To increase production, a team is important for startup companies who help each other and work together. Lack of teamwork causes the whole company. This the seventh reason that causes major problems in a startup company.

  • So, build a healthy relationship with the team is really important as well as you need to listen to the opinion of everyone and then plan a project with mutual understanding between everyone.
  • In a team, you should work as a family and help each other. A balanced team contain the sharing of idea and teamwork, as well as helping each other.
  • The main thing that the startup company also best for the team is they grow together.

8. Lack of dedication and Determination

The two things that matter in every company or for every business is dedication and determination towards the work. And it is the eighth reason which leads to the startup struggle in an early stage.

But sometimes there is a lack of determination and dedication which directly harm to the company name. And it mainly in the early stage, sometimes it’s due to over-confidence or lack of knowledge.

  • Dedication towards your work is really important in a startup company, the person or the group should be determined towards their tasks and the project they get.
  • Secondly, the don’t get over-smart or over-confidence towards your work. And work with full dedication and determination.

9. Clash Between Partners

Last but not the least reason, it happens between the partners when their ideas clash each other. And this leads to the startup struggle in early as well as in every stage.

  • The startup requires a better understanding of the partners who start a company together. Due to some conflicts or misunderstandings cause a clash between the partners in the startup.
  • Every startup company needs that the partners of the company stay and work together so that it beneficial for the company as well as the company members. So, be good with your partners and listen to both the things and then take any decision.
  • That all a startup company requires for their owners to work with mutual understanding.

Future Implementations Startup Companies

Above there are the reasons that faced by every startup company in the beginning and there is the explanation that how to resolve yourself from the struggle and hope that you implement and take care of all the points like time management and hold your team and appreciate your team for there work.

All 9 reasons for startup struggles contain the solves and the problems that may you face or faced when you start your startup company.

In the future, the scope of startup companies on high. Everyone is looking for startups and work with startup companies to learning everything from the beginning. There are a lot of companies that struggle and achieve the goal that they set by the startup. But few startup companies establish themselves in the market.

Frequently asked questions