How to Set a Button as Inline Text in a React Native Component

Question

How to Set a Button as Inline Text in a React Native Component

Below is the code snippet I am working with utilizing the Text and Button components provided by react-native-paper:

<Text>See also </Text>
<Button mode="text" compact onPress={this.nav( name )}>Compass</Button>
<Text> on how to use the Compass.</Text>

When this is displayed, it looks like:

https://i.stack.imgur.com/lWpub.png

If I swap out the Button for TouchableOpacity or a similar component, the layout changes to this:

https://i.stack.imgur.com/EEgBF.png

Is there a way to adjust the styling of the Button or TouchableOpacity so that it aligns better with the surrounding text?

UPDATE

After implementing the solution provided by @RajendranNadar and making adjustments to make it compatible with android devices:

See also <Pressable onPress={() => alert('Hello :)')}><Text style={styles.text}>Compass</Text></Pressable> on how to use the Compass.

The outcome is as shown below:

https://i.stack.imgur.com/epjzR.png

css react-native button

Answer 1

Answer №1

If you want to achieve this goal, consider utilizing nested elements in your text. You can try the following approach:

const NestedTextComponent = () => {
  return (
    <Text>Check out <Text style={styles.link} onPress={() => {}}>this link</Text> for more information on how to implement nested texts.</Text>
  );
};

const styles = StyleSheet.create({
  link: {
    color: 'blue',
    textDecorationLine: 'underline'
  }
});

Answer 2

If you want to achieve this goal, consider utilizing nested elements in your text. You can try the following approach:

const NestedTextComponent = () => {
  return (
    <Text>Check out <Text style={styles.link} onPress={() => {}}>this link</Text> for more information on how to implement nested texts.</Text>
  );
};

const styles = StyleSheet.create({
  link: {
    color: 'blue',
    textDecorationLine: 'underline'
  }
});

Answer 3

Answer №2

If you're looking for the most effective way to utilize the Pressable element within the react-native library, this is it!

<Text>
  For more information on how to implement the Compass feature, take a look at <Pressable onPress={() => alert('Hello')}>Compass</Pressable>.
</Text>

To see a demonstration in action, visit the following link:

For further details on the Pressable component, check out the documentation here: Pressable component docs

Answer 4

If you're looking for the most effective way to utilize the Pressable element within the react-native library, this is it!

<Text>
  For more information on how to implement the Compass feature, take a look at <Pressable onPress={() => alert('Hello')}>Compass</Pressable>.
</Text>

To see a demonstration in action, visit the following link:

For further details on the Pressable component, check out the documentation here: Pressable component docs

Answer 5

Answer №3

this is a complete example that works perfectly.

import React from 'react';
import {
  Linking,
  StyleSheet,
  Text,
  TouchableWithoutFeedback,
  View,
} from 'react-native';

const PrivacyPolicy = ({title = 'GET STARTED'}) => {
  const openUrl = async () => {
    let url = 'https://facebook.com';
    await Linking.canOpenURL(url)
      .then(() => Linking.openURL(url))
      .catch(err => {
        console.log(err);
      });
  };
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        By Clicking The "{title}" Button, You Agree to Our
        <TouchableWithoutFeedback onPress={() => openUrl()}>
          <Text style={styles.text2}> Privacy Policy </Text>
        </TouchableWithoutFeedback>
        And
        <TouchableWithoutFeedback onPress={() => openUrl()}>
          <Text style={{...styles.text2}}> End User License Agreement</Text>
        </TouchableWithoutFeedback>
      </Text>
    </View>
  );
};

export default PrivacyPolicy;

const styles = StyleSheet.create({
  container: {
    width: SCREEN_WIDTH - moderateScale(20),
    alignSelf: 'center',
    marginTop: moderateScale(10),
  },
  text: {
   
    includeFontPadding: false,
    fontSize: moderateScale(12),
  },
  text2: {
   
    fontSize: moderateScale(12),
    includeFontPadding: false,
  },
});

Answer 6

this is a complete example that works perfectly.

import React from 'react';
import {
  Linking,
  StyleSheet,
  Text,
  TouchableWithoutFeedback,
  View,
} from 'react-native';

const PrivacyPolicy = ({title = 'GET STARTED'}) => {
  const openUrl = async () => {
    let url = 'https://facebook.com';
    await Linking.canOpenURL(url)
      .then(() => Linking.openURL(url))
      .catch(err => {
        console.log(err);
      });
  };
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        By Clicking The "{title}" Button, You Agree to Our
        <TouchableWithoutFeedback onPress={() => openUrl()}>
          <Text style={styles.text2}> Privacy Policy </Text>
        </TouchableWithoutFeedback>
        And
        <TouchableWithoutFeedback onPress={() => openUrl()}>
          <Text style={{...styles.text2}}> End User License Agreement</Text>
        </TouchableWithoutFeedback>
      </Text>
    </View>
  );
};

export default PrivacyPolicy;

const styles = StyleSheet.create({
  container: {
    width: SCREEN_WIDTH - moderateScale(20),
    alignSelf: 'center',
    marginTop: moderateScale(10),
  },
  text: {
   
    includeFontPadding: false,
    fontSize: moderateScale(12),
  },
  text2: {
   
    fontSize: moderateScale(12),
    includeFontPadding: false,
  },
});

How to Set a Button as Inline Text in a React Native Component

Answer №1

Answer №2

Answer №3

Similar questions

Managing both clicking and hovering events on a single element, ensuring that the popup modal remains open as long as it is being hovered over

Two tables are positioned using distinct alignments but share a common stylesheet

Determining the height of a different element using only CSS, Stylus, or Nib

Creating a visually appealing webpage by utilizing Bootstrap and HTML for the layout

Using CSS to mask images with border-radius

Automatically scrolling a div to the bottom in a React component

Encountered a problem locating the "./aws-exports" file in the "App.js" directory

Adjustable Greybox Overlay Resizes Window Dimensions

Creating triangular shapes that can be interacted with by hovering

Switch the input direction from left to right

Items that share identical height and margin values will appear with divergent visual presentations

Bone Structure Styles - adaptable form

Issue with conflicting peer dependency: React Native for iOS

Tips for making a range slider in react-native

Issue with CSS Transform Causing Rendering Errors in Both Chrome and Firefox

Event listener is failing to execute the functions

Error in react-native while attempting to find the lowest common ancestor of `responderInst` and `targetInst` using `Event

When an absolute positioned element exceeds the right border of its relative parent, its width will be truncated

Ways to showcase INPUT TYPE when making a Selection?

What is the best way to maintain scrollbars on mobile devices?