How to resize TouchableOpacity according to the component present inside it?

Question

I'm using TouchableOpacity to make a button as I'm learning react-native.

But the problem is, TouchableOpacity takes 100% width of the screen. But, I want to take the size/grow with the component present inside it.

How can I do it?

import React, { Component } from "react";
import { Text, TouchableOpacity } from "react-native";
export default class App extends Component {
    render(){
        return(
        <TouchableOpacity
            onPress={() => console.log("Pressed!")}
            style={{ backgroundColor: "red" }}
        >

            <Text>Press me!</Text>

        </TouchableOpacity>
        );
    }

When I decrease the width of the TouchableOpacity like 10 or 20, it automatically increases its height to fit the Text.

So, it possible for TouchableOpacity to grow with the size of component present inside it?

Answer 1

You can actually use alignSelf: 'flex-start' or 'flex-end' depending on which side you want to pin