DEV Community: charismaaji

Setting up for connect fetching local API or http React Native IOS / MacOS

charismaaji — Wed, 16 Feb 2022 10:00:42 +0000

Some of you maybe got confused, why the API doesn’t work and get error when try to connect to local API or maybe http instead https.

It because by default React Native cannot connect to API with http request, it's should be https

To solve this problem, you need a bit setup on plist file

first go to folder
ios > {your file name} > info.plist

for example
ios > FashionApp > info.plist

after that you copy this file



<key>NSAppTransportSecurity</key>
<dict>
     <key>NSExceptionDomains</key>
     <dict>
         <key>NSExceptionAllowsInsecureHTTPLoads</key>
         <true/>
     <key>localhost</key>
     <dict>
         <key>NSExceptionAllowsInsecureHTTPLoads</key>
         <true/>
     </dict>
     </dict>
     <key>NSAllowsArbitraryLoads</key>
     <true/>
</dict>

Block this section on plist file, and delete it. After that, you paste from your copying before

Success, now you can connect with http or local host without get any errors.
If you have any question, feel free to ask me on
email : charismakurniawan@gmail.com
instagram : charismaaji

Setup environment React Native for MacOS M1

charismaaji — Thu, 10 Feb 2022 10:44:26 +0000

MacOs with chip M1 has different setup for environment React Native, some people got error and didn’t got any solution. In this article I will share to you how to setup React Native on MacOs M1

1. Install Brew

Open your terminal and copy this

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

If install finish, copy on the red line first and press enter then copy on the blue line and press enter

Check brew version by

brew --version

If you can see brew version, it's mean brew already installed on your mac

2. Install Node

Back to terminal, and type this

brew install node

Check your node version by

node --version

3. Install Watchman

Now we need to install watchman

brew install watchman

4. Install Xcode

Go to AppStore and install Xcode. It’s take a bit long time for installation because Xcode have a huge size. Wait until finish like this

After you open Xcode it will show alert ask to install Rosetta. I’m not sure we actually need it. Let’s press NOT NOW and we install as soon as we need.

Now we open the Xcode and we go to preferences. You can see on this picture

Go to locations path and click command line tools let’s select Xcode version

5. Set iOS simulator

Now we need to install emulator or simulator by click Components and choose emulator what we want to. It also take a bit long time because size a quite big. If installation was finish, it will look like this. Let's pick for iPhone 12 or 13

6. Install Ruby

Install ruby by Open Terminal and copy this

brew install ruby

7. Install cocoapods

install cocoapods by specify folders where we need to install, this is very important. So I would like to be

sudo gem install -n /usr/local/bin ffi cocoapods

now we can see our pod version by type this on terminal

pod --version

Installation was finish. Now we can create new React Native project by type
npx react-native init ExampleYourProject

(Add On) 8. If you still got error, follow this section. If not, you don’t need to follow this

if you still got error, trying use this

sudo arch -arch x86_64 gem install cocoapods

then copy this

sudo arch -arch x86_64 gem install ffi

then it’s possible to run it to your ios folder by going to your project and cd/ios and type this

arch -arch x86_64 pod install

Yey congratulations now you are already finish all React Native setup environment.
If you have any question, feel free to ask me on
email : charismakurniawan@gmail.com
instagram : charismaaji

Create Responsive width and height in React Native

charismaaji — Thu, 10 Feb 2022 10:23:27 +0000

For Website or Mobile Developer sometimes width and height is a problem for different sizes of devices. To fix that problem, we need to create Responsive Size

If you are using React Native, you can use this

Usually for the first step I create folder utils and create index.js on utils folder.

We need to
import {Dimension} from 'react-native'

Then we initiate for default height and width

const heightMobileUI = 896;
const widthMobileUI = 414;

after that we need to create function

export const responsiveWidth = width => {
  return (Dimensions.get('window').width * width) / widthMobileUI;
};

export const responsiveHeight = height => {
  return (Dimensions.get('window').height * height) / heightMobileUI;
};

Yep, we’re finish for create responsive size! The question is, how can we use that?

Here's step to using that, for example:

import ResponsiveWidth from '../utils' 
// import same as location you create

<View style={{
width:responsiveWidth(100), 
height: responsiveWidth(100), 
backgroundColor:'red'}}>

      <Text> Example </Text>

</View>

Yeayy now you already use for responsive size. You may ask why I use responsiveWidth on height? Because we use size base on width device, if device have different size it will different size also.