Category: React Native Answers

Sometimes, we want to get current URL with React Native webview.

In this article, we’ll look at how to get current URL with React Native webview.

How to get current URL with React Native webview?

To get current URL with React Native webview, we can set the onNavigationStateChange prop to a function that listens for navigation events in the webview.

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';
import { WebView } from 'react-native-webview';

export default function App() {
  const onNavigationStateChange = (webViewState) => {
    console.log(webViewState.url);
  };

  return (
    <View style={{ flex: 1 }}>
      <WebView
        source={{ uri: 'https://example.com' }}
        onNavigationStateChange={onNavigationStateChange}
        javaScriptEnabled
        domStorageEnabled
        startInLoadingState={false}
      />
    </View>
  );
}

to set onNavigationStateChange to the onNavigationStateChange function.

In it, we log webViewState.url which has the URL of the current page in the webview.

Conclusion

To get current URL with React Native webview, we can set the onNavigationStateChange prop to a function that listens for navigation events in the webview.

Sometimes, we want to fix React Native text getting vertically cut off.

In this article, we’ll look at how to fix React Native text getting vertically cut off.

How to fix React Native text getting vertically cut off?

To fix React Native text getting vertically cut off, we should add padding to the Text component.

For instance, we write:

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

export default function App() {
  return (
    <View>
      <Text style={{ padding: 15 }}>text</Text>
    </View>
  );
}

to set the padding style to 15px on the Text component.

Now the text shouldn’t be cut off.

Conclusion

To fix React Native text getting vertically cut off, we should add padding to the Text component.

Sometimes, we want to add space between components in React Native styling.

In this article, we’ll look at how to add space between components in React Native styling.

How to add space between components in React Native styling?

To add space between components in React Native styling, we can add margins in each item.

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={{ flexDirection: 'column', flex: 6 }}>
      <View
        style={{
          flex: 2,
          flexDirection: 'row',
          justifyContent: 'space-between',
          marginBottom: 10,
        }}>
        <View
          style={{ backgroundColor: 'red', flex: 1, marginRight: 5 }}></View>
        <View
          style={{ backgroundColor: 'blue', flex: 1, marginLeft: 5 }}></View>
      </View>

      <View
        style={{
          flex: 2,
          flexDirection: 'row',
          justifyContent: 'space-between',
          marginBottom: 10,
        }}>
        <View
          style={{ backgroundColor: 'white', flex: 1, marginRight: 5 }}></View>
        <View
          style={{ backgroundColor: 'black', flex: 1, marginLeft: 5 }}></View>
      </View>

      <View
        style={{
          flex: 2,
          flexDirection: 'row',
          justifyContent: 'space-between',
          marginBottom: 10,
        }}>
        <View
          style={{ backgroundColor: 'gray', flex: 1, marginRight: 5 }}></View>
        <View
          style={{ backgroundColor: 'yellow', flex: 1, marginLeft: 5 }}></View>
      </View>
    </View>
  );
}

to add marginRight and marginLeft to each item to add gaps between each View.

Conclusion

To add space between components in React Native styling, we can add margins in each item.

Sometimes, we want to fix slow performance when rendering 100+ items in a React Native FlatList.

In this article, we’ll look at how to fix slow performance when rendering 100+ items in a React Native FlatList.

How to fix slow performance when rendering 100+ items in a React Native FlatList?

To fix slow performance when rendering 100+ items in a React Native FlatList, we can set the initialNumToRender prop to set how many items are rendered the first time.

We can also replace anonymous functions in props with named functions.

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

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

to set renderItem and keyExtractor to named functions.

And we set initialNumToRender to 10 to only render the first 10 items when the FlatList is mounted.

Conclusion

To fix slow performance when rendering 100+ items in a React Native FlatList, we can set the initialNumToRender prop to set how many items are rendered the first time.

We can also replace anonymous functions in props with named functions.

Sometimes, we want to determine if a device is iPhone or iPad with React Native

In this article, we’ll look at how to determine if a device is iPhone or iPad with React Native.

How to determine if a device is iPhone or iPad with React Native?

To determine if a device is iPhone or iPad with React Native, we can use the Platform.isPad property.

If it’s true, then it’s an iPad. If it’s false, it’s an iPhone.

Otherwise, it’s undefined.

For instance, we write:

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

export default function App() {
  console.log(Platform.isPad);

  return <View style={{ height: 300 }}></View>;
}

to log the value of Platform.isPad.

If it’s true, then it’s an iPad.

Conclusion

To determine if a device is iPhone or iPad with React Native, we can use the Platform.isPad property.

If it’s true, then it’s an iPad. If it’s false, it’s an iPhone.

Otherwise, it’s undefined.