Category: JavaScript

Sometimes, we want to make a GET request with query string with Fetch in React Native

In this article, we’ll look at how to make a GET request with query string with Fetch in React Native

How to make a GET request with query string with Fetch in React Native?

To make a GET request with query string with Fetch in React Native, we call encodeURIComponent on each query parameter value.

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() {
  const getReq = async () => {
    const data = { foo: 1, bar: 2 };

    const res = await fetch(
      `https://jsonplaceholder.typicode.com/todos/?foo=${encodeURIComponent(
        data.foo
      )}&bar=${encodeURIComponent(data.bar)}`,
      {
        method: 'GET',
      }
    );
    console.log(await res.json());
  };

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

  return <View></View>;
}

to call fetch with a URL with the foo and bar query parameters.

We set each query parameter value to a string that has been encoded with encodeURIComponent

We set the method to 'GET' to make a GET request.

Conclusion

To make a GET request with query string with Fetch in React Native, we call encodeURIComponent on each query parameter value.

Sometimes, we want to use a keyExtractor with FlatList with React Native.

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

How to use a keyExtractor with FlatList with React Native?

To use a keyExtractor with FlatList with React Native, we should set the keyExtractor prop to a function that returns the unique ID of the item.

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>
      <FlatList
        data={flatListItems}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
}

to set keyExtractor to a function that returns the id property of the flatListItems entry.

Conclusion

To use a keyExtractor with FlatList with React Native, we should set the keyExtractor prop to a function that returns the unique ID of the item.

Sometimes, we want to implement pull to refresh FlatList with React Native.

In this article, we’ll look at how to implement pull to refresh FlatList with React Native.

How to implement pull to refresh FlatList with React Native?

To implement pull to refresh FlatList with React Native, we can set the refreshing and onRefresh props.

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>
);

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

export default function App() {
  const [isFetching, setIsFetching] = React.useState(false);
  const renderItem = ({ item }) => <Item title={item.title} />;

  const onRefresh = async () => {
    setIsFetching(true);
    await sleep(2000);
    setIsFetching(false);
  };

  return (
    <View>
      <FlatList
        data={flatListItems}
        onRefresh={onRefresh}
        refreshing={isFetching}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
}

to set the refreshing prop to isFetching, which is true when we’re getting data for the FlatList.

And we set onRefresh to the onRefresh which sets refreshing to true and then set it back to false after 2 seconds.

Conclusion

To implement pull to refresh FlatList with React Native, we can set the refreshing and onRefresh props.

Sometimes, we want to add space between text lines in React Native.

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

How to add space between text lines in React Native?

To add space between text lines in React Native, we can set the lineHeight style.

For instance, we write:

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

export default function App() {
  return (
    <View>
      {Array(10)
        .fill()
        .map((_, i) => {
          return <Text style={{ lineHeight: 30 }}>{i}</Text>;
        })}
    </View>
  );
}

to render to Text components with the lineHeight of each set to 30 pixels.

As a result, we should see extra space between each line of text.

Conclusion

To add space between text lines in React Native, we can set the lineHeight style.

To fix ScrollView Not scrolling with React Native, we wrap the content of the ScrollView with the ScrollView.

For instance, we write:

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

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <ScrollView>
        {Array(200)
          .fill()
          .map((_, i) => {
            return <Text>{i}</Text>;
          })}
      </ScrollView>
    </View>
  );
}

to wrap ScrollView around the Text components that we render inside.

Anything inside the ScrollView will scroll.

As a result, we should see text inside and we can scroll up and down.