Question 33485 in React native Question posted in
The official React Native documentation can be found here.

Style Button as inline text in react-native – React native

I have the following code using the Text and Button components from 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 rendered this results in:

enter image description here

If I replace the Button with TouchableOpacity or alike the result looks like:

enter image description here

How can I style the Button or TouchableOpacity so it’s not offset in regard to the surrounding text?

UPDATE

Using the example from @RajendranNadar and after fixing so it runs on android:

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

results in

enter image description here

Tags:

3

Answers


  1. 0

    One way to accomplish this is to use nested texts. Something like this:

    const NestedText = () => {
  return (
    <Text>See also <Text style={styles.link} onPress={() => {}}>Compass</Text> on how to use the Compass.</Text>
  );
};

const styles = StyleSheet.create({
  link: {
    color: 'blue',
    textDecorationLine: 'underline'
  }
});
    Login or Signup to reply.
  2. 0

    This is the best approach to using the Pressable component from the react-native package

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

    Check the live demo here https://snack.expo.dev/@raajnadar/pressable-example

    Pressable component docs

    Login or Signup to reply.
  3. 0

    this is full working example.

    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 Pressing The "{title}" You Accept
        <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,
  },
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search