Posts

Find iPhone, iPod touch or iPad’s Unique ID (UDID) for iOS Development

This post will help you to find iPhone, iPod touch or iPad’s unique ID (UDID). This post include 6 easy steps to get the UDID of your iPhone, iPod touch or iPad. So Let’s get started.

What is unique ID or UDID?

Every iPhone, iPod touch and iPad has a unique identifier number associated with it, known as a UDID (Unique Device ID).

How is looks like?

UDID is a 40-digit sequence of letters and numbers that looks like this: 0e83ff56a12a9cf0c7290cbb08ab6752181fb54b.

Why we need UDID?

Either you are a client or a developer you need UDID to test your iOS app in your device. Unlike Android iOS has strong security protocols and the devices do not allow to install the ipa (App package same as APK in Android) from unknown source so when you make an iOS app you need to test it on real device. For that you have two options either go for debugging mode by connecting your device with XCode (iOS development IDE) and run the app directly into the device or get a UDID of your device and make an ipa to install the app in the device.

Remember if you  want to distribute the ipa then you need to provide the UDID so that it can install in the device.

How to get it?

You are a developer or a normal person here are 6 simple magical steps to get the UDID of your iOS device using iTunes:

Step 1:

Open iTunes (the Mac or PC app, not iTunes on your iPhone).

Step 2:

Plug in your iOS device / iPhone, iPod touch or iPad. you will see this now.

Step 3:

Click the device icon on the top of the screen.

Step 4:

Ensure you’re on the Summary tab.

Step 5:

Click on the text that says Serial Number. It should change to say Identifier (UDID).


Step 6:

Select Copy from the Edit menu and your UDID is now in the clipboard, so you can paste it into an email or message.

This is how you can find iPhone, iPod touch or iPad’s unique ID (UDID). If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

How to Make a View Like Android Fragment in React Native

In this post, you will see How to Make a View Like Android Fragment in React Native. Developers from android development backgrounds know very well about the Fragment in Android but for those who haven’t heard about that

Android Fragment is the part of the activity, it is also known as sub-activity. There can be more than one fragment in an activity. Fragments represent multiple screens inside one activity.

There is nothing like a Fragment Component in React Native to make a view like the Android Fragment for Android and IOS. To make the fragment view we have to manage the visibility of the child view using state. In this example, I have made a state to store a number. This number will be used to return the screen we want to show using a function. So let’s get started.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
This will make a project structure with an index file named App.js in your project directory.

Project Structure

To start with this example you need to create a directory named components in your project and create three files FirstScreen.js, SecondScreen.js, and ThirdScreen.js in it.

Now Open App.js in any code editor and replace the code with the following code.

App.js

Open components/FirstScreen.js in any code editor and the Replace the code with the following code.

FirstScreen.js

Open components/SecondScreen.js in any code editor and the Replace the code with the following code.

SecondScreen.js

Open components/ThirdScreen.js in any code editor and the Replace the code with the following code.

ThirdScreen.js

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

Android

IOS

This is how to make a view like Android Fragment in React Native for Android and IOS. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂

Example to Remove TextInput Underline in React Native

This is an Example to Remove TextInput Underline in React Native. While working with android you have seen an underline in android devices which is a default property for the Android. If you want to remove that you can use underlineColorAndroid prop which will decide the color of the underline in android.

Remove TextInput Underline Using

Let’s get started.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
This will make a project structure with an index file named App.js in your project directory.

Open App.js in any code editor and replace the code with the following code.

App.js

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

This is how you can remove TextInput Underline in React Native. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂

React Native Disable Screen Rotation

Handheld mobile devices always have two orientation mode Portrait mode and Landscape mode due to there design to hold easily in the hand. Portrait mode is by default mode in mobile devices and if we rotate the device it turns into Landscape mode.

While making an application we normally design for the Portrait mode and let the system manage in Landscape mode (You can manage both) but in some cases, we don’t want the system to change the orientation while the user is using our App. So here is an example of React Native Disable Screen Rotation which will help you to fix the orientation of your app. We can do this by simply putting 1 line of code in android and in iOS we have to perform a specific step.

For this example, you can use already available projects or can take help from here. We will show you the changes that you can do to fix the orientation of your application.

For Android Users :

1. Open YourProject -> android -> app -> src -> main -> AndroidManifest.xml

2. Now you need to put android:screenOrientation=“portrait” as shown below

3. After making changes in AndroidManifest.xml file you need to re-run your project. This would disable the landscape mode in your current application in android devices.

For IOS Users:

1. Open YourProject -> ios -> Project_Name.xcodeproj file in X-Code.

2. After opening the project in Xcode select your project name.

3. Now Goto -> General -> Deployment Info and only select the Portrait mode.

4. Now Re-run your project. This would disable the landscape mode in your current application in android devices.

This is how you can disable the screen rotation. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂

Detect Device is Android or IOS using React Native Platform

Example to Detect Device is Android or IOS using React Native Platform includes the use of React Native Platform Component. As the topic name describes itself, we will detect the Device is Android or IOS.  This is very useful while we have to load different elements according to the different OS. We will use Platform component to detect the Platform. So let’s get started.

To Import Platform in Code

Detect Device Using

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
This will make a project structure with an index file named App.js in your project directory.

Open App.js in any code editor and replace the code with the following code.

App.js

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

This is how you can detect the device is Android or IOS using React Native Platform. If you have any doubt or you want to share something about the topic you can comment below or contact us here. The remaining components will be covered in the next article. Stay tuned!

Hope you liked it. 🙂

Installation of Xcode for React Native IOS Development

This post will show the process of Installation of Xcode for React Native IOS Development. For those who are new in the IOS development, Xcode is an integrated development environment for macOS(only) containing a suite of software development tools developed by Apple for developing software for macOS, iOS, watchOS, and tvOS as similar as of Android Studio for Android development. So let’s get started with the installation process.

If you also want to install Android Studio the here is How to Setting up Android Development Environment & Android Studio in Mac OS.

1. Create a Developer Account (Apple ID)

First of all, you need to create a developer account here on the official developer site of the Apple. Open the link (https://developer.apple.com) and click onto the Account menu. This will redirect you to the login page where you can log in from your Apple ID(User ID) and Password or if you have no Apple ID then you can generate one using signup option.

There are no charges to make an Apple ID / Apple Account. It is completely free.

After login/signup you can see the following screen

Here You can click on the Downloads to see the latest version of Xcode available. We did this just to make our Apple ID which we will require while installing the Xcode.

2. Installation of Xcode

After creating the developer account you can see App Store in Dock with the Icon like alphabet “A”. 

Click on the icon and You will see App Store window will open. Now in search bar search for Xcode. and you will see the result similar to below image. Now click on GET and after that Install.

After Clicking on the install option you will be asked for the Apple ID and password. Please insert the Apple ID and password you have generated in the first step.

Now sit back and relax it will automatically download and install the Xcode in your Mac.

You can also see the process in launchpad.

This was the Installation of Xcode for React Native IOS Development. you don’t need to install any external simulator to run your app after installing Xcode. Everything needed for the IOS development will come along with the Xcode package.

If you are facing any problem or if you have any doubt about the topic you can comment below or contact us here.

Hope you liked it 🙂