Category: React Native Answers

Sometimes, we want to fix onclick function is not working in a React Native app.

In this article, we’ll look at how to fix onclick function is not working in a React Native app.

How to fix onclick function is not working in a React Native app?

To fix onclick function is not working in a React Native app, we should replace onclick with onPress.

For instance, we write:

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

export default function App() {
  const onPress = () => console.log('pressed');

  return (
    <View>
      <TouchableOpacity onPress={onPress}>
        <View>
          <Text>...</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
}

to set the onPress prop to the onPress function.

Now when we press the text, we should see 'pressed' logged.

Conclusion

To fix onclick function is not working in a React Native app, we should replace onclick with onPress.

Sometimes, we want to add a PDF viewer in React Native.

In this article, we’ll look at how to add a PDF viewer in React Native.

How to add a PDF viewer in React Native?

To add a PDF viewer in React Native, we can add a WebView and use Google Drive’s PDF viewer.

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 pdfUrl = 'http://www.africau.edu/images/default/sample.pdf';

  return (
    <View style={{ flex: 1 }}>
      <WebView
        source={{
          uri: `https://drive.google.com/viewerng/viewer?embedded=true&url=${pdfUrl}`,
        }}
      />
    </View>
  );
}

to add a WebView with the source set to an object with the uri set to the Google Drive PDF viewer URL.

As a result, we should see the PDF viewer rendered in the WebView.

How to add a PDF viewer in React Native?

To add a PDF viewer in React Native, we can add a WebView and use Google Drive’s PDF viewer.

Sometimes, we want to add a horizontal FlatList in React Native.

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

How to add a horizontal FlatList in React Native?’

To add a horizontal FlatList in React Native, we just set the horizontal prop of the FlatList to true.

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
        horizontal
        data={flatListItems}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
      />
    </View>
  );
}

to add horizontal to FlatList.

As a result, we can scroll through the FlatList items horizontally.

Conclusion

To add a horizontal FlatList in React Native, we just set the horizontal prop of the FlatList to true.

Sometimes, we want to set fixed width to individual characters with React Native.

In this article, we’ll look at how to set fixed width to individual characters with React Native.

How to set fixed width to individual characters with React Native?

To set fixed width to individual characters with React Native, we set the font to a monospaced font.

For instance, we write:

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

export default function App() {
  const fontFamily = Platform.OS === 'ios' ? 'Courier' : 'monospace';

  return (
    <View style={{ padding: 30 }}>
      <Text style={{ fontFamily }}>hello world</Text>
    </View>
  );
}

to set the fontFamily to a monospaced font according to the platform.

If it’s iOS, we set it to 'Courier'.

Otherwise, we use 'monospace'.

We get the OS the device is running on with Platform.OS.

Conclusion

To set fixed width to individual characters with React Native, we set the font to a monospaced font.

Sometimes, we want to get the value in TextInput when onBlur is called with React Native.

In this article, we’ll look at how to get the value in TextInput when onBlur is called with React Native.

How to get the value in TextInput when onBlur is called with React Native?

To get the value in TextInput when onBlur is called with React Native, we can get the value from the onEndEditing callback.

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
        onEndEditing={(e) => console.log(e.nativeEvent.text)}
        placeholder="Name"
      />
    </View>
  );
}

to set onEndEditing to (e) => console.log(e.nativeEvent.text) after we press enter.

Conclusion

To get the value in TextInput when onBlur is called with React Native, we can get the value from the onEndEditing callback.