Is it possible to change width of button according to text inside it.

[mandar-saiyan87]

Hi,
I am new to React Native and Skia.
I want to understand is it possible to change width of a button according to text inside it.

Below is the code snippet

`import { SafeAreaView, View, StyleSheet, useWindowDimensions, TouchableOpacity } from "react-native"
import {
Canvas, Box, BoxShadow, Fill, rrect, rect, Text, useFont
} from "@shopify/react-native-skia";
import React, { useState } from 'react';

const ButtonText = () => {

const fontSize = 22;
const font = useFont(require("../assets/Dosis-VariableFont_wght.ttf"), fontSize);
if (font === null) {
return null;
}
return (

<Canvas style={{ width: "100%", height: "100%" }}>
<Box box={rrect(rect(30, 50, 95, 64), 15, 15)} color="white">

)
}

export default ButtonText
`
Here is the output :

Thanks.

[wcandillon]

The font object has a getTextWidth method you can use to find out how long is the text, you can find some examples at

react-native-skia/example/src/Examples/Wallet/components/Label.tsx

Line 52 in e95e21b

const titleWidth = titleFont.getTextWidth(title);

[Glazzes]

Expanding William's response you can also use it within a computed value like this

const progress = useLoop()
const font = useFont("any font", 20)

const textWidth = useComputedValue(() => {
  return font.getTextWidth(`${Math.floor(progress.current * 100)}%`)
}, [progress, font])

This one is a simple example of getting the text width for percentage from "0%" to "100%"

[mandar-saiyan87]

Hi,
Thank you for the fast response.
Just want to unnderstand bit more about font and text.
Is it possible to add padding to text in button and use system font directly instead of using .ttf files??

Thanks