Category: React Native Answers

Sometimes, we want to style an Alert element in React Native.

In this article, we’ll look at how to style an Alert element in React Native.

How to style an Alert element in React Native?

To style an Alert element in React Native, we can use the react-native-modalbox package.

We run npm i react-native-modalbox to install it.

Then we write:

import * as React from 'react';
import { View, Text } from 'react-native';
import Modal from 'react-native-modalbox';

export default function App() {
  const ref = React.useRef();

  React.useEffect(() => {
    ref.current.open();
  }, []);

  return (
    <View>
      <Modal style={{ background: 'red' }} ref={ref}>
        <Text style={{ color: 'green' }}>Basic modal</Text>
      </Modal>
    </View>
  );
}

to add the Modal component from the package.

We assign a ref to it and then we call open on it to open the modal.

Conclusion

To style an Alert element in React Native, we can use the react-native-modalbox package.

Sometimes, we want to add a click listener in FlatList with React Native.

In this article, we’ll look at how to add a click listener in FlatList with React Native.

How to add a click listener in FlatList with React Native?

To add a click listener in FlatList with React Native, we can set the onPress prop to a function.

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}
      />
    </View>
  );
}

to set onPress to a function that logs the item in the Item component.

As a result, when we press on the text, we see the item object logged.

Conclusion

To add a click listener in FlatList with React Native, we can set the onPress prop to a function.

Sometimes, we want to change Text component value dynamically with React Native.

In this article, we’ll look at how to change Text component value dynamically with React Native.

How to change Text component value dynamically with React Native?

To change Text component value dynamically with React Native, we can use a state.

For instance, we write:

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

export default function App() {
  const [myText, setMyText] = React.useState('Original Text');
  return (
    <View>
      <Text onPress={() => setMyText('Changed Text')}>{myText}</Text>
    </View>
  );
}

to define the myText state with useState with initial value set to 'Original Text'.

Then we call setMyText to change the text value when we press the Text component.

As a result, when we press on Text, the text inside changes to 'Changed Text'.

Conclusion

To change Text component value dynamically with React Native, we can use a state.

Sometimes, we want to truncate text component using number of lines with React Native.

In this article, we’ll look at how to truncate text component using number of lines with React Native.

How to truncate text component using number of lines with React Native?

To truncate text component using number of lines 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() {
  return (
    <Text numberOfLines={NUM_OF_LINES} ellipsizeMode="tail">
      {SOME_LONG_TEXT_BLOCK}
    </Text>
  );
}

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

We set ellipsizeMode to 'tail' to add the ellipsis after the truncated text.

Conclusion

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

Sometimes, we want to import color variables into styles with React Native.

In this article, we’ll look at how to import color variables into styles with React Native.

How to import color variables into styles with React Native?

To import color variables into styles with React Native, we can use export to export the color variables.

For instance, we write:

colors.js

export const COLORS = {
  white: '#fff',
  green: 'green',
};

to create the color.js module.

Then we write:

App.js

import * as React from 'react';
import { View, TouchableHighlight, Text } from 'react-native';
import { COLORS } from './colors.js';
export default function App() {
  return (
    <View>
      <Text style={{ color: COLORS.green }}>hello</Text>
    </View>
  );
}

to import the COLORS variable with

import { COLORS } from './colors.js';

And we use it to set the color style of the Text component.

As a result, we see that the text is green.

Conclusion

To import color variables into styles with React Native, we can use export to export the color variables.