Category: React Native Answers

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 of the View that we wrap around the FlatList.

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
        data={flatListItems}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
}

to set the height of the View to 300px to make the height of the FlatList 300px.

Conclusion

To change the height of a FlatList in React Native, we can set the height of the View that we wrap around the FlatList.

Sometimes, we want to change background color of React Native button.

In this article, we’ll look at how to change background color of React Native button.

How to change background color of React Native button?

To change background color of React Native button, we can set the color prop for Android and we set the backgroundColor for iOS.

For instance, we write:

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

export default function App() {
  return (
    <View style={{ padding: 30 }}>
      <Button title="Login Android" color="#1E6738" />
      <TouchableOpacity style={{ backgroundColor: '#1E6738' }}>
        <Text style={{ color: '#fff', textAlign: 'center' }}>Login iOS</Text>
      </TouchableOpacity>
    </View>
  );
}

to add <Button title="Login Android" color="#1E6738" /> add a button with the background color set to #1E6738 for Android.

Then for iOS, we write set the backgroundColor on the TouchableOpacity component to add the background color.

And we set the text color in the Text component.

Conclusion

To change background color of React Native button, we can set the color prop for Android and we set the backgroundColor for iOS.

Sometimes, we want to centralize text in React Native TextInput.

In this article, we’ll look at how to centralize text in React Native TextInput.

How to centralize text in React Native TextInput?

To centralize text in React Native TextInput, we can set the textAlign prop to 'center'.

For instance, we write:

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

export default function App() {
  return (
    <View style={{ padding: 30 }}>
      <TextInput textAlign="center" placeholder="Your Account" />
    </View>
  );
}

to set the textAlign prop to 'center' to make the placeholder and input value centered on the screen.

Conclusion

To centralize text in React Native TextInput, we can set the textAlign prop to 'center'.

Sometimes, we want to get the coordinates of a touch event with React Native.

In this article, we’ll look at how to get the coordinates of a touch event with React Native.

How to get the coordinates of a touch event with React Native?

To get the coordinates of a touch event with React Native, we can get it from the touch event object.

For instance, we write:

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

export default function App() {
  const onPress = (evt) => {
    console.log(evt.nativeEvent.locationX, evt.nativeEvent.locationY);
  };

  return (
    <View
      style={{
        height: '100%',
        width: '100%',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <TouchableOpacity onPress={onPress}>
        <Text>hello world</Text>
      </TouchableOpacity>
    </View>
  );
}

to set the TouchableOpacity‘s onPress prop to onPress.

Then we get the x and y coordinate of the touch from the evt.nativeEvent.locationX and locationY properties.

Conclusion

To get the coordinates of a touch event with React Native, we can get it from the touch event object.

Sometimes, we want to add horizontal ScrollView snapping with React Native.

In this article, we’ll look at how to add horizontal ScrollView snapping with React Native.

How to add horizontal ScrollView snapping with React Native?

To add horizontal ScrollView snapping with React Native, we can set the snapToAlignment prop to 'center'.

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
        horizontal
        decelerationRate={0}
        snapToInterval={200}
        snapToAlignment="center">
        {Array(100)
          .fill()
          .map((_, i) => (
            <Text
              key={i}
              style={{
                width: 100,
                height: 100,
                backgroundColor: 'green',
                margin: 10,
              }}>
              {i}
            </Text>
          ))}
      </ScrollView>
    </View>
  );
}

to add the horizontal prop to make the ScrollView scroll horizontally.

And we set snapToAlignment to 'center' to make the ScrollView snap element in the center of the screen.

Conclusion

To add horizontal ScrollView snapping with React Native, we can set the snapToAlignment prop to 'center'.