Category: React

Sometimes, we want to add space between components in React Native styling.

In this article, we’ll look at how to add space between components in React Native styling.

How to add space between components in React Native styling?

To add space between components in React Native styling, we can add margins in each item.

For instance, we write:

import * as React from 'react';
import { View } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View style={{ flexDirection: 'column', flex: 6 }}>
      <View
        style={{
          flex: 2,
          flexDirection: 'row',
          justifyContent: 'space-between',
          marginBottom: 10,
        }}>
        <View
          style={{ backgroundColor: 'red', flex: 1, marginRight: 5 }}></View>
        <View
          style={{ backgroundColor: 'blue', flex: 1, marginLeft: 5 }}></View>
      </View>

      <View
        style={{
          flex: 2,
          flexDirection: 'row',
          justifyContent: 'space-between',
          marginBottom: 10,
        }}>
        <View
          style={{ backgroundColor: 'white', flex: 1, marginRight: 5 }}></View>
        <View
          style={{ backgroundColor: 'black', flex: 1, marginLeft: 5 }}></View>
      </View>

      <View
        style={{
          flex: 2,
          flexDirection: 'row',
          justifyContent: 'space-between',
          marginBottom: 10,
        }}>
        <View
          style={{ backgroundColor: 'gray', flex: 1, marginRight: 5 }}></View>
        <View
          style={{ backgroundColor: 'yellow', flex: 1, marginLeft: 5 }}></View>
      </View>
    </View>
  );
}

to add marginRight and marginLeft to each item to add gaps between each View.

Conclusion

To add space between components in React Native styling, we can add margins in each item.

Sometimes, we want to fix slow performance when rendering 100+ items in a React Native FlatList.

In this article, we’ll look at how to fix slow performance when rendering 100+ items in a React Native FlatList.

How to fix slow performance when rendering 100+ items in a React Native FlatList?

To fix slow performance when rendering 100+ items in a React Native FlatList, we can set the initialNumToRender prop to set how many items are rendered the first time.

We can also replace anonymous functions in props with named functions.

For instance, we write:

import * as React from 'react';
import { FlatList, Text, View } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

const flatListItems = Array(200)
  .fill()
  .map((_, i) => ({ title: i, id: i }));

const Item = ({ title }) => (
  <View
    style={{
      backgroundColor: '#f9c2ff',
      padding: 20,
      marginVertical: 8,
      marginHorizontal: 16,
    }}>
    <Text>{title}</Text>
  </View>
);

export default function App() {
  const renderItem = ({ item }) => <Item title={item.title} />;
  const keyExtractor = (item) => item.id;

  return (
    <View style={{ height: 300 }}>
      <FlatList
        initialNumToRender={10}
        data={flatListItems}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
      />
    </View>
  );
}

to set renderItem and keyExtractor to named functions.

And we set initialNumToRender to 10 to only render the first 10 items when the FlatList is mounted.

Conclusion

To fix slow performance when rendering 100+ items in a React Native FlatList, we can set the initialNumToRender prop to set how many items are rendered the first time.

We can also replace anonymous functions in props with named functions.

Sometimes, we want to determine if a device is iPhone or iPad with React Native

In this article, we’ll look at how to determine if a device is iPhone or iPad with React Native.

How to determine if a device is iPhone or iPad with React Native?

To determine if a device is iPhone or iPad with React Native, we can use the Platform.isPad property.

If it’s true, then it’s an iPad. If it’s false, it’s an iPhone.

Otherwise, it’s undefined.

For instance, we write:

import * as React from 'react';
import { FlatList, Text, View } from 'react-native';
import { Platform } from 'react-native';

export default function App() {
  console.log(Platform.isPad);

  return <View style={{ height: 300 }}></View>;
}

to log the value of Platform.isPad.

If it’s true, then it’s an iPad.

Conclusion

To determine if a device is iPhone or iPad with React Native, we can use the Platform.isPad property.

If it’s true, then it’s an iPad. If it’s false, it’s an iPhone.

Otherwise, it’s undefined.

Sometimes, we want to invert a FlatList with React Native.

In this article, we’ll look at how to invert a FlatList with React Native.

How to invert a FlatList with React Native?

To invert a FlatList with React Native, we can add the inverted prop.

For instance, we write:

import * as React from 'react';
import { FlatList, Text, View } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

const flatListItems = Array(200)
  .fill()
  .map((_, i) => ({ title: i, id: i }));

const Item = ({ title }) => (
  <View
    style={{
      backgroundColor: '#f9c2ff',
      padding: 20,
      marginVertical: 8,
      marginHorizontal: 16,
    }}>
    <Text>{title}</Text>
  </View>
);

export default function App() {
  const renderItem = ({ item }) => <Item title={item.title} />;

  return (
    <View style={{ height: 300 }}>
      <FlatList
        inverted
        data={flatListItems}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
}

to add the inverted prop to the FlatList.

Now the items are displayed in reversed order and we scroll up to scroll through the list instead of down.

Conclusion

To invert a FlatList with React Native, we can add the inverted prop.

Sometimes, we want to store tokens in React Native.

In this article, we’ll look at how to store tokens in React Native.

How to store tokens in React Native?

To store tokens in React Native, we can use the expo-secure-store package.

To install it, we run expo install expo-secure-store.

Then we write:

import * as React from 'react';
import { Text, View, ScrollView } from 'react-native';
import Constants from 'expo-constants';
import * as SecureStore from 'expo-secure-store';

export default function App() {
  const getToken = async () => {
    await SecureStore.setItemAsync('secureToken', 'secret');
    const token = await SecureStore.getItemAsync('secureToken');
    console.log(token);
  };

  React.useEffect(() => {
    getToken();
  }, []);

  return <View></View>;
}

to call SecureStore.setItemAsync with the key and value to store the entry.

And then we call SecureStore.getItemAsync with the key to return a promise with the entry with the given key.

Finally, we call getToken tin the useEffect callback to run it when App mounts.

Therefore, we see 'secret' logged.

Conclusion

To store tokens in React Native, we can use the expo-secure-store package.

To install it, we run expo install expo-secure-store.