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

Adjusting the width of the body container in a 2-column layout with menu padding is causing gaps to appear on the right side of

Positioning an image so that it is perfectly aligned on top of another image that is centered

Fade in/out overlay effect when clicking on a content block

What are some tips for designing HTML email templates?

Changing the Values of Variables in an npm Package within SvelteKit

Guide on centering an unfamiliar element in the viewport using HTML, CSS, and JavaScript

Using CSS height 100% does not function properly when the content overflows

Bootstrap 3.2.0 Grid Column Creation Problem Identified

I am facing an issue where the inline CSS is not being applied in my

Highlighting table rows on mouseover using CSS

Divide the page vertically. On the left side, feature an eye-catching image, while on the right side,

Can markers be positioned on top of scroll bars?

Enhancing images by creating clickable sections in a more organized and efficient manner

Tips for altering the color of the email text as it is being typed into the input field

Tips for preventing the appearance of a horizontal scroll bar when utilizing the FlexLayoutModule in Angular

Error in HTML5 video: Unable to access property '0' as it is undefined

Adjusting CSS Div Blocks for Different Screen Sizes

JavaScript popup cannot be shown at this time

iPad screen not displaying overflow for x and y axis

Leveraging IPFS to host a CSS stylesheet