Category: React Native Answers

Sometimes, we want to show SVG file on React Native.

In this article, we’ll look at how to show SVG file on React Native.

How to show SVG file on React Native?

To show SVG file on React Native, we can use the react-native-svg-uri package.

To install it, we run

npm install react-native-svg-uri --save

Then we link the library with

react-native link react-native-svg 

Then we use it by writing

import * as React from "react";
import SvgUri from "react-native-svg-uri";
import testSvg from "./test.svg";

export default () => <SvgUri width="200" height="200" svgXmlData={testSvg} />;

We use the SvgUri component to render the testSvg SVG image.

Conclusion

To show SVG file on React Native, we can use the react-native-svg-uri package.

Sometimes, we want to add a full screen background image with React Native and JavaScript.

In this article, we’ll look at how to add a full screen background image with React Native and JavaScript.

How to add a full screen background image with React Native and JavaScript?

To add a full screen background image with React Native and JavaScript, we add an Image and make it full screen.

For instance, we write

<Image source={require('image!egg')} style={styles.backgroundImage} />

to add the Image into our component.

Then we define styles by writing

import React from "react-native";
const { StyleSheet } = React;

const styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    resizeMode: "cover",
  },
});

to call StyleSheet.create with an object that set the backgroundImage.resizeMode to 'cover' to make it full screen.

We apply the styles with style={styles.backgroundImage}.

Conclusion

To add a full screen background image with React Native and JavaScript, we add an Image and make it full screen.

Sometimes, we want to display a hyperlink in a React Native app.

In this article, we’ll look at how to display a hyperlink in a React Native app.

How to display a hyperlink in a React Native app?

To display a hyperlink in a React Native app, we can use the Text component.

For instance, we write

import { Linking } from "react-native";
//...

export default () => {
  //...

  return (
    <Text
      style={{ color: "blue" }}
      onPress={() => Linking.openURL("http://example.com")}
    >
      Example
    </Text>
  );
};

to add a Text component.

We set its onPress prop to a function that calls Linking.openURL to open the URL we want to go to in a web view.

And we set the color to 'blue' to make it look like a link.

Conclusion

To display a hyperlink in a React Native app, we can use the Text component.

Sometimes, we want to hide or show components in React Native.

In this article, we’ll look at how to hide or show components in React Native.

How to hide or show components in React Native?

To hide or show components in React Native, we can use the && operator.

For instance, we write

{
  showInput && <TextInput />;
}

to show the TextInput only when showInput is true.

showInput can be a state or a prop.

When a state or prop changes, the component will re-render.

Conclusion

To hide or show components in React Native, we can use the && operator.

To add a custom alert dialog in React Native, we use the react-native-modalbox library.

To install it, we run

npm install react-native-modalbox@latest --save

Then we use it by writing

import Modal from "react-native-modalbox";

//...

<Modal
  style={[styles.modal, styles.modal1]}
  ref={"modal1"}
  swipeToClose={swipeToClose}
  onClosed={onClose}
  onOpened={onOpen}
  onClosingState={onClosingState}
>
  <Text style={styles.text}>Basic modal</Text>
  <Button
    title={`Disable swipeToClose(${swipeToClose ? "true" : "false"})`}
    onPress={() => setSwipeToClose(!swipeToClose)}
    style={styles.btn}
  />
</Modal>

to import Modal from react-native-modalbox.

And then we add the Modal component into our view component.

We set the onClosingState, onClosed and onOpen handlers to component functions.

And we add the Text and Button components as content of the Modal.

We style the Modal by setting the style prop of the components.