Category: React Native Answers

Sometimes, we want to fix textDecoration properties not working on Android with React Native.

In this article, we’ll look at how to fix textDecoration properties not working on Android with React Native.

How to fix textDecoration properties not working on Android with React Native?

To fix textDecoration properties not working on Android with React Native, we can set the textDecorationLine, textDecorationStyle and textDecorationColor styles.

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
        style={{
          textDecorationLine: 'underline',
          textDecorationStyle: 'solid',
          textDecorationColor: '#000',
        }}>
        hello
      </Text>
    </View>
  );
}

to set textDecorationLine to 'underline' to add text underline.

textDecorationStyle set to 'solid' makes the underline solid.

textDecorationColor set the underline color.

Conclusion

To fix textDecoration properties not working on Android with React Native, we can set the textDecorationLine, textDecorationStyle and textDecorationColor styles.

Somwtimes, we want to add a 2 column layout with flexbox on React Native.

In this article, we’ll look at how to add a 2 column layout with flexbox on React Native.

How to add a 2 column layout with flexbox on React Native?

To add a 2 column layout with flexbox on React Native, we can set flexDirection to 'row' and flexWrap to 'wrap'.

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 style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
      {Array(100)
        .fill()
        .map((_, i) => {
          return (
            <View style={{ width: '50%' }}>
              <Text>{i}</Text>
            </View>
          );
        })}
    </View>
  );
}

to set flexDirection and flexWrap so we get a horizontal flex layout and we wrap overflowing components to the next row.

Then we set each View‘s width to 50% so that they take half the width of the screen.

Conclusion

To add a 2 column layout with flexbox on React Native, we can set flexDirection to 'row' and flexWrap to 'wrap'.

Sometimes, we want to set width style to a percentage number with React Native.

In this article, we’ll look at how to set width style to a percentage number with React Native.

How to set width style to a percentage number with React Native?

To set width style to a percentage number with React Native, we can use flexbox.

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 style={{ flexDirection: 'row' }}>
      <Text style={{ flexGrow: 1 }}>foo</Text>
      <Text style={{ width: '20%' }}>bar</Text>
    </View>
  );
}

to set flexDirection to 'row' to add a horizontal flexbox layout.

We set the 2nd Text component to fill 20% of the screen.

Then we set flexGrow to 1 on the first Text component to expand to fill the remaining width of the screen.

Conclusion

To set width style to a percentage number with React Native, we can use flexbox.

Sometimes, we want to change the height of a FlatList in React Native.

In this article, we’ll look at how to change the height of a FlatList in React Native.

How to change the height of a FlatList in React Native?

To change the height of a FlatList in React Native, we can set the height style of the FlatList.

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 = ({ 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} />;
  const keyExtractor = (item) => item.id;

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

to set the height of the FlatList to 300px.

Conclusion

To change the height of a FlatList in React Native, we can set the height style of the FlatList.

Sometimes, we want to determine number of lines of Text component with React Native.

In this article, we’ll look at how to determine number of lines of Text component with React Native.

How to determine number of lines of Text component with React Native?

To determine number of lines of Text component with React Native, we can get it from the onTextLayout callback’s parameter.

For instance, we write:

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

const NUM_OF_LINES = 3;
const SOME_LONG_TEXT_BLOCK =
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pulvinar sem at leo dapibus maximus. Pellentesque nec scelerisque ipsum. Vestibulum sit amet orci vel augue suscipit maximus. Morbi malesuada augue eu sapien iaculis laoreet. Nunc augue purus, ultricies at auctor non, dapibus a ligula. Integer rutrum congue erat a rutrum. ';

export default function App() {
  const [showMore, setShowMore] = React.useState(false);
  const onTextLayout = React.useCallback((e) => {
    setShowMore(e.nativeEvent.lines.length > NUM_OF_LINES);
  }, []);

  return (
    <Text numberOfLines={NUM_OF_LINES} onTextLayout={onTextLayout}>
      {SOME_LONG_TEXT_BLOCK}
    </Text>
  );
}

to set numberOfLines to NUM_OF_LINES to restrict the number of lines to display.

Then we set the onTextLayout prop to the onTextLayout function and get the number of lines displayed with e.nativeEvent.lines.length .

And if e.nativeEvent.lines.length is bigger than NUM_OF_LINES.

We call setShowMore to set showMore to true.

Conclusion

To determine number of lines of Text component with React Native, we can get it from the onTextLayout callback’s parameter.