Category: JavaScript

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%'.

Sometimes, we want to set shadows in React Native.

In this article, we’ll look at how to set shadows in React Native.

How to set shadows in React Native?

To set shadows in React Native, we can add a few styles.

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={{
        shadowColor: 'black',
        shadowOpacity: 0.26,
        shadowOffset: { width: 0, height: 2 },
        shadowRadius: 10,
        elevation: 3,
        backgroundColor: 'white',
      }}>
      hello world
    </View>
  );
}

We set the shadowColor property to set the shadow color.

shadowOpacity sets the shadow opacity.

shadowOffset sets the shadow position relative to the container.

shadowRadius sets the shadow radius.

elevation sets the depth of the shadow.

Conclusion

To set shadows in React Native, we can add a few styles.

Sometimes, we want to run code when an animation is complete with React Native.

In this article, we’ll look at how to run code when an animation is complete with React Native.

How to run code when an animation is complete with React Native?

To run code when an animation is complete with React Native, we can put the code that we want to run when the animation is done in the callback we pass into start.

For instance, we write:

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

const App = () => {
  const fadeAnim = React.useRef(new Animated.Value(100)).current;
  const [finished, setFinished] = React.useState(false);

  const fadeOut = () => {
    Animated.timing(fadeAnim, {
      toValue: 0,
      duration: 3000,
    }).start(() => setFinished(true));
  };

  React.useEffect(() => {
    fadeOut();
  }, []);

  return (
    <View>
      <Animated.View
        style={[
          {
            opacity: fadeAnim,
          },
        ]}>
        <Text>Fading View</Text>
      </Animated.View>
      {finished && <Text>Finished</Text>}
    </View>
  );
};
export default App;

to add an animated view.

We set the opacity style to fadeAnim to animate the opacity to fade out the ‘Fading View’ text.

To start the animation, we call Animated.timing with the fadeAnim animation variable.

The duration of the animation is 3000 milliseconds.

And we animate the opacity to 0 as specified by the toValue.

We call start with a function that calls setFinished to set finished to true.

And then we call fadeOut in the useEffect hook callback which is called with an empty array to run the animation when the page loads.

As a result, we see the Fading Out text fade and the Finished text shown after the animation is done.

Conclusion

To run code when an animation is complete with React Native, we can put the code that we want to run when the animation is done in the callback we pass into start.

Sometimes, we want to align text input content to the top in React Native.

In this article, we’ll look at how to align text input content to the top in React Native.

How to align text input content to the top in React Native?

To align text input content to the top in React Native, we can set the textAlignVertical styles property to true.

For instance, we write:

import * as React from 'react';
import { View, TextInput } from 'react-native';
import { Card } from 'react-native-paper';

const App = () => {
  return (
    <View>
      <TextInput
        style={{
          flex: 1,
          width: '100%',
          height: 150,
          border: '1px solid black',
          textAlignVertical: 'top',
        }}
        multiline
        numberOfLines={10}
      />
    </View>
  );
};
export default App;

to set textAlignVertical to 'top' in the styles object to make the inputted text align to the top.

Conclusion

To align text input content to the top in React Native, we can set the textAlignVertical styles property to true.