DEV Community: ashad nasim

React Native UI Kitten Library Basics

ashad nasim — Sun, 26 Sep 2021 13:41:33 +0000

Components

1) ApplicationProvider

It is a top level Wrapper for your Application.Generraly, wrap the root level of your App

export default () => (
  <ApplicationProvider {...eva} theme={eva.light}>
    <HomeScreen />
  </ApplicationProvider>
);

Docs for ApplicationProvider

2) Layout

Layout is just like the View element of the React Native or Container in the Native Base. Layout has some styling as per the Level of the Layout you are using, and its Background color changes as the theme of the app changes. Wrap each screen with the Layout as it will come usefull when you later on add theme to your application.
There are 4 levels of the layout and can be configured using the level props.

When we changes the theme of the app, then automatically the background changes to dark theme.

Example Code for Layout

<Layout style={styles.layout} level='1'>
      <Text>1</Text>
 </Layout>

3) Text

The text component in the UI Kitten was same as Text in React Native with some basic styling passed via the props. We can have multiple types of text style from h1 to h6 by passing the props category.

      <Text category='h1'>H1</Text>

3) Icon

If you had created your application by using ui-kitten template, then you can use the Icon otherwise you need to add an additional package.

To use Icon component, first you need to import the Icon like below

import { Icon } from '@ui-kitten/components';

and then you need to just pass the Icon name,color and size.

<Icon
    style={styles.icon}
    fill='#8F9BB3'
    name='star'
  />

You can also add icons to button by passing accessoryLeft or accessoryRight props to the Button component of the UI Kitten

<Button
      style={styles.button}
      accessoryLeft={HeartIcon}
      onPress={toggleMenu}>
      PRESS ME
 </Button>

const HeartIcon = (props) => (
  <Icon {...props} name='heart'/>
);

3) Button

Button can be used in the UI kitten by importing component. We can pass some of the props like appearance, status, size

<Button  size='medium' appearance='filled'  status='warning'>
      FILLED
</Button>

Button Docs

More component will be dicsussed in the Next part of this blog.

Thanks for Reading.

Best UI LIbrary for your next React Native App

ashad nasim — Sat, 25 Sep 2021 17:04:40 +0000

I had built multiple apps in React Native for my personal as well as Freelancing projects. I had also tried many UI libraries for React native, to get started fast and for consistent UI.

I had checked UI Kitten after some time but after I had used
UI kitten, I became a fan of this library. It has most of the components you will need, for example, Input, Card, Button, etc. It also supports the Light and Dark theme. It is the library that has its Icon Module and all the Icons are awesome. The app looks good in both the light theme and dark theme.

To create a new React Native app using Kitten UI, you just need to run the below command, it will create a new React Native app with the UI kitten as the template

npx react-native init MyApp --template @ui-kitten/template-js

In the next post, I will try to explain, how to add UI-kitten to an already created project.

UI kitten offical page

To learn the Basic of UI kitten library refer to this blog, you will enjoy this

React Native UI Kitten Library Basics

ashad nasim ・ Sep 26 ・ 2 min read

#reactnative #beginners #android

How to Post Long Video on WhatsApp Status | [WhatsApp Trick]

ashad nasim — Sat, 25 Sep 2021 16:37:07 +0000

If you prefer the video, then you can watch this video

youtu.be/IvzVAdIimCE

Most of the time we want to share the videos in WhatsApp status, but what happens is the WhatsApp limit the length of the video to be shared on WhatsApp Status to only 30 seconds. So we cannot share videos that are more than 30 seconds, but today I am going to share one trick, which will allow us to share the videos of any length to the Whatsapp Status.

For this we will need an App by name Video Splitter:- SPLIT and Share Directly You can download this app by visiting this link. It is also free

After downloading, you just need to select the video from the app and press next, that it will split that video into 30 seconds long and after that, you can share that video directly from the app.

https://play.google.com/store/apps/details?id=videosplitter.app.status.socialmedia.sharing

Easy Nodejs installation in Elementry OS (LINUX)

ashad nasim — Tue, 21 Sep 2021 16:46:26 +0000

We will be using the distribution source from the Offical Source

If you are using Ubuntu, then just run this command in your terminal

curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs

It will ask fro your password, provide your password and then press Enter.

After some time it will install nodejs in your system.

To check that nodejs is installed in your system, paste below command into your terminal.

node -v

If it will give you some number, then your nodejs installation is complete.

How to get an Internship as a Student

ashad nasim — Mon, 20 Sep 2021 05:17:32 +0000

Getting an internship as a student is the best thing a student can have. As it will increase your knowledge as well as it will help you to earn some money.

First of all, you need to learn some skills and become comfortable with them. For example, you can learn Android Development from youtube, udemy, blogs, and other mediums.

After that, start applying to an internship on different portals like "Internshala", "Linkedin Jobs" etc.

[React Native] Learn how to setup Wireless debugging in Physical device (Easy Way)

ashad nasim — Thu, 05 Aug 2021 18:47:41 +0000

First you need to install the app in the Physical app using the command

npx react-native run-android

After the app gets install, remove the wire from your device and then shake your device to show to debugging menu

After that press on the Settings.

After that click on Debug server host & port for device

After that add your IP in this format IP:8081. For Example:- 192.158.1.38:8081

Press OK

Press Back.

Again shake your device and then click Reload.

If you had provided correct IP and your metro server is running then it will work fine.

Angular CLI - request deprecated error (Solution)

ashad nasim — Tue, 03 Aug 2021 17:56:50 +0000

Try this below command

$ npm cache verify

$ npm cache clean --force

and then try again to install the angular CLI

If you still get the error then install yarn package manager.

Install yarn by running this

$  npm install -g yarn

and then configure angular cli to use yarn package manager, by running this command

$ ng config -g cli.packageManager yarn