Category: React Native Answers

Sometimes, we want to set elevation shadow only on the bottom on React Native.

In this article, we’ll look at how to set elevation shadow only on the bottom on React Native.

How to set elevation shadow only on the bottom on React Native?

To set elevation shadow only on the bottom on React Native, we wrap out View with another View and set its overflow to 'hidden'.

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={{ overflow: 'hidden', paddingBottom: 5 }}>
      <View
        style={{
          backgroundColor: '#fff',
          width: 300,
          height: 60,
          shadowColor: '#000',
          shadowOffset: { width: 1, height: 1 },
          shadowOpacity: 0.4,
          shadowRadius: 3,
          elevation: 5,
        }}
      />
    </View>
  );
}

to set overflow to 'hidden' on the outer View.

And then we add the shadow styles in the inner view to add the shadow.

elevation is needed for Android to show the shadow.

Conclusion

To set elevation shadow only on the bottom on React Native, we wrap out View with another View and set its overflow to 'hidden'.

Sometimes, we want to make component stick to bottom in ScrollView but still allow other content to push it down with React Native.

In this article, we’ll look at how to make component stick to bottom in ScrollView but still allow other content to push it down with React Native.

How to make component stick to bottom in ScrollView but still allow other content to push it down with React Native?

To make component stick to bottom in ScrollView but still allow other content to push it down with React Native.

For instance, we write:

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

export default function App() {
  return (
    <ScrollView
      contentContainerStyle={{
        flexGrow: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
      }}>
      <View style={{ width: 50, height: 1000, backgroundColor: 'orange' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'black' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'blue' }} />
    </ScrollView>
  );
}

to add 3 Views that has different heights.

They’ll be display on top of each other since we set flexDirection to 'column'.

Conclusion

To make component stick to bottom in ScrollView but still allow other content to push it down with React Native.

Sometimes, we want to add text like an HTML span with React Native.

In this article, we’ll look at how to add text like an HTML span with React Native.

How to add text like an HTML span with React Native?

To add text like an HTML span with React Native, we can nest Text components.

For instance, we write:

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

export default function App() {
  return (
    <View>
      <Text>
        <Text>foo</Text>
        <Text>bar</Text>
      </Text>
    </View>
  );
}

to add 2 Text components beside each other in an outer Text component.

Therefore, we see ‘foobar’ on the screen since they’re displayed inline.

Conclusion

To add text like an HTML span with React Native, we can nest Text components.

Sometimes, we want to see what’s stored in AsyncStorage with React Native.

In this article, we’ll look at how to see what’s stored in AsyncStorage with React Native.

How to see what’s stored in AsyncStorage with React Native?

To see what’s stored in AsyncStorage with React Native, we can use the getAllKeys and multiGet methods.

For instance, we write:

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

export default function App() {
  const getEntries = async () => {
    await AsyncStorage.setItem('key', 'val');
    await AsyncStorage.setItem('key2', 'val');
    await AsyncStorage.setItem('key3', 'val');    
    const keys = await AsyncStorage.getAllKeys();
    const entries = await AsyncStorage.multiGet(keys);
    console.log(entries);
  };

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

  return <View></View>;
}

to call setItem with 3 key-value entries.

Then we call getAllKeys to return all entries for all the keys.

Next, we call multiGet with keys to return an array with the entries with the given keys.

And then we call getEntries in the useEffect callback to run it.

Conclusion

To see what’s stored in AsyncStorage with React Native, we can use the getAllKeys and multiGet methods.

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 can set keyExtractor to a function that returns the unique ID value for each entry.

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 (item) => item.id to return the id property of a flatListItems entry.

Conclusion

To use a keyExtractor with FlatList with React Native, we can set keyExtractor to a function that returns the unique ID value for each entry.