Category: JavaScript

Sometimes, we want to add a horizontal FlatList with multiple rows with React Native

In this article, we’ll look at how to add a horizontal FlatList with multiple rows with React Native.

How to add a horizontal FlatList with multiple rows with React Native?

To add a horizontal FlatList with multiple rows with React Native, we can set the numColumns prop.

For instance, we write:

import * as React from 'react';
import { FlatList, Text, View, Dimensions } 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 = (item) => {
  const { title } = item;
  return (
    <View
      style={{
        backgroundColor: '#f9c2ff',
        padding: 20,
        marginVertical: 8,
        marginHorizontal: 16,
      }}>
      <Text onPress={() => console.log(item)}>{title}</Text>
    </View>
  );
};

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

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

to set the numColumns prop of the FlatList to 3.

As a result, we should see 3 columns displayed in the FlatList.

Conclusion

To add a horizontal FlatList with multiple rows with React Native, we can set the numColumns prop.

Sometimes, we want to change font family for TextInput placeholder in React Native.

In this article, we’ll look at how to change font family for TextInput placeholder in React Native.

How to change font family for TextInput placeholder in React Native?

To change font family for TextInput placeholder in React Native, we can set the fontFamily style of the TextInput.

For instance, we write:

import * as React from 'react';
import { View, TextInput } from 'react-native';

export default function App() {
  const [value, setValue] = React.useState();

  return (
    <View>
      <TextInput
        style={{ fontFamily: 'courier' }}
        value={value}
        onChangeText={setValue}
      />
    </View>
  );
}

to set the fontFamily property to 'courier' to render the text inputted in the TextInput with Courier.

Conclusion

To change font family for TextInput placeholder in React Native, we can set the fontFamily style of the TextInput.

Sometimes, we want to detect swipe left in React Native.

In this article, we’ll look at how to detect swipe left in React Native.

How to detect swipe left in React Native?

To detect swipe left in React Native, we can use the react-native-swipe-gestures package.

To install it, we run npm i react-native-swipe-gestures.

Then we write:

import * as React from 'react';
import { View, Text } from 'react-native';
import GestureRecognizer, {
  swipeDirections,
} from 'react-native-swipe-gestures';

export default function App() {
  const onSwipe = (gestureName, gestureState) => {
    const { SWIPE_UP, SWIPE_DOWN, SWIPE_LEFT, SWIPE_RIGHT } = swipeDirections;
    console.log(gestureName);
  };

  return (
    <GestureRecognizer onSwipe={onSwipe}>
      <Text style={{ padding: 50 }}>hello</Text>
    </GestureRecognizer>
  );
}

to add the GestureRecognizer component which wraps around any component we want to detect swipes for.

Then we set the onSwipe prop to the onSwipe function.

And we can get the swipe direction from the gestureName.

gestureName is one of 'SWIPE_UP', 'SWIPE_DOWN', 'SWIPE_LEFT', 'SWIPE_RIGHT'.

gestureName is 'SWIPE_LEFT' when we swipe left.

Conclusion

To detect swipe left in React Native, we can use the react-native-swipe-gestures package.

To install it, we run npm i react-native-swipe-gestures.