Search code examples
reactjsreact-nativereact-native-stylesheet

How to put button just after text in react-native?


How to put button just after text in react-native like on image below?

It should look like that:


Solution

  • You can use onPress prop in Text component. And use nested Text

    You can try here: https://snack.expo.io/@vasylnahuliak/9a76b0

    import React, { useState } from 'react';
    import { Text, View, StyleSheet } from 'react-native';
    
    const App = () => {
      const handleLinkPress = () => {
        alert('link pressed')
      }
    
      return (
        <View style={styles.container}>
          <Text>
            Short descriptopm for trainer: Lorem ipsum dolor sit amet, consectetur
            adipiscing elit, sed do eiusmod tempor incididunt ut labore.
            <Text style={styles.link} onPress={handleLinkPress}> edit </Text>
          </Text>
        </View>
      );
    };
    
    const styles = StyleSheet.create({
      link: {
        color: 'blue',
        fontWeight: 'bold',
      },
    });
    
    export default App;