Soy nuevo en reaccionar nativo, así que ayúdame a resolver esto. Quiero establecer el color de fondo del texto, pero este es un tipo de diseño diferente.

He intentado con este código: -

 <View style={styles.titleWrapper}> <View style={styles.titleInner}></View> <Text style={styles.title}>Mobile Verification</Text> </View> const styles = StyleSheet.create({ titleWrapper: { justifyContent: 'center', alignContent: 'center', alignItems: 'center', marginTop: '8%', flexDirection: 'row' }, titleInner: { backgroundColor: COLORS.LIME_GREEN, width: '50%', height: 22, position: 'absolute', bottom: 0, left: '23%', borderRadius: 14, opacity: 0.5, }, title: { color: COLORS.BLACK, fontWeight: 'bold', fontSize: 25, textAlign: 'center', }, })

Quiero implementar lo mismo para otras pantallas también. Aquí, el ancho del color de fondo será diferente según el texto. Entonces, si la longitud del texto es corta, entonces necesitamos el ancho de acuerdo con el texto.

Por favor, guíame sobre cómo aplicar los estilos en él. Gracias por adelantado.