Category: React Native Answers

Sometimes, we want to use moment.js in React Native.

In this article, we’ll look at how to use moment.js in React Native.

How to use moment.js in React Native?

To use moment.js in React Native, we can install it with NPM.

To install it, we run

npm install moment --save

Then we use it by writing

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

export default function App() {
  return (
    <View>
      <Text>{moment().format('YYYY-MM-DD')}</Text>
    </View>
  );
}

We import it with import moment from 'moment'.

Then we use moment().format('YYYY-MM-DD') to show the current date in YYYY-MM-DD format.

Conclusion

To use moment.js in React Native, we can install it with NPM.

Sometimes, we want to loop and render elements in React Native.

In this article, we’ll look at how to loop and render elements in React Native.

How to loop and render elements in React Native?

To loop and render elements in React Native, we can use the JavaScript array map method.

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

const arr = [1,2,3,4,5]

export default function App() {

  return (
    <View>
     {arr.map(a=>{
       return <Text key={a}>{a}</Text>
     })}
    </View>
  );
}

to call arr.map with a callback to return the Text component with the entry a as the text.

We set the key prop to a unique value for each entry so that React can identify the rendered components.

Therefore, we see

1
2
3
4
5

rendered.

Conclusion

To loop and render elements in React Native, we can use the JavaScript array map method.

Sometimes, we want to detect when keyboard is opened or closed in React Native.

In this article, we’ll look at how to detect when keyboard is opened or closed in React Native.

How to detect when keyboard is opened or closed in React Native?

To detect when keyboard is opened or closed in React Native, we can call Keyboard.addListener to listen to the 'keybvoardDidShow' and 'keyboardDidHide' events to watch for the keyboard showing and hiding respectively.

For instance, we write:

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

export default function App() {
  const [keyboardShow, setKeyboardShow] = React.useState();
  React.useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      () => {
        setKeyboardShow(true);
      }
    );
    const keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      () => {
        setKeyboardShow(false);
      }
    );

    return () => {
      keyboardDidHideListener.remove();
      keyboardDidShowListener.remove();
    };
  }, []);

  return (
    <View>
      <TextInput placeholder="input" style={{ marginTop: 100 }} />
      {keyboardShow && <Text>keyboard show</Text>}
    </View>
  );
}

to call Keyboard.addListener to listen to the events.

The callback we pass into addListener runs when the events are emitted.

In the function we return the useEffect callback, we remove the listeners with remove when we unmount the component.

Therefore, we see ‘keyboard show’ when we tap of the input.

Conclusion

To detect when keyboard is opened or closed in React Native, we can call Keyboard.addListener to listen to the 'keybvoardDidShow' and 'keyboardDidHide' events to watch for the keyboard showing and hiding respectively.

Sometimes, we want to get TextInput value with React Native.

In this article, we’ll look at how to get TextInput value with React Native.

How to get TextInput value with React Native?

To get TextInput value with React Native, we can get it from the onChangeText callback.

For instance, we write:

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

export default function App() {
  const [username, setUsername] = React.useState();

  return (
    <View>
      <TextInput
        onChangeText={(username) => setUsername(username)}
        value={username}
      />
      <Text>{username}</Text>
    </View>
  );
}

to set the onChangeText prop of the TextInput to a function that takes the input value as the argument.

In the function, we call setUsername to set the username value to the TextInput‘s value.

Therefore, when we type into the input, we see the same value displayed in the Text component.

Conclusion

To get TextInput value with React Native, we can get it from the onChangeText callback.

Sometimes, we want to maintain aspect ratio of image with full width in React Native.

In this article, we’ll look at how to maintain aspect ratio of image with full width in React Native.

How to maintain aspect ratio of image with full width in React Native?

To maintain aspect ratio of image with full width in React Native, we can set the aspectRatio style property.

For instance, we write:

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

export default function App() {
  const win = Dimensions.get('window');
  const ratio = win.width / 200;

  return (
    <View>
      <Image
        source="https://picsum.photos/200/300"
        style={{
          width: '100%',
          height: undefined,
          aspectRatio: 135 / 76,
        }}
      />
    </View>
  );
}

to add an Image with the width set to '100%'.

And we set the height to undefined to keep the aspect ratio and set the aspectRatio property to set the aspect ratio of the image.

Conclusion

To maintain aspect ratio of image with full width in React Native, we can set the aspectRatio style property.