Navigate back to the homepage

How to get array length in react native?

Infinitbility
React Native
February 9th, 2022 · 1 min read
keep affilitate

Hello Friends 👋,

Welcome To Infinitbility! ❤️

To know the length of an array in react native has the same syntax as javascript.

we have to just use arrayVeriable.length syntax and it will return array element count.

Today, we will learn how to create an array and how to check array length in react native.

Let’s start with the creation

Now, we are going to create an array of objects then we have to store it to state and then we will print their length on screen.

Here is a sample array of objects which we will use in the example.

1let users = [
2 { id: 1, name: "infinitbility" },
3 { id: 2, name: "notebility" },
4 { id: 2, name: "repairbility" },
5];

To check the length of the array we have the .length option to know the length of the array.

To check the length of exampleArr we have to write exampleArr.length and it will return 3.

1import React, { useState, useEffect } from 'react';
2import { Text, View, StyleSheet } from 'react-native';
3
4export default function App() {
5 const [users, setUsers] = useState([]);
6
7 useEffect(() => {
8 let users = [
9 { id: 1, name: 'infinitbility' },
10 { id: 2, name: 'notebility' },
11 { id: 2, name: 'repairbility' },
12 ];
13 setUsers(users);
14 }, []);
15
16 return (
17 <View style={styles.container}>
18 <Text style={styles.paragraph}>
19 users.length is {users.length}
20 </Text>
21 </View>
22 );
23}
24
25const styles = StyleSheet.create({
26 container: {
27 flex: 1,
28 justifyContent: 'center',
29 backgroundColor: '#ecf0f1',
30 padding: 8,
31 },
32 paragraph: {
33 margin: 24,
34 fontSize: 18,
35 fontWeight: 'bold',
36 textAlign: 'center',
37 },
38});

Output

react native, array, length, example
React Native, get length of array example.
  • Try it yourself

Thanks for reading…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

melio affilitate

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

How to get current UTC date in typescript?

TypeScript, get current UTC date example.

February 8th, 2022 · 1 min read

How to get current month in typescript?

TypeScript, get current month example.

February 7th, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]