Category: React Native Answers

Sometimes, we want to add space between two elements on the same line in React Native.

In this article, we’ll look at how to add space between two elements on the same line in React Native.

How to add space between two elements on the same line in React Native?

To add space between two elements on the same line in React Native, we can set justifyContent to 'space-between' in the View.

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', justifyContent: 'space-between' }}>
      <Text>foo</Text>
      <Text>bar</Text>
    </View>
  );
}

to set the flexDirection to 'row' and the justifyContent style to 'space-between' to spread the Text components on the screen.

As a result, we should see ‘foo’ displayed on the left side and ‘bar’ on the right.

Conclusion

To add space between two elements on the same line in React Native, we can set justifyContent to 'space-between' in the View.

Sometimes, we want to disable iOS keyboard suggestions in React Native.

In this article, we’ll look at how to disable iOS keyboard suggestions in React Native.

How to disable iOS keyboard suggestions in React Native?

To disable iOS keyboard suggestions in React Native, we can set the autoCorrect prop to false.

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() {
  return (
    <View style={{ padding: 30 }}>
      <TextInput autoCorrect={false} />
    </View>
  );
}

to set autoCorrect to false.

Now the keyboard suggestions should be hidden in iOS.

Conclusion

To disable iOS keyboard suggestions in React Native, we can set the autoCorrect prop to false.

Sometimes, we want to remove underline in TextInput in React Native.

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

How to remove underline in TextInput in React Native?

To remove underline in TextInput in React Native, we can set the underlineColorAndroid prop to transparent.

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() {
  return (
    <View style={{ padding: 30 }}>
      <TextInput underlineColorAndroid="transparent" placeholder="Name" />
    </View>
  );
}

to set the underlineColorAndroid prop of the TextInput to 'transparent' to remove the TextInput underline.

Conclusion

To remove underline in TextInput in React Native, we can set the underlineColorAndroid prop to transparent.

Sometimes, we want to fit an Image to the full width of the screen and maintain aspect ratio with React Native.

In this article, we’ll look at how to fit an Image to the full width of the screen and maintain aspect ratio with React Native.

How to fit an Image to the full width of the screen and maintain aspect ratio with React Native?

To fit an Image to the full width of the screen and maintain aspect ratio with React Native, we can set the width to null and the height to the height we want.

For instance, we write:

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

export default function App() {
  return (
    <View>
      <Image
        style={{
          height: 300,
          flex: 1,
          width: null,
        }}
        source={{ uri: 'https://picsum.photos/200/100' }}
      />
    </View>
  );
}

to set the height of the Image to 300 and the width to null to fit the Image to make the width flexible and maintain aspect ratio.

We set flex to 1 to make stretch the Image to the width of the screen.

Conclusion

To fit an Image to the full width of the screen and maintain aspect ratio with React Native, we can set the width to null and the height to the height we want.

Sometimes, we want to get the current page in FlatList when using pagingEnabled with React-Native.

In this article, we’ll look at how to get the current page in FlatList when using pagingEnabled with React-Native.

How to get the current page in FlatList when using pagingEnabled with React-Native?

To get the current page in FlatList when using pagingEnabled with React-Native, we can calculate it from the scroll distance.

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;
  const dimensions = Dimensions.get('window');
  const onMomentumScrollEnd = (e) => {
    const pageNumber = Math.min(
      Math.max(
        Math.floor(e.nativeEvent.contentOffset.x / dimensions.width + 0.5) + 1,
        0
      ),
      flatListItems.length
    );
    console.log(pageNumber);
  };

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

to define the onMomentumScrollEnd which gets the width of the screen with Dimensions.get.

Then we get the page number with

const pageNumber = Math.min(
  Math.max(
    Math.floor(e.nativeEvent.contentOffset.x / dimensions.width + 0.5) + 1,
    0
  ),
  flatListItems.length
)

to divide the horizontal scroll distance e.nativeEvent.contentOffset.x by dimensions.width.

Now when we stop scrolling, we should see the page number logged.

Conclusion

To get the current page in FlatList when using pagingEnabled with React-Native, we can calculate it from the scroll distance.