DEV Community: maheenriaz

What is a Flatlist? How we use Flatlist in react-native:

maheenriaz — Mon, 10 Jan 2022 12:36:58 +0000

Rather than showing the list of items using the map function on an array and returning some JSX for each item in that array and then embedding that inside a scrollview so we can scroll up and down in that list.
Another way of showing a list that is better to use in any condition is Flatlist. In Flatlist, we don’t need to use scrollview because Flatlist comes with the ability to scroll up and down the list so we will get rid of that instead of importing.

How to use:

First of all, we need our Flatlist components. We don’t have an opening and a closing tag. Flatlist is a self-closing component. And here we have different numbers of props that control how our list works. So first props are:

1. Data:
Data props specify the data that we want to show. We have to pass data as an array. e.g.

2. Render Item:
This prop is going to be a function. Now this function return some jsx with some item in the array that we are iterating we have to destructure it because it is not just the item
e.g. <Flatlist. renderItem={({item})=>( return(<Text>{people.name}</Text>) )} />

3. numColumns:
numColumns props are used to show data in multiple columns.

4. Horizontal:
If this prop is true, then data will be displayed horizontally.

5. KeyExtractor:
It is used to specify the unique value in the given lists of items.

6. ListHeaderComponent:
This prop render at the top of the item

7. ListFooterComponent:
This prop render at the end of the item

8. Refreshing:
Set true while waiting for new data to refresh

Implementation:

import React from "react";
import { StyleSheet, Text, View, FlatList } from "react-native";
const Person = [
  {
    id: "1",
    name: "Alex"
  },
  {
    id: "2",
    name: "Michel"
  },
  {
    id: "3",
    name: "Robert"
  },
  {
    id: "4",
    name: "William"
  },
  {
    id: "5",
    name: "James"
  }
];

const Item = ({ title }) => {
  return (
    <View style={styles.item}>
      <Text>{title}</Text>
    </View>
  );
};

export default function App() {
  const renderItem = ({ item }) => (
    <Item style={styles.text} title={item.name} />
  );
  return (
    <View style={styles.container}>
      <FlatList
        data={Person}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginTop: 30,
    padding: 2
  },
  item: {
    backgroundColor: "green",
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16
  },
  text: {
    color: "red"
  }
});

Code Output:

How to change the app name in react-native(in android and IOS):

maheenriaz — Thu, 06 Jan 2022 07:36:40 +0000

In Android:

To change the app name in react native first go to your project folder and open this path in VScode,
android/app/src/main/res/values/string.xml
Now you can easily change the app name in the string tag.
For example:
<string name="app_name">YOUR_APP_NAME</string>

After changing the app name, uninstall the previous app from your device and run these commands:
$ cd android $ ./gradlew clean $ cd .. $ react-native run-android

For IOS:

Open info.plist, change the value after the key to your app name. Eg.
<key>CFBundleDisplayName</key> <string>My New App Name</string>
Now uninstall the previous app from your device. Run
$ npm install $ pod install
Now simply, you can install the new app on your device.
Or you can also change the app name from Xcode.
Go to Xcode, open your project in Xcode, and find the targets tab. Select your project and change the hostname with your app name.

What way should I choose React Native or Flutter

maheenriaz — Wed, 05 Jan 2022 10:55:36 +0000

In this blog, we will discuss two top-rank frameworks i.e. React Native and Flutter. Earlier we needed time, money, and skills to develop cross-platform applications. But nowadays companies need the fastest way to develop native apps. To develop native apps, we must know JAVA for android and SWIFT for ios which waste our time. React native and flutter give us the advantage to write a single code and deploy it to various platforms.

Flutter:

From a single codebase in a flutter, we create natively-compiled apps for mobile and desktop. Google has recently developed cross-platform mobile app development. Dart is the programming language used by flutter. It enables the creation of expressive and flexible user interfaces with native performance.

React Native:

React Native is an open-source framework developed by Facebook and it runs on javascript. The main focus of this framework is the native application rendering that is primarily compatible with Android and iOS. React native is based upon React JS which is a factor of native code.

Programming Language Difference:

React Native:

React native uses javascript. It is easier for developers to move on to react-native because of javascript as compared to dart.

Flutter:

Flutter uses dart language. It is just like the C language/JAVA. Dart is not used much nowadays. It supports object-oriented programming like abstraction, encapsulation, polymorphism, and inheritance. Dart bridge is larger but it runs faster as compared to javascript bridge.

Advantages of React Native:

1. Changes Are Visible Immediately:

React native uses hot reloading or live reloading. When a user makes any changes in the code, changes will be visible to the developer immediately which is the main advantage to seeing the real-time changes in the application.

2. Adding to an Existing App:

If we already have an app and we want to improve that app. We don't need to re-create that app. By using React Native, we can add components that we had to create in our app. It saves our time and money.

3. Flexibility:

React-native makes it easy for developers to pick up where someone left the work and start coding. It increases the flexibility of developers and improves the performance of mobile applications.

4. Support 3rd Party libraries:

React native allows using 3rd party libraries using a native module and javascript module. If you want to add dynamic charts in react native apps, you can easily add them in your application using 3rd party libraries.

Disadvantages of React Native:

1. Takes longer time to get started:

React native takes a long time to initialize the app because of the javascript thread. Any kind of user interaction like events, API response. The longer the API response, it will block the user thread and slow the performance of mobile applications.

2. It is insecure in terms of security:

React native creates a vulnerability in the security of the system. If you are creating finance and banking apps you don't need to choose to react-native because for the banking app the data is confidential and we need security for confidential data.

3. It's a Difficult Task to Learn the React Native:

If you are a newcomer in the field of development then it will be hard to learn to react-native because of JSX. JSX contains Html with javascript. In comparison to other cross-platform apps, it will be difficult for the ordinary student to learn to react-native.

Advantages of flutter:

1. Fast Reloading:

Flutter provides fast reloading after changes are made in the application.

2. Open source:

Flutter is open-source and free to use. They provide substantial documentation and a large community that helps you to solve any problem you might run into.

3. Productivity is high:

You may utilize the same code base for your iOS and Android apps because Flutter is cross-platform. This will undoubtedly save you time and money.

4. Compatibility:

Since widgets are the part of flutter app. That's why we will experience fewer compatibility issues on different operating systems which saves time.

Disadvantages of Flutter:

1. Not suitable for web apps:

Browsers do not currently support Flutter-based applications. This implies you won't be able to use any web applications. It also does not support watchOS and tvOS.

2. It's a Difficult Task to Learn the Dart:

Dart is a lesser-known programming language, yet it is necessary to master it to work with Flutter.

3. Does Not support 3rd party libraries:

It does not support 3rd party libraries which increases the programming tasks.

4. Large App size:

flutter app size is larger than 5MB.

Apps that are built on React Native:

Facebook
Instagram
Skype
Uber Eats
Wix
Tesla

Apps that are built on Flutter:

Hamilton
Lunching
Reflectly
Google Ads
Xianyu by Alibaba

How we create a Flutter app:

Firstly, open a terminal and run these commands:
$ flutter create my_app
$ flutter analyze
$ flutter test
$ flutter run lib/main.dart

How we create react native app:

Firstly, open terminal and run these commands:
$ npx react-native init new_project
$ cd new_project
$ react-native run-android