Category: React Native Answers

Sometimes, we want to close React Native modal by clicking on overlay with JavaScript.

In this article, we’ll look at how to close React Native modal by clicking on overlay with JavaScript.

How to close React Native modal by clicking on overlay with JavaScript?

To close React Native modal by clicking on overlay with JavaScript, we set the visible prop.

For instrance, we write

import React, { useState } from "react";
import {
  Button,
  StyleSheet,
  View,
  TouchableOpacity,
  Modal,
} from "react-native";

const App = () => {
  const [show, setShow] = useState(false);
  return (
    <View>
      <TouchableOpacity style={{ marginTop: 200 }}>
        <Button title="show" onPress={() => setShow(!show)} />
      </TouchableOpacity>
      <Modal transparent={true} visible={show} animationType="slide">
        <TouchableOpacity
          activeOpacity={1}
          style={{ backgroundColor: "#000000aa", flex: 1 }}
          onPress={() => setShow(!show)}
        />

        <View style={{ backgroundColor: "#FFFFFF", flex: 1 }}>
          <View>
            <Button title="close" onPress={() => setShow(!show)} />
          </View>
        </View>
      </Modal>
    </View>
  );
};
export default App;

to set the visible prop to the show state.

If show is true, then the Modal is shown.

Otherwise, it’s hidden.

We call setShow to show the modal in the TouchableOpacity components.

Conclusion

To close React Native modal by clicking on overlay with JavaScript, we set the visible prop.

Sometimes, we want to animate the rotation of an Image and React Native and JavaScript.

In this article, we’ll look at how to animate the rotation of an Image and React Native and JavaScript.

How to animate the rotation of an Image and React Native and JavaScript?

To animate the rotation of an Image and React Native and JavaScript, we use the Animated component.

For instance, we write

import { Animated } from "react-native";

//...

<Animated.View style={{ transform: [{ rotate: "10 deg" }] }}>
  <YourComponent />
</Animated.View>;

to wrap Animated.View around YourComponent animate YourComponent .

We set the style prop to { transform: [{ rotate: "10 deg" }] } to rotate the View 10 degrees.

Conclusion

To animate the rotation of an Image and React Native and JavaScript, we use the Animated component.

Sometimes, we want to overlay ActivityIndicator in React Native.

In this article, we’ll look at how to overlay ActivityIndicator in React Native.

How to overlay ActivityIndicator in React Native?

To overlay ActivityIndicator in React Native, we can put it in a modal.

For instance, we write

<Modal
  transparent={true}
  animationType={"none"}
  visible={loading}
  onRequestClose={() => {
    console.log("close modal");
  }}
>
  <View style={styles.modalBackground}>
    <View style={styles.activityIndicatorWrapper}>
      <ActivityIndicator animating={loading} />
    </View>
  </View>
</Modal>

to put the ActivityIndicator in a Modal.

We have transparent set to true to make the modal transparent so we can see the contents underneath it.

And we set the animating to the loading state to make it animate only when loading is true.

Also, we set visible to loading to show the modal only when loading is true.

Conclusion

To overlay ActivityIndicator in React Native, we can put it in a modal.

Sometimes, we want to resize image with React Native.

In this article, we’ll look at how to resize image with React Native.

How to resize image with React Native?

To resize image with React Native, we set the width and height of the image to percentages and set resizeMode to 'cover'.

For instance, we write

<View
  style={{
    width: 180,
    height: 200,
    aspectRatio: 1 * 1.4,
  }}
>
  <Image
    source={{ uri: item.image.url }}
    style={{
      resizeMode: "cover",
      width: "100%",
      height: "100%",
    }}
  />
</View>;

to set the style of the Image to an object with resizeMode set to 'cover' to make the image fit the container.

We set the width and height to '100%' so it fills the whole container.

Conclusion

To resize image with React Native, we set the width and height of the image to percentages and set resizeMode to 'cover'.

Sometimes, we want to use border radius only for 1 corner with React Native.

In this article, we’ll look at how to use border radius only for 1 corner with React Native.

How to use border radius only for 1 corner with React Native?

To use border radius only for 1 corner with React Native, we can use the borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, or borderTopRightRadius properties.

For instance, we write

const styles = EStyleSheet.create({
  imgBox: {
    width: px(72),
    height: px(72),
    borderBottomLeftRadius: 2,
    borderTopLeftRadius: 2,
    overflow: "hidden",
  },
  img: {
    width: px(72),
    height: px(72),
  },
});

//...

const Comp = () => {
  //...
  return (
    <View style={styles.imgBox}>
      <Image source={{ uri: "your image url" }} style={styles.img} />
    </View>
  );
};

to create a stylesheet wiht create.

We set the borderBottomLeftRadius and borderTopLeftRadius properties to set the border radius for those 2 corners in pixels.

Then we apply the imgBox style to the View which has the border radius styles.

Conclusion

To use border radius only for 1 corner with React Native, we can use the borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, or borderTopRightRadius properties.