Skip to main content

Posts

Showing posts from April, 2023

React native project setup guide

React Native is a kind of app in different kind of environment, which allows us to compile it in both ios and android platforms.  1. Install expo globally in your local machine. -npx i -g expo-cli 2. Install reacr-native project. It will start starting template of our app. It will install all the the depandencies we need to start or run our app. 3. Install DOM dependencies.   If you want to open react app in you browser than you really need to download these dependencies in your project. -npx expo install react-native-web@~0.18.10 react-dom@18.2.0 @expo/webpack-config@^18.0.1 4. For front-end styles we will use tailwind css. for that we will install ReactWind react native package. Go to the official ReactWind site https://www.nativewind.dev/quick-starts/expo a. Install tailwindcss pakcage -npm i react-wind b. Install tailwind dev dependencies -npm i --dev tailwindcss Now go to package.json file and check these dependencies are installed. c. Now we need to create tailwind confi...

Mostly use of collection methods in laravel

Example code here. <? php namespace App \ Http \ Controllers ; use Illuminate \ Http \ Request ; use Illuminate \ Support \ Str ; class CollectionController extends Controller {     const PROJECT_TYPES = [         'action' ,         'base resource' ,         'A W S' ,         'lara beans'     ];     const MOVIES_TYPES = [         [ 'id' => 1 , 'name' => 'action' ],         [ 'id' => 2 , 'name' => 'base resource' ],         [ 'id' => 3 , 'name' => 'A W S' ],         [ 'id' => 4 , 'name' => 'lara beans' ]     ];     function mapWithSlugs () {         dump ( 'Convert name of arrays into slug using Slug function and iterate array with map function' );         $slugs = [];         foreac...

Helper function | custom helper function in laravel

 Helper function can be implement both with pure functions and by class based functions. Helper function can be access anywhere in your app, Event they are autoload as well via composer on every user request. e.g dd() data dump is an common heler function that we use while debugginh in laravel. How to implement helper functions 1 . Make a directory in app folder with  helpers name. Create a file helper.php Write dummy code in this file <? php function message ( string $string = '' ) {     return 'Hello' ; } ?> 2. Now register/set the path of this file in composer.json file add the path in autoload object like that. I define a files key and assign array to it.Array contains all helper function files path with comma separation. "autoload" : {     "psr-4" : {         "App \\ " : "app/"     },     "files" : [ "app/helpers/helper.php" ],     "classmap" : [         "database/see...

How to find out if a package is installed in Linux?

1) How to find out if a package is installed or not in Linux There are multiple ways to check find locate package is installed in linux machine or not 1.a) Using which command The  ‘which’  command returns an executable path that can be executed when the command is entered in the terminal. # which vi /usr/bin/vi 1.b) Using whereis command The  ‘whereis’  command is used to search the binary, source, and man page files for a given command. # whereis vi vi: /usr/bin/vi /usr/share/man/man1/vi.1p.gz /usr/share/man/man1/vi.1.gz 1.c) Using locate command The  ‘locate’  command performs faster than the find command because it uses an updatedb database, whereas the find command searches in real time. # locate --basename '\nano' /usr/bin/nano /usr/share/nano /usr/share/doc/nano 2) How to find out whether a package is installed or not in Linux, using package manager 2.a) On CentOS / Red Hat (RHEL) 6/7 Use  yum command  or  rpm command  to deter...

11. SectionList in react native

 If you have nested array mean array have another array than you can display the data in section wise. SectionList provide many features like 1) Scroll Loading. 2) Pull to refresh the list. 3) Selection separator support. 4) ScrollView effect. Example code for SectioList. import { StyleSheet , SectionList , View , Text } from "react-native" ; const SelectionListExp = () => {     const students = [         {             id : 1 ,             name : 'Adnan Zaib' ,             data : [ 'PHP' , 'Laravel' , 'JS' ]         },         {             id : 2 ,             name : 'Aiza Adnan' ,             data : [ 'PHP' , 'Laravel' , 'HTML' , 'CSS' , 'JS' ]         },         {    ...

10. Use components or display components in loop using flat list in react native

 I this article we will discuss and cover two major points. 1) How to  use / display components in flatlist. 2) How to use props while using components in Flat list. Let say we have array of student data we can iterate over it using flat list .just the normal behaviour. But if i want to pass the single by single student data to StudentProfile component in flatlist. Here is the example code read and understand the logic.    import { FlatList , StyleSheet , Text , View } from "react-native" ;   const ComponentInFlatList = () => {     const students = [         {             id : 1 ,             name : 'Adnan' ,             email : 'exp@email.com'         },         {             id : 2 ,             name : 'Zaib' ,     ...

9. List with map() function in react native

 To create custom list, we use map(). It loads all item at once in the list that is expensive if list contain large number of data. For small data map() function is fine. Sometimes you are asked to make list without using react-native features to check you logical mindset. so map() is js feature not react feature keep it in mind. We will use ScrollView with map() for scroll effect on our list. Example code for map() list. import { Text , View , FlatList , StyleSheet , ScrollView } from "react-native" ; const MapListExp = () => {     const students = [         {             id : 1 ,             name : 'Adnan'         },         {             id : 2 ,             name : 'Zaib'         },         {             id :...

8. Flat list in react native

Flat list is a react native component that is use to display large amount of data in the form of list in native app. There are many extra and advance features which flatlist provide over map() list. Flat list uses normal array as well as array of objects. Flat list take three parameters 1) data(array) 2) renderItem(loop/iteration over array) 3) define unique key (keyExtractor = { item => item.id }) Flat list features that make it more value able. 1) It load data that is only visible on screen. When the list item go off the screen it automatically delete them from the list. This way app performance grow up and give user a smooth scroll feeling. 2) It provide scrolling feature by-default.You no need to add extra component of "ScrollView" to make scroll able data list. 3) Flatlist provide these feature Header section Footer section Horizontal scrolling Separator Pull to refresh Scroll loading Scroll to a specific position in the list Multiple column support   Visit the link f...