Category: React Native Answers

Sometimes, we want to use setTimeout in React Native.

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

How to use setTimeout in React Native?

To use setTimeout in React Native, we can call it directly.

For instance, we write:

import * as React from 'react';
import { ScrollView, View, 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 [loaded, setLoaded] = React.useState(false);
  React.useEffect(() => {
    setTimeout(() => {
      setLoaded(true);
    }, 3000);
  }, []);

  return <View>{loaded && <Text>loaded</Text>}</View>;
}

We call setTimeout with a callback that calls setLoaded to set loaded to true in 3000 milliseconds.

Then we show ‘loaded’whenloadedistrue`.

Therefore, ‘loaded’ is shown after 3 seconds.

Conclusion

To use setTimeout in React Native, we can call it directly.

To set image width to be 100% and height to be auto in React Native, we can set the width and height of the Image.

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
      style={{
        flexGrow: 1,
      }}>
      <Image
        source="https://picsum.photos/200/300"
        style={{
          width: win.width,
          height: 300 * ratio,
        }}
      />
    </View>
  );
}

to call Dimensions.get with 'window' to get the window’s dimension.

Then we calculate the ratio between the width and height of the image with win.width / 200, where 200 is the width of the image.

Then we set the width to win.width and the height to 300 * ratio where 300 is the height of the image.can set the width and height of the Image.

Sometimes, we want to do vertical centering when using ScrollView with React Native.

In this article, we’ll look at how to do vertical centering when using ScrollView with React Native.

How to do vertical centering when using ScrollView with React Native?

To do vertical centering when using ScrollView with React Native, we can set the contentContainerStyle prop to an object with some flexbox styles.

For instance, we write:

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

export default function App() {
  return (
    <View
      style={{
        flexGrow: 1,
      }}>
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          justifyContent: 'center',
          flexDirection: 'column',
        }}>
        {Array(200)
          .fill()
          .map((_, i) => {
            return <Text>{i}</Text>;
          })}
      </ScrollView>
    </View>
  );
}

We set the contentContainerStyle prop to:

{
  flexGrow: 1,
  justifyContent: 'center',
  flexDirection: 'column',
}

to expand the ScrollView to fit the View.

And we set justifyContent to 'center' to center align the ScrollView.

We set the flexDirection to 'column' to vertically justify items.

Conclusion

To do vertical centering when using ScrollView with React Native, we can set the contentContainerStyle prop to an object with some flexbox styles.

Sometimes, we want to use z-index in React Native.

In this article, we’ll look at how to use z-index in React Native.

How to use z-index in React Native?

To use z-index in React Native, we can use the zIndex style.

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>
      <View
        style={{
          width: 100,
          height: 100,
          zIndex: 3,
          elevation: 3,
          backgroundColor: 'green',
          position: 'absolute',
        }}></View>
      <View
        style={{
          width: 100,
          height: 100,
          zIndex: 1,
          elevation: 3,
          backgroundColor: 'red',
          position: 'absolute',
          top: 5,
          left: 5,
        }}></View>
    </View>
  );
}

to add 2 Views that has different zIndex values.

The component with the higher zIndex value is laid over the component with the lower zIndex value.

So the green square goes on top of the red square.

Also, we need to set position to apply the zIndex value.

Conclusion

To use z-index in React Native, we can use the zIndex style.

Sometimes, we want to create CSS circles in React Native.

In this article, we’ll look at how to create CSS circles in React Native.

How to create CSS circles in React Native?

To create CSS circles in React Native, we can set the borderRadius style to '50%'.

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={{
        width: 100,
        height: 100,
        borderRadius: '50%',
        backgroundColor: 'green',
      }}></View>
  );
}

to set the width and height of the View.

Then we set borderRadius to '50%' to make it a circle.

We set the backgroundColor to add a background color to the circle.

Conclusion

To create CSS circles in React Native, we can set the borderRadius style to '50%'.