Category: React Native Answers

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.

To fix ScrollView is not scrolling to the bottom sometimes issue with React Native, we can set the contentContainerStyle to add some bottom padding.

For instance, we write:

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

export default function App() {
  return (
    <View>
      <ScrollView
        contentContainerStyle={{ paddingBottom: 60 }}
        style={{ height: 300 }}>
        {Array(100)
          .fill()
          .map((_, i) => (
            <Text key={i}>{i}</Text>
          ))}
      </ScrollView>
    </View>
  );
}

to set contentContainerStyle to { paddingBottom: 60 } to add 60px of bottom padding on the ScrollView.

Anything inside the ScrollView will scroll.

Sometimes, we want to make image width 100 percent and vertical top with React Native.

In this article, we’ll look at how to make image width 100 percent and vertical top with React Native.

How to make image width 100 percent and vertical top with React Native?

To make image width 100 percent and vertical top with React Native, we can calculate the width and height of the image.

For instance, we write:

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

export default function App() {
  const dimensions = Dimensions.get('window');
  const imageHeight = Math.round((dimensions.width * 9) / 16);
  const imageWidth = dimensions.width;

  return (
    <View>
      <Image
        style={{ height: imageHeight, width: imageWidth }}
        source={{ uri: 'https://picsum.photos/200/300' }}
      />
    </View>
  );
}

to call Dimensions.get with 'window' to get the screen dimensions.

Then we set the imageHeight and imageWidth according to the screen dimensions.

We scale the imageHeight to keep the 16:9 aspect ratio for the image.

Conclusion

To make image width 100 percent and vertical top with React Native, we can calculate the width and height of the image.

Sometimes, we want to set the focus style for TextInput in React Native.

In this article, we’ll look at how to set the focus style for TextInput in React Native.

How to set the focus style for TextInput in React Native?

To set the focus style for TextInput in React Native, we can set the style in the focus and blur handlers.

For instance, we write:

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

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

  return (
    <View>
      <TextInput
        onBlur={() => setBackgroundColor('yellow')}
        onFocus={() => setBackgroundColor('orange')}
        style={{
          backgroundColor,
        }}
        placeholder="Name"
      />
    </View>
  );
}

to set the onBlur and onFocus props to the blur and focus event handlers.

onBlur is called when the text input loses focus.

In the handler functions, we call setBackgroundColor to the background color of the text inputs.

And we set the style prop to the backgroundColor.

As a result, we see the background colors applied when we focus on and away from the text input.

Conclusion

To set the focus style for TextInput in React Native, we can set the style in the focus and blur handlers.