Category: React Native Answers

Sometimes, we want to set up a table layout in React Native.

In this article, we’ll look at how to set up a table layout in React Native.

How to set up a table layout in React Native?

To set up a table layout in React Native, we can nest views.

For instance, we write:

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

const renderRow = (item) => {
  return (
    <View
      style={{ flex: 1, alignSelf: 'stretch', flexDirection: 'row' }}
      key={item}>
      <View style={{ flex: 1, alignSelf: 'stretch' }}>
        <Text>{item}</Text>
      </View>
      <View style={{ flex: 1, alignSelf: 'stretch' }}>
        <Text>{item}</Text>
      </View>
      <View style={{ flex: 1, alignSelf: 'stretch' }}>
        <Text>{item}</Text>
      </View>
    </View>
  );
};

export default function App() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      {Array(5)
        .fill()
        .map((_, i) => {
          return renderRow(i);
        })}
    </View>
  );
}

to create the renderRow function that renders a View with Views inside.

We make them display side by side by setting flexDirection to 'row'.

And we make the outer View span the width of the outermost View by setting alignSelf to 'stretch' and flex to 1.

Finally, we call renderRow in the map callback to render the nested Views in renderRow.

Conclusion

To set up a table layout in React Native, we can nest views.

Sometimes, we want to add a full width button with flex-box in React Native.

In this article, we’ll look at how to add a full width button with flex-box in React Native.

How to add a full width button with flex-box in React Native?

To add a full width button with flex-box in React Native, we can set the alignSelf style to 'stretch'.

For instance, we write:

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

export default function App() {
  return (
    <View>
      <Button title="button" style={{ alignSelf: 'stretch' }} />
    </View>
  );
}

to add a Button with the alignSelf style set to 'stretch' to make the button stretch to the width of the screen.

Conclusion

To add a full width button with flex-box in React Native, we can set the alignSelf style to 'stretch'.

Sometimes, we want to add a transparent overlay in React Native.

In this article, we’ll look at how to add a transparent overlay in React Native.

How to add a transparent overlay in React Native?

To add a transparent overlay in React Native, we can use the ImageBackground component.

For instance, we write:

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

const s = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    width: null,
    height: null,
    backgroundColor: 'red',
    opacity: 0.3,
  },
});

export default function App() {
  return (
    <ImageBackground
      source={{ uri: 'https://picsum.photos/200/300' }}
      style={s.backgroundImage}>
      <View />
    </ImageBackground>
  );
}

to add an ImageBackground with the source set to an object with the uri of the background image.

And we add the backgroundImage style that sets opacity to 0.3 to add a transparent overlay over the image.

Conclusion

To add a transparent overlay in React Native, we can use the ImageBackground component.

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.